Minor changes to the top bar styles (#7802)

My first attempts to work with the `gui2` codebase. When looking at the IDE, I noticed that the top bar seems slightly off. I checked and confirmed that the sizes (heights) of some elements were not matching Figma. Also, I tried using the `M PLUS 1` font, and it has a _completely_ different baseline than our previous one, effectively shifting all text down. I think we need to start using it as soon as possible, or else we will fix CSS rules everywhere. I understand that the way I added the font is not the correct one, but I guess we can live with that until we properly include the files to the package. Please forgive me, gods of Vue.js, @Frizi and @somebody1234, for this murder. Before: <img width="405" alt="Screenshot 2023-09-13 at 12 19 18 AM" src="https://github.com/enso-org/enso/assets/6566674/8ca81db8-1719-4761-97a1-741c2f76b45d"> After: <img width="480" alt="Screenshot 2023-09-19 at 8 01 18 PM" src="https://github.com/enso-org/enso/assets/6566674/eb9783d3-0a34-4f1e-8afd-2f06a1b6db4f"> Dropdown animation: https://github.com/enso-org/enso/assets/6566674/bab6baa9-23e3-4c2d-8494-1d464ba6902b
enso-org · Sep 26, 2023 · fbfaeb5 · fbfaeb5
1 parent f8c4f9e
commit fbfaeb5
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 37 deletions.
diff --git a/app/gui2/src/assets/base.css b/app/gui2/src/assets/base.css
@@ -1,3 +1,6 @@
+/* M PLUS 1 font import. */
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@500;600&display=swap');
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;
@@ -62,7 +65,6 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: normal;
 }
 
 body {
@@ -73,22 +75,10 @@ body {
   transition:
     color 0.5s,
     background-color 0.5s;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+  font-family: 'M PLUS 1', sans-serif;
   font-size: 11.5px;
   font-weight: 500;
-  line-height: 174.5%;
+  line-height: 20px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/app/gui2/src/assets/main.css b/app/gui2/src/assets/main.css
@@ -8,6 +8,6 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  font-weight: normal;
+  font-weight: 500;
   cursor: default;
 }
diff --git a/app/gui2/src/components/ExecutionModeSelector.vue b/app/gui2/src/components/ExecutionModeSelector.vue
@@ -43,25 +43,28 @@ useDocumentEvent('click', onDocumentClick)
         "
       />
     </div>
-    <div v-if="isDropdownOpen" class="execution-mode-dropdown">
-      <template v-for="otherMode in modes" :key="otherMode">
-        <span
-          v-if="modelValue !== otherMode"
-          class="button"
-          @click="emit('update:modelValue', otherMode)"
-          v-text="otherMode"
-        ></span>
-      </template>
-    </div>
+    <Transition name="dropdown">
+      <div v-if="isDropdownOpen" class="execution-mode-dropdown">
+        <template v-for="otherMode in modes" :key="otherMode">
+          <span
+            v-if="modelValue !== otherMode"
+            class="button"
+            @click="emit('update:modelValue', otherMode)"
+            v-text="otherMode"
+          ></span>
+        </template>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
 span {
   display: inline-block;
-  height: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  height: 24px;
+  padding: 1px 0px;
+  vertical-align: middle;
+  overflow: clip;
 }
 
 .ExecutionModeSelector {
@@ -72,10 +75,12 @@ span {
 .execution-mode-button {
   display: flex;
   align-items: center;
+  height: 24px;
   border-radius: var(--radius-full);
   background: #64b526;
 
   > .execution-mode {
+    font-weight: 600;
     padding: 0 8px;
   }
 
@@ -93,6 +98,8 @@ span {
 }
 
 .execution-mode-dropdown {
+  display: flex;
+  flex-flow: column;
   position: absolute;
   background: #64b526;
   border-radius: 10px;
@@ -112,4 +119,27 @@ span {
     background: var(--color-dim);
   }
 }
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.1s;
+
+  > span {
+    transition: all 0.1s;
+  }
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  overflow: hidden;
+
+  > span {
+    padding-top: 0;
+    padding-bottom: 0;
+    max-height: 0;
+  }
+}
 </style>
diff --git a/app/gui2/src/components/GraphNode.vue b/app/gui2/src/components/GraphNode.vue
@@ -392,7 +392,7 @@ function updatePreprocessor(module: string, method: string, ...args: string[]) {
       @update:type="visualizationType = $event"
     />
     <div class="node" v-on="dragPointer.events" @click.stop="onExpressionClick">
-      <SvgIcon class="icon" name="number_input" @pointerdown="handleClick"></SvgIcon>
+      <SvgIcon class="icon grab-handle" name="number_input" @pointerdown="handleClick"></SvgIcon>
       <div
         ref="editableRootNode"
         class="editable"
@@ -458,7 +458,7 @@ function updatePreprocessor(module: string, method: string, ...args: string[]) {
   gap: 4px;
 }
 
-.icon {
+.grab-handle {
   color: white;
   cursor: grab;
   margin-right: 10px;

diff --git a/app/gui2/src/components/NavBreadcrumb.vue b/app/gui2/src/components/NavBreadcrumb.vue
@@ -10,9 +10,8 @@ const emit = defineEmits<{ click: [] }>()
 <style scoped>
 span {
   display: inline-block;
-  height: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  height: 24px;
+  padding: 1px 0px;
 }
 
 .NavBreadcrumb {

diff --git a/app/gui2/src/components/ProjectTitle.vue b/app/gui2/src/components/ProjectTitle.vue
@@ -32,9 +32,8 @@ const emit = defineEmits<{ execute: []; 'update:mode': [mode: string] }>()
 
   > .title {
     display: inline-block;
-    height: 20px;
-    padding-top: 1px;
-    padding-bottom: 1px;
+    height: 24px;
+    padding: 1px 0px;
   }
 }
 </style>