Merge branch 'master' into misc-ui-4843

# Conflicts: # src/styles/_constants-espresso.scss # src/styles/_constants-maelstrom.scss # src/styles/fonts/Open-MCT-Symbols-16px.svg # src/styles/fonts/Open-MCT-Symbols-16px.ttf # src/styles/fonts/Open-MCT-Symbols-16px.woff
Fixes #4843
2022-10-19 08:38:40 -07:00 · 2022-10-19 08:15:36 -07:00 · 2022-10-19 08:14:04 -07:00 · 2022-04-25 13:39:27 -07:00 · 2022-04-25 12:44:24 -07:00 · 2022-02-17 15:57:22 -08:00
12 changed files with 117 additions and 70 deletions
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
    "vue-template-compiler": "2.6.14",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.11.1",
+    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "5.8.0"
  },
  "scripts": {
--- a/src/plugins/displayLayout/components/display-layout.scss
+++ b/src/plugins/displayLayout/components/display-layout.scss
@@ -1,16 +1,3 @@
-@mixin displayMarquee($c) {
-    > .c-frame-edit {
-        // All other frames
-        //@include test($c, 0.4);
-        display: block;
-    }
-    > .c-frame > .c-frame-edit {
-        // Line object frame
-        //@include test($c, 0.4);
-        display: block;
-    }
-}
-
 .l-layout {
    @include abs();
    display: flex;
@@ -83,14 +70,36 @@
    }

    /*********************** EDIT MARQUEE CONTROL */
-    *[s-selected-parent] {
-        > .l-layout {
-            // When main shell layout is the parent
-            @include displayMarquee(deeppink);
+    *[s-selected] {
+        // The selected frame should always be a sibling of .c-frame-edit
+        // except for the Display Layout line object
+        > .c-frame-edit,
+        ~ .c-frame-edit {
+            display: block;
        }
-        > * > * > * {
-            // When a sub-layout is the parent
-            @include displayMarquee(blue);
+
+        &.l-layout__frame {
+            > *:not(.c-so-view--layout) .c-so-view__object-view {
+                pointer-events: none;
+            }
+        }
+
+        // When select context is main view layout
+        &.is-object-type-layout,
+        &.is-object-type-tabs {
+            .l-layout,
+            .c-so-view--layout {
+                .c-object-view:not(.is-object-type-layout) {
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    // When editing, turn off pointer events for all sub-objects other than layouts
+    .c-so-view--layout {
+        .c-object-view:not(.is-object-type-layout) {
+            pointer-events: none;
        }
    }
 }
--- a/src/plugins/displayLayout/components/layout-frame.scss
+++ b/src/plugins/displayLayout/components/layout-frame.scss
@@ -69,7 +69,7 @@
                        transition-delay: $moveBarOutDelay;
                    }

-                    + .c-frame__move-bar {
+                    ~ .c-frame__move-bar {
                        transition: $transOut;
                        transition-delay: $moveBarOutDelay;
                        @include userSelectNone();
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -90,7 +90,7 @@ $objectLabelNameFilter: brightness(1.3);

 // Layout
 $shellMainPad: 4px 0;
-$shellPanePad: $interiorMargin, 7px;
+$shellPanePad: $interiorMargin, 5px;
 $drawerBg: lighten($colorBodyBg, 5%);
 $drawerFg: lighten($colorBodyFg, 5%);
 $sideBarBg: $drawerBg;
@@ -164,9 +164,10 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
+$editUIColorEditLabelFg: $editUIColor;
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
-$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
+$editUIBaseColorHov: pullForward($editUIBaseColor, 10%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
 $editUIAreaBaseColor: pullForward(saturate($editUIBaseColor, 30%), 20%);
 $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -94,7 +94,7 @@ $objectLabelNameFilter: brightness(1.3);

 // Layout
 $shellMainPad: 4px 0;
-$shellPanePad: $interiorMargin, 7px;
+$shellPanePad: $interiorMargin, 5px;
 $drawerBg: lighten($colorBodyBg, 5%);
 $drawerFg: lighten($colorBodyFg, 5%);
 $sideBarBg: $drawerBg;
@@ -168,7 +168,8 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
+$editUIColorEditLabelFg: $editUIColor;
+$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -90,7 +90,7 @@ $objectLabelNameFilter: brightness(0.9);

 // Layout
 $shellMainPad: 4px 0;
-$shellPanePad: $interiorMargin, 7px;
+$shellPanePad: $interiorMargin, 5px;
 $drawerBg: darken($colorBodyBg, 5%);
 $drawerFg: darken($colorBodyFg, 5%);
 $sideBarBg: $drawerBg;
@@ -164,6 +164,7 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
+$editUIColorEditLabelFg: $editUIColor;
 $editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #cae1ff; // Base color, toolbar bg
 $editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -95,7 +95,6 @@ body.desktop {
    div, span {
        // Firefox
        scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
-        scrollbar-width: thin;
    }
 }

--- a/src/ui/components/object-frame.scss
+++ b/src/ui/components/object-frame.scss
@@ -14,7 +14,6 @@
        @include smallerControlButtons; // Make button in frame headers a bit smaller

        .c-object-label {
-            font-size: 1.05em;
            &__type-icon {
                opacity: $objectLabelTypeIconOpacity;
            }
--- a/src/ui/components/object-label.scss
+++ b/src/ui/components/object-label.scss
@@ -29,7 +29,6 @@
        // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
        display: block;
        flex: 0 0 auto;
-        font-size: 1.1em;
        opacity: $objectLabelTypeIconOpacity;
    }

--- a/src/ui/inspector/inspector.scss
+++ b/src/ui/inspector/inspector.scss
@@ -3,15 +3,14 @@
    flex: 1 1 auto;
    flex-direction: column;

-    > * {
-        // This is on purpose: want extra margin on top object-name element
+    > * + * {
        margin-top: $interiorMargin;
    }

    &__selected,
    &__multiple-selected {
        @include headerFont(1.1em);
-        padding: $interiorMarginSm 0;
+        //padding: $interiorMarginSm 0;
    }

    &__multiple-selected {
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -11,6 +11,8 @@
            class="l-browse-bar__object-name--w c-object-label"
            :class="[statusClass]"
        >
+            <div class="l-browse-bar__edit-label">Editing</div>
+
            <div
                class="c-object-label__type-icon"
                :class="type.cssClass"
@@ -58,7 +60,7 @@

            <button
                v-if="isViewEditable & !isEditing"
-                :title="lockedOrUnlockedTitle"
+                title="Click to toggle edit capability"
                :class="{
                    'c-button icon-lock': domainObject.locked,
                    'c-icon-button icon-unlocked': !domainObject.locked
@@ -71,17 +73,20 @@
                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
                title="Edit"
                @click="edit()"
-            ></button>
+            >
+                <span class="c-button__label">Edit</span>
+            </button>

            <div
                v-if="isEditing"
                class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left"
            >
                <button
-                    class="c-button--menu c-button--major icon-save"
+                    class="c-button--menu l-browse-bar__save icon-save"
                    title="Save"
                    @click.stop="toggleSaveMenu"
-                ></button>
+                >
+                    <span class="c-button__label">Save</span></button>
                <div
                    v-show="showSaveMenu"
                    class="c-menu"
@@ -107,12 +112,12 @@

            <button
                v-if="isEditing"
-                class="l-browse-bar__actions c-button icon-x"
+                class="l-browse-bar__actions l-browse-bar__cancel-edit c-icon-button icon-x"
                title="Cancel Editing"
                @click="promptUserandCancelEditing()"
            ></button>
            <button
-                class="l-browse-bar__actions c-icon-button icon-3-dots"
+                class="l-browse-bar__actions l-browse-bar__more-options c-icon-button icon-3-dots"
                title="More options"
                @click.prevent.stop="showMenuItems($event)"
            ></button>
@@ -211,13 +216,6 @@ export default {
            }

            return false;
-        },
-        lockedOrUnlockedTitle() {
-            if (this.domainObject.locked) {
-                return 'Locked for editing - click to unlock.';
-            } else {
-                return 'Unlocked for editing - click to lock.';
-            }
        }
    },
    watch: {
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@@ -79,10 +79,6 @@
        .l-pane__contents {
            > * {
                flex: 0 0 auto;
-
-                + * {
-                    margin-top: $interiorMargin;
-                }
            }
        }
    }
@@ -153,8 +149,11 @@

    /******************************* HEAD */
    &__main-view-browse-bar {
+        background: none; //$editUIBaseColor;
+        border-top-left-radius: $controlCr;
+        border-top-right-radius: $controlCr;
        flex: 0 0 auto;
-        margin-bottom: $interiorMargin; // Needs some additional visual separation
+        padding: 5px 5px;
    }

    body.mobile & .l-shell__main-view-browse-bar {
@@ -233,16 +232,15 @@
    /******************************* MAIN AREA */
    &__main-container {
        // Wrapper for main views
+        border: 2px solid transparent; // $editUIBaseColor;
+        border-bottom-left-radius: $controlCr;
+        border-bottom-right-radius: $controlCr;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto !important;
        height: 100%; // Chrome 73 overflow bug fix
        overflow: auto;

-        > * + * {
-            margin-top: $interiorMargin;
-        }
-
        > .c-object-view {
            flex: 1 1 auto;
            overflow: auto;
@@ -258,6 +256,7 @@
        border-top: 1px solid $colorInteriorBorder;
        display: flex;
        flex-direction: column;
+        margin-top: $interiorMargin;
        padding-top: $interiorMargin;

        > * + * {
@@ -303,7 +302,7 @@
        // Toolbar in the main shell, used by Display Layouts
        $p: $interiorMargin;
        background: $editUIBaseColor;
-        border-radius: $basicCr;
+        border-radius: $controlCr;
        height: $p + 24px; // Need to standardize the height
        justify-content: space-between;
        padding: $p;
@@ -323,11 +322,51 @@
 }

 .is-editing {
+    .l-shell__main-view-browse-bar {
+        background: $editUIBaseColor;
+
+        .c-notebook-snapshot-menubutton,
+        .l-browse-bar__more-options {
+            display: none;
+        }
+    }
+
+    .l-browse-bar__save {
+        background: $editUIColorFg;
+        color: $editUIBaseColor;
+
+        &:hover {
+            filter: none !important;
+            background: rgba($editUIColorFg, 0.8);
+        }
+    }
+
+    .l-browse-bar__cancel-edit {
+        color: $editUIColorFg;
+
+        &:hover {
+            background: $editUIBaseColorHov !important;
+        }
+    }
+
+    .l-shell__toolbar {
+        $m: $interiorMargin;
+        background: $editUIBaseColor;
+        border-radius: 0;
+        &:before {
+            background: rgba($editUIColorFg, 10%);
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            height: 1px;
+            left: $m;
+            right: $m;
+        }
+    }
+
    .l-shell__main-container {
-        $m: 3px;
-        box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
-        margin-left: $m;
-        margin-right: $m;
+        border-color: $editUIBaseColor;

        &[s-selected] {
            // Provide a clearer selection context articulation for the main edit area
@@ -385,11 +424,6 @@
        flex: 0 0 auto;
    }

-    &__nav-to-parent-button,
-    &__disclosure-button {
-        //flex: 0 0 auto;
-    }
-
    &__nav-to-parent-button {
        // This is an icon-button
        margin-right: $interiorMargin;
@@ -408,10 +442,6 @@
        filter: $objectLabelNameFilter;
    }

-    .c-object-label__type-icon {
-        opacity: $objectLabelTypeIconOpacity;
-    }
-
    &__object-name--w {
        @include headerFont(1.5em);
        min-width: 0;
@@ -425,6 +455,17 @@
    &__object-details {
        opacity: 0.5;
    }
+
+    &__edit-label {
+        @include ellipsize();
+        flex: 0 1 auto;
+        margin: 0 $interiorMarginSm;
+        color: $editUIColorEditLabelFg;
+        display: none !important;
+        text-transform: uppercase;
+
+        .is-editing & { display: block !important; }
+    }
 }

 /************************** DRAWER */
Author	SHA1	Message	Date
Charles Hacskaylo	2ccf706d2b	Merge branch 'master' into misc-ui-4843 # Conflicts: # src/styles/_constants-espresso.scss # src/styles/_constants-maelstrom.scss # src/styles/fonts/Open-MCT-Symbols-16px.svg # src/styles/fonts/Open-MCT-Symbols-16px.ttf # src/styles/fonts/Open-MCT-Symbols-16px.woff	2022-10-19 08:38:40 -07:00
Charles Hacskaylo	71fb7e3649	Fixes #4843 - Sanding and shimming for enhanced Edit mode look-and-feel. - Cleanup, remove commented CSS.	2022-10-19 08:15:36 -07:00
Charles Hacskaylo	01eb761571	Fixes #4843 - Mod to edit lock button title.	2022-10-19 08:14:04 -07:00
Charles Hacskaylo	91cc50e64b	Style tweaking for Firefox/Chrome parity - symbols font changed from 20% baseline height to 10%; - Remove type-icon special case font sizing; - Remove Firefox-specific `scrollbar-width: thin` for Ubuntu display;	2022-04-25 13:39:27 -07:00
Charles Hacskaylo	084b58bcff	Merge latest master, resolve minor conflicts	2022-04-25 12:44:24 -07:00
Charles Hacskaylo	cfb26018a5	More clarity for edit mode - New look for editing mode; - Better approach to main pane while editing; - Suppressed Snapshot while editing for clarity; - WIP, needs cleanups;	2022-02-17 15:57:22 -08:00
Charles Hacskaylo	1afe29b846	More clarity for edit mode - Added labels to main view Edit and Save buttons;	2022-02-10 18:50:32 -06:00
Charles Hacskaylo	ffbe3978a3	Layout sub-object editing fixes - Restored sub-object `c-frame-edit` behavior; - Smoke tested with nested Display Layouts, Flex Layouts and Tabs View containing Display Layouts;	2022-02-10 17:07:22 -06:00