Misc UI 4843 better Edit mode

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": {

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;
+        }
+
+        &.l-layout__frame {
+            > *:not(.c-so-view--layout) .c-so-view__object-view {
+                pointer-events: none;
+            }
         }
-        > * > * > * {
-            // When a sub-layout is the parent
-            @include displayMarquee(blue);
+
+        // 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;
         }
     }
 }

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();

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

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.

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%);

src/styles/_global.scss

@@ -95,7 +95,6 @@ body.desktop {
     div, span {
         // Firefox
         scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
-        scrollbar-width: thin;
     }
 }
 

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;
             }

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;
     }
 

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 {

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: {