@opensumi/ide-design 2.27.3-rc-1714116491.0 → 2.27.3-rc-1714982362.0

package/src/browser/style/design.module.less

@@ -1,6 +1,6 @@
 :global(.design-dark) {
   .design-box-panel {
-    background-image: url('https://mdn.alipayobjects.com/huamei_htww6h/afts/img/A*hLI-SqEx-YkAAAAAAAAAAAAADhl8AQ/original');
+    background-image: url('./images/design-background-dark.png');
     background-repeat: no-repeat;
     background-size: cover;
   }
@@ -8,10 +8,27 @@
 
 :global(.design-light) {
   .design-box-panel {
-    background-image: url('https://mdn.alipayobjects.com/huamei_aj2sia/afts/img/A*6wRWRLd0RCMAAAAAAAAAAAAADoSNAQ/original');
+    background-image: url('./images/design-background-light.png');
     background-repeat: no-repeat;
     background-size: cover;
   }
+
+  .editor_tab_block_container {
+    > div:first-child {
+      &::before {
+        filter: grayscale(0);
+      }
+    }
+  }
+}
+
+:global(.design-dark),
+:global(.design-light) {
+  :global(.design_bottom_slot) {
+    .design-panel_title_bar {
+      background-color: var(--design-title-background);
+    }
+  }
 }
 
 :global(#opensumi-quickpick) {
@@ -119,12 +136,24 @@
         .design-close_tab {
           display: block;
         }
+
+        &.design-kt_editor_tab_dirty {
+          .design-close_tab {
+            display: none;
+          }
+
+          &:hover {
+            .design-close_tab {
+              display: block;
+            }
+          }
+        }
       }
 
       &.design-kt_editor_tab_current_prev {
         background-color: var(--panel-background);
 
-        div[class*='design-editor_tab_block_container__'] {
+        .design-editor_tab_block_container {
           border-radius: 0 0 12px 0;
           background-color: var(--editorGroupHeader-tabsBackground);
         }
@@ -133,7 +162,7 @@
       &.design-kt_editor_tab_current_next {
         background-color: var(--panel-background);
 
-        div[class*='design-editor_tab_block_container__'] {
+        .design-editor_tab_block_container {
           background-color: var(--editorGroupHeader-tabsBackground);
           border-radius: 0 0 0 12px;
 
@@ -254,6 +283,70 @@
   }
 }
 
+.design-editor_tab_block_container {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  border-radius: 12px 12px 0 0;
+  padding: 0 8px;
+  margin-right: 0 !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 12px;
+    display: inline-block;
+    width: 1px;
+    height: 12px;
+    background-color: var(--editorGroup-border);
+  }
+
+  > div:first-child {
+    margin-right: 4px !important;
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    &::before {
+      font-size: 14px;
+      background-size: 14px;
+      background-position: 2px;
+      filter: grayscale(1);
+      color: var(--design-icon-foreground);
+    }
+  }
+
+  &.active {
+    background-color: var(--tab-activeBackground);
+    color: var(--tab-activeForeground);
+
+    &::before {
+      content: none;
+    }
+
+    div:first-child {
+      &::before {
+        filter: grayscale(0);
+      }
+    }
+  }
+
+  .design-tab_right {
+    &:hover {
+      background-color: initial !important;
+      transform: scale(1) !important;
+    }
+
+    .design-close_tab {
+      color: var(--design-icon-foreground);
+
+      &:hover {
+        color: var(--design-text-foreground);
+      }
+    }
+  }
+}
+
 /**
 * ---------------- Override editor navigation bar style ---------------------
 */
@@ -289,31 +382,10 @@
   background-color: var(--panel-background);
 }
 
-div[class*='design-editor_tab_block_container__'] {
-  .design-tab_right {
-    &:hover {
-      background-color: initial !important;
-      transform: scale(1) !important;
-    }
-
-    .design-close_tab {
-      color: var(--design-icon-foreground);
-
-      &:hover {
-        color: var(--design-text-foreground);
-      }
-    }
-  }
-}
-
 /**
 * ---------------- Override editor panel bottom tabbar style ---------------------
 */
 :global(.design_bottom_slot) {
-  .design-tab_bar {
-    height: 100%;
-  }
-
   .design-tab_panel {
     &::before {
       content: none;
@@ -327,7 +399,6 @@ div[class*='design-editor_tab_block_container__'] {
 
   .design-bottom_bar_container {
     width: 100%;
-    height: 32px;
   }
 
   .design-variable_repl_bar {
@@ -498,15 +569,6 @@ div[class*='design-editor_tab_block_container__'] {
   }
 }
 
-:global(.design-dark),
-:global(.design-light) {
-  :global(.design_bottom_slot) {
-    .design-panel_title_bar {
-      background-color: var(--design-title-background);
-    }
-  }
-}
-
 :global(.design_left_slot) {
   margin-right: 1px;
 }
@@ -541,6 +603,9 @@ div[class*='design-editor_tab_block_container__'] {
 
     &::-webkit-scrollbar {
       width: 4px;
+      &:hover {
+        width: 10px;
+      }
     }
   }
 
@@ -580,8 +645,8 @@ div[class*='design-editor_tab_block_container__'] {
       }
 
       &:hover {
-        color: var(--design-text-hoverForeground);
-        background-color: var(--activityBar-activeBorder);
+        background-color: var(--badge-background);
+        color: var(--badge-foreground);
         border-radius: 4px;
         opacity: 1;
       }
@@ -608,7 +673,7 @@ div[class*='design-editor_tab_block_container__'] {
     color: var(--design-text-placeholderForeground);
   }
 
-  div[class*='mod_selected___'] {
+  div[class*='mod_selected'] {
     .design-opened_editor_node_overflow_wrap {
       color: var(--design-text-highlightForeground) !important;
     }
@@ -717,5 +782,92 @@ div[class*='design-editor_tab_block_container__'] {
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
+
+    &:hover {
+      width: 10px;
+    }
+  }
+}
+
+/**
+* ---------------- Override menu actions styles ---------------------
+*/
+.menuAction__sub_menu_action_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  user-select: none;
+  padding-left: 12px;
+  padding-right: 12px;
+  min-width: 150px;
+
+  .icon {
+    filter: grayscale(1);
+
+    span {
+      margin-right: 8px;
+    }
+  }
+
+  .extraDesc,
+  .shortcut {
+    justify-content: right;
+    text-align: center;
+    color: var(--kt-menu-descriptionForeground);
+    font-size: 12px;
+  }
+
+  .icon,
+  .submenuIcon {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :global(.kt-icon) {
+      color: var(--design-text-foreground);
+    }
+  }
+
+  .label {
+    flex: 1;
+    padding-right: 16px;
+  }
+
+  &.disabled {
+    .shortcut {
+      color: var(--kt-menu-disableForeground);
+    }
+  }
+
+  &:not(.disabled):hover {
+    background: var(--menu-selectionBackground) !important;
+    color: var(--menu-selectionForeground) !important;
+
+    .shortcut {
+      color: var(--menu-selectionForeground);
+    }
+  }
+
+  &:focus {
+    .shortcut {
+      color: var(--menu-selectionForeground);
+    }
+  }
+
+  .label {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    // stop Flexbox removing trailing whitespace
+    // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
+    white-space: pre-wrap;
+  }
+
+  .submenuIcon {
+    span {
+      font-size: 16px;
+    }
   }
 }

package/src/browser/style/global.less

@@ -35,6 +35,9 @@
   &::-webkit-scrollbar {
     width: 4px;
     margin: 20px;
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -100,10 +103,8 @@
 .kt-popover-content {
   box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
     0px 6px 16px 0px var(--design-boxShadow-tertiary);
-  padding: 5px 8px;
   border-radius: 6px;
   line-height: 18px;
-  margin-top: -3px;
 
   .kt-popover-title {
     margin-bottom: 0;
@@ -146,9 +147,15 @@ html {
 
     .vertical {
       width: 4px !important;
+      &:hover {
+        width: 10px !important;
+      }
 
       .slider {
         width: 4px !important;
+        &:hover {
+          width: 10px !important;
+        }
         left: unset !important;
         right: 0;
         border-radius: 4px !important;
@@ -157,10 +164,15 @@ html {
 
     .horizontal {
       height: 4px !important;
-
+      &:hover {
+        height: 10px !important;
+      }
       .slider {
         border-radius: 4px !important;
         height: 4px !important;
+        &:hover {
+          height: 10px !important;
+        }
       }
     }
   }
@@ -175,6 +187,9 @@ html {
 .xterm .xterm-viewport {
   &::-webkit-scrollbar {
     width: 4px;
+    &:hover {
+      width: 10px;
+    }
   }
 }
 
@@ -280,6 +295,9 @@ html {
 
       &::-webkit-scrollbar {
         width: 4px !important;
+        &:hover {
+          width: 10px;
+        }
       }
     }
   }
@@ -295,7 +313,7 @@ html {
 }
 
 /**
-* layout 面板 
+* layout 面板
 **/
 .design-slot_resize_horizontal {
   width: 2px;

package/src/browser/theme/default-theme.ts

@@ -784,6 +784,7 @@ export default {
     'quickInput.background': '#222830',
     'list.focusBackground': '#ffffff1f',
     'textLink.foreground': '#3c8dff',
+    'editorStickyScroll.background': '#151b21',
   },
   semanticHighlighting: true,
   semanticTokenColors: {

package/src/browser/theme/light-theme.ts

@@ -804,6 +804,7 @@ export default {
     'quickInput.background': '#fff',
     'list.focusBackground': '#151b5814',
     'textLink.foreground': '#3c8dff',
+    'editorStickyScroll.background': '#fff',
   },
   semanticHighlighting: true,
   semanticTokenColors: {

package/src/common/constants.ts

@@ -0,0 +1,3 @@
+export const DESIGN_MENUBAR_CONTAINER_VIEW_ID = 'design_menubar';
+export const DESIGN_MENU_BAR_RIGHT = 'design_menu_bar_right';
+export const DESIGN_MENU_BAR_LEFT = 'design_menu_bar_left';

package/src/common/index.ts

@@ -0,0 +1 @@
+export * from './constants';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './common';

package/lib/browser/override/override.module.less

@@ -1,135 +0,0 @@
-.design-editor_tab_block_container {
-  display: flex;
-  align-items: center;
-  height: 36px;
-  border-radius: 12px 12px 0 0;
-  padding: 0 8px;
-  margin-right: 0 !important;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 12px;
-    display: inline-block;
-    width: 1px;
-    height: 12px;
-    background-color: var(--editorGroup-border);
-  }
-
-  > div:first-child {
-    margin-right: 4px !important;
-    flex-shrink: 0;
-    flex-grow: 0;
-
-    &::before {
-      font-size: 14px;
-      background-size: 14px;
-      background-position: 2px;
-      filter: grayscale(1);
-      color: var(--design-icon-foreground);
-    }
-  }
-
-  &.active {
-    background-color: var(--tab-activeBackground);
-    color: var(--tab-activeForeground);
-
-    &::before {
-      content: none;
-    }
-
-    div:first-child {
-      &::before {
-        filter: grayscale(0);
-      }
-    }
-  }
-}
-
-.menuAction__sub_menu_action_container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  user-select: none;
-  padding-left: 12px;
-  padding-right: 12px;
-  min-width: 150px;
-
-  .icon {
-    filter: grayscale(1);
-
-    span {
-      margin-right: 8px;
-    }
-  }
-
-  .extraDesc,
-  .shortcut {
-    justify-content: right;
-    text-align: center;
-    color: var(--kt-menu-descriptionForeground);
-    font-size: 12px;
-  }
-
-  .icon,
-  .submenuIcon {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    :global(.kt-icon) {
-      color: var(--design-text-foreground);
-    }
-  }
-
-  .label {
-    flex: 1;
-    padding-right: 16px;
-  }
-
-  &.disabled {
-    .shortcut {
-      color: var(--kt-menu-disableForeground);
-    }
-  }
-
-  &:not(.disabled):hover {
-    .shortcut {
-      color: var(--menu-selectionForeground);
-    }
-  }
-
-  &:focus {
-    .shortcut {
-      color: var(--menu-selectionForeground);
-    }
-  }
-
-  .label {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    // stop Flexbox removing trailing whitespace
-    // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
-    white-space: pre-wrap;
-  }
-
-  .submenuIcon {
-    span {
-      font-size: 16px;
-    }
-  }
-}
-
-:global(.design-light) {
-  .editor_tab_block_container {
-    > div:first-child {
-      &::before {
-        filter: grayscale(0);
-      }
-    }
-  }
-}

package/src/browser/override/override.module.less

@@ -1,135 +0,0 @@
-.design-editor_tab_block_container {
-  display: flex;
-  align-items: center;
-  height: 36px;
-  border-radius: 12px 12px 0 0;
-  padding: 0 8px;
-  margin-right: 0 !important;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 12px;
-    display: inline-block;
-    width: 1px;
-    height: 12px;
-    background-color: var(--editorGroup-border);
-  }
-
-  > div:first-child {
-    margin-right: 4px !important;
-    flex-shrink: 0;
-    flex-grow: 0;
-
-    &::before {
-      font-size: 14px;
-      background-size: 14px;
-      background-position: 2px;
-      filter: grayscale(1);
-      color: var(--design-icon-foreground);
-    }
-  }
-
-  &.active {
-    background-color: var(--tab-activeBackground);
-    color: var(--tab-activeForeground);
-
-    &::before {
-      content: none;
-    }
-
-    div:first-child {
-      &::before {
-        filter: grayscale(0);
-      }
-    }
-  }
-}
-
-.menuAction__sub_menu_action_container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  user-select: none;
-  padding-left: 12px;
-  padding-right: 12px;
-  min-width: 150px;
-
-  .icon {
-    filter: grayscale(1);
-
-    span {
-      margin-right: 8px;
-    }
-  }
-
-  .extraDesc,
-  .shortcut {
-    justify-content: right;
-    text-align: center;
-    color: var(--kt-menu-descriptionForeground);
-    font-size: 12px;
-  }
-
-  .icon,
-  .submenuIcon {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    :global(.kt-icon) {
-      color: var(--design-text-foreground);
-    }
-  }
-
-  .label {
-    flex: 1;
-    padding-right: 16px;
-  }
-
-  &.disabled {
-    .shortcut {
-      color: var(--kt-menu-disableForeground);
-    }
-  }
-
-  &:not(.disabled):hover {
-    .shortcut {
-      color: var(--menu-selectionForeground);
-    }
-  }
-
-  &:focus {
-    .shortcut {
-      color: var(--menu-selectionForeground);
-    }
-  }
-
-  .label {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    // stop Flexbox removing trailing whitespace
-    // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
-    white-space: pre-wrap;
-  }
-
-  .submenuIcon {
-    span {
-      font-size: 16px;
-    }
-  }
-}
-
-:global(.design-light) {
-  .editor_tab_block_container {
-    > div:first-child {
-      &::before {
-        filter: grayscale(0);
-      }
-    }
-  }
-}