Misc UI 5 (#2332)
* Style fixes for Inspector and location elements - Code cleanup; - Remove legacy styles; * Tab styling WIP, for VISTA Venue dialog * Add new c-tabs styles, replaces c-compact-button - Remove c-compact-button and mixin; - Refactor to use c-tabs in Tabs View; - New notched look for tabs; * Tweaks to c-tabs * Misc various - Increased mouse wheel zoom and changed to use const; - Fixed squishy grippys in Elements pool; - Fixed Time Conductor to prevent overrunning right pane when main pane is very small; - Changed message text when leaving Layout editing; - Fixed z-index problem with splitter bars and VISTA Indicator hover bubbles; - Restored support for legacy `l-input-lg` to allow large text input fields in form generation; - Modded styles in Properties dialog to fix issue with label column colliding with inputs when the label text is long; * Restore hover hide/show to local controls in Summary Widgets - Also fixed rotation transition for disclosure controls; * Refinement to overflow hidden for Time Conductor UI * Fix Time Conductor layout in mobile * Fix Filter tree items in Inspector * Move .selector-list out from within .form .form-row to allow more flexible usage; * Significant theme updates; table layout and Summary styling added - Reorganized status constants; - Added base styles for selected and active styles; - Added styling for selected and active buttons; - c-table changed from absolute pos to relative; - Added c-table-and-summary styling; * Tweaks to Location component
This commit is contained in:
Charles Hacskaylo
committed by
Andrew Henry
Andrew Henry
parent
6c479d6d59
commit
c0ce448dc3
@@ -23,73 +23,76 @@
|
||||
<div class="c-conductor"
|
||||
:class="[isFixed ? 'is-fixed-mode' : 'is-realtime-mode']">
|
||||
<form class="u-contents" ref="conductorForm" @submit.prevent="updateTimeFromConductor">
|
||||
<button class="c-input--submit" type="submit" ref="submitButton"></button>
|
||||
<ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
|
||||
<div class="c-conductor__time-bounds">
|
||||
<button class="c-input--submit" type="submit" ref="submitButton"></button>
|
||||
<ConductorModeIcon class="c-conductor__mode-icon"></ConductorModeIcon>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
|
||||
v-if="isFixed">
|
||||
<!-- Fixed start -->
|
||||
<div class="c-conductor__start-fixed__label">Start</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
ref="startDate"
|
||||
v-model="formattedBounds.start"
|
||||
@change="validateAllBounds(); submitForm()" />
|
||||
<date-picker
|
||||
v-if="isFixed && isUTCBased"
|
||||
:default-date-time="formattedBounds.start"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="startDateSelected"></date-picker>
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT start -->
|
||||
<div class="c-direction-indicator icon-minus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text" autocorrect="off"
|
||||
ref="startOffset"
|
||||
spellcheck="false"
|
||||
v-model="offsets.start"
|
||||
@change="validateAllOffsets(); submitForm()">
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
|
||||
<!-- Fixed end and RT 'last update' display -->
|
||||
<div class="c-conductor__end-fixed__label">
|
||||
{{ isFixed ? 'End' : 'Updated' }}
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"
|
||||
v-if="isFixed">
|
||||
<!-- Fixed start -->
|
||||
<div class="c-conductor__start-fixed__label">Start</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
ref="startDate"
|
||||
v-model="formattedBounds.start"
|
||||
@change="validateAllBounds(); submitForm()" />
|
||||
<date-picker
|
||||
v-if="isFixed && isUTCBased"
|
||||
:default-date-time="formattedBounds.start"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="startDateSelected"></date-picker>
|
||||
</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
v-model="formattedBounds.end"
|
||||
:disabled="!isFixed"
|
||||
ref="endDate"
|
||||
@change="validateAllBounds(); submitForm()">
|
||||
<date-picker
|
||||
v-if="isFixed && isUTCBased"
|
||||
class="c-ctrl-wrapper--menus-left"
|
||||
:default-date-time="formattedBounds.end"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="endDateSelected"></date-picker>
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT end -->
|
||||
<div class="c-direction-indicator icon-plus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
ref="endOffset"
|
||||
v-model="offsets.end"
|
||||
@change="validateAllOffsets(); submitForm()">
|
||||
</div>
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT start -->
|
||||
<div class="c-direction-indicator icon-minus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text" autocorrect="off"
|
||||
ref="startOffset"
|
||||
spellcheck="false"
|
||||
v-model="offsets.start"
|
||||
@change="validateAllOffsets(); submitForm()">
|
||||
</div>
|
||||
|
||||
<conductor-axis
|
||||
class="c-conductor__ticks"
|
||||
:bounds="rawBounds"
|
||||
@panAxis="setViewFromBounds"></conductor-axis>
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-fixed">
|
||||
<!-- Fixed end and RT 'last update' display -->
|
||||
<div class="c-conductor__end-fixed__label">
|
||||
{{ isFixed ? 'End' : 'Updated' }}
|
||||
</div>
|
||||
<input class="c-input--datetime"
|
||||
type="text" autocorrect="off" spellcheck="false"
|
||||
v-model="formattedBounds.end"
|
||||
:disabled="!isFixed"
|
||||
ref="endDate"
|
||||
@change="validateAllBounds(); submitForm()">
|
||||
<date-picker
|
||||
v-if="isFixed && isUTCBased"
|
||||
class="c-ctrl-wrapper--menus-left"
|
||||
:default-date-time="formattedBounds.end"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="endDateSelected"></date-picker>
|
||||
</div>
|
||||
|
||||
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"
|
||||
v-if="!isFixed">
|
||||
<!-- RT end -->
|
||||
<div class="c-direction-indicator icon-plus"></div>
|
||||
<input class="c-input--hrs-min-sec"
|
||||
type="text"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
ref="endOffset"
|
||||
v-model="offsets.end"
|
||||
@change="validateAllOffsets(); submitForm()">
|
||||
</div>
|
||||
|
||||
<conductor-axis
|
||||
class="c-conductor__ticks"
|
||||
:bounds="rawBounds"
|
||||
@panAxis="setViewFromBounds"></conductor-axis>
|
||||
|
||||
</div>
|
||||
<div class="c-conductor__controls">
|
||||
<!-- Mode, time system menu buttons and duration slider -->
|
||||
<ConductorMode class="c-conductor__mode-select"></ConductorMode>
|
||||
@@ -113,17 +116,18 @@
|
||||
|
||||
/*********************************************** CONDUCTOR LAYOUT */
|
||||
.c-conductor {
|
||||
display: grid;
|
||||
grid-column-gap: $interiorMargin;
|
||||
grid-row-gap: $interiorMargin;
|
||||
align-items: center;
|
||||
&__time-bounds {
|
||||
display: grid;
|
||||
grid-column-gap: $interiorMargin;
|
||||
grid-row-gap: $interiorMargin;
|
||||
align-items: center;
|
||||
|
||||
// Default: fixed mode, desktop
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 20px auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-ticks tc-end"
|
||||
"tc-controls tc-controls tc-controls tc-controls";
|
||||
// Default: fixed mode, desktop
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 20px auto 1fr auto;
|
||||
grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__mode-icon {
|
||||
grid-area: tc-mode-icon;
|
||||
@@ -163,10 +167,10 @@
|
||||
}
|
||||
|
||||
&.is-realtime-mode {
|
||||
grid-template-columns: 20px auto 1fr auto auto;
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-ticks tc-updated tc-end"
|
||||
"tc-controls tc-controls tc-controls tc-controls tc-controls";
|
||||
.c-conductor__time-bounds {
|
||||
grid-template-columns: 20px auto 1fr auto auto;
|
||||
grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-updated tc-end";
|
||||
}
|
||||
|
||||
.c-conductor__end-fixed {
|
||||
grid-area: tc-updated;
|
||||
@@ -174,9 +178,15 @@
|
||||
}
|
||||
|
||||
body.phone.portrait & {
|
||||
grid-row-gap: $interiorMargin;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-columns: 20px auto auto;
|
||||
.c-conductor__time-bounds {
|
||||
grid-row-gap: $interiorMargin;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: 20px auto auto;
|
||||
}
|
||||
|
||||
.c-conductor__controls {
|
||||
padding-left: 25px; // Line up visually with other controls
|
||||
}
|
||||
|
||||
&__mode-icon {
|
||||
grid-row: 1;
|
||||
@@ -200,17 +210,19 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
grid-template-areas:
|
||||
.c-conductor__time-bounds {
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-start"
|
||||
"tc-mode-icon tc-end tc-end"
|
||||
"tc-mode-icon tc-controls tc-controls";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-realtime-mode {
|
||||
grid-template-areas:
|
||||
.c-conductor__time-bounds {
|
||||
grid-template-areas:
|
||||
"tc-mode-icon tc-start tc-updated"
|
||||
"tc-mode-icon tc-end tc-end"
|
||||
"tc-mode-icon tc-controls tc-controls";
|
||||
"tc-mode-icon tc-end tc-end";
|
||||
}
|
||||
|
||||
.c-conductor__end-fixed {
|
||||
justify-content: flex-end;
|
||||
|
||||
Reference in New Issue
Block a user