Web IDE Visual Polish 26.01

app/assets/javascripts/ide/components/ide_project_branches_tree.vue

@@ -25,7 +25,7 @@ export default {
 <template>
   <div class="branch-container">
     <div class="branch-header">
-      <div class="branch-header-title">
+      <div class="branch-header-title str-truncated ref-name">
         <icon
           name="branch"
           :size="12"

app/assets/javascripts/ide/components/ide_status_bar.vue

@@ -30,7 +30,7 @@
 
 <template>
   <div class="ide-status-bar">
-    <div>
+    <div class="ref-name">
       <icon
         name="branch"
         :size="12"

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -147,7 +147,7 @@ you started editing. Would you like to create a new branch?`)"
       >
         <div class="multi-file-commit-fieldset">
           <textarea
-            class="form-control multi-file-commit-message"
+            class="form-control multi-file-commit-message ref-name"
             name="commit-message"
             v-model="commitMessage"
             placeholder="Commit message"

app/assets/javascripts/ide/components/repo_file.vue

@@ -56,6 +56,8 @@
             return 'file-open file-active';
           }
           return this.file.opened ? 'file-open' : '';
+        } else if (this.file.type === 'tree') {
+          return 'folder';
         }
         return '';
       },
@@ -95,7 +97,7 @@
       :colspan="submoduleColSpan"
     >
       <a
-        class="repo-file-name"
+        class="repo-file-name str-truncated"
       >
         <file-icon
           :file-name="file.name"

app/assets/javascripts/ide/lib/editor.js

@@ -5,6 +5,8 @@ import Disposable from './common/disposable';
 import ModelManager from './common/model_manager';
 import editorOptions from './editor_options';
 
+import gitlabTheme from './themes/gl_theme';
+
 export default class Editor {
   static create(monaco) {
     this.editorInstance = new Editor(monaco);
@@ -24,6 +26,8 @@ export default class Editor {
       this.decorationsController = new DecorationsController(this),
     );
 
+    this.setupMonacoTheme();
+
     this.debouncedUpdate = _.debounce(() => {
       this.updateDimensions();
     }, 200);
@@ -71,6 +75,12 @@ export default class Editor {
     if (this.dirtyDiffController) this.dirtyDiffController.reDecorate(model);
   }
 
+  setupMonacoTheme() {
+    this.monaco.editor.defineTheme(gitlabTheme.themeName, gitlabTheme.monacoTheme);
+
+    this.monaco.editor.setTheme('gitlab');
+  }
+
   clearEditor() {
     if (this.instance) {
       this.instance.setModel(null);

app/assets/javascripts/ide/lib/themes/gl_theme.js

+export default {
+  themeName: 'gitlab',
+  monacoTheme: {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editorLineNumber.foreground': '#CCCCCC',
+    },
+  },
+};

app/assets/javascripts/vue_shared/components/file_icon.vue

@@ -62,8 +62,7 @@
         return `${gon.sprite_file_icons}#${iconName}`;
       },
       folderIconName() {
-        // We don't have a open folder icon yet
-        return this.opened ? 'folder' : 'folder';
+        return this.opened ? 'folder-open' : 'folder';
       },
       iconSizeClass() {
         return this.size ? `s${this.size}` : '';

app/assets/stylesheets/pages/repo.scss

@@ -72,6 +72,13 @@
         display: none;
       }
     }
+
+    &.folder {
+      svg {
+        fill: $gl-text-color-secondary;
+      }
+    }
+
   }
 
   a {
@@ -522,36 +529,42 @@ table.table tr td.multi-file-table-name {
   }
 }
 
-.ide.nav-only {
-  .flash-container {
-    margin-top: $header-height;
-    margin-bottom: 0;
-  }
-
-  .alert-wrapper .flash-container .flash-alert:last-child,
-  .alert-wrapper .flash-container .flash-notice:last-child {
-    margin-bottom: 0;
-  }
+.ide {
+  overflow: hidden;
 
-  .content {
-    margin-top: $header-height;
-  }
+  .nav-only {
+    .flash-container {
+      margin-top: $header-height;
+      margin-bottom: 0;
+    }
 
-  .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-    max-height: calc(100vh - #{$header-height + $context-header-height});
-  }
+    .alert-wrapper .flash-container .flash-alert:last-child,
+    .alert-wrapper .flash-container .flash-notice:last-child {
+      margin-bottom: 0;
+    }
 
-  &.flash-shown {
     .content {
-      margin-top: 0;
+      margin-top: $header-height;
     }
 
-    .ide-view {
-      height: calc(100vh - #{$header-height + $flash-height});
+    .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
+      max-height: calc(100vh - #{$header-height + $context-header-height});
+      min-height: calc(100vh - #{$header-height + $context-header-height});
     }
 
-    .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-      max-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
+    &.flash-shown {
+      .content {
+        margin-top: 0;
+      }
+
+      .ide-view {
+        height: calc(100vh - #{$header-height + $flash-height});
+      }
+
+      .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
+        max-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
+        min-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
+      }
     }
   }
 }
@@ -571,6 +584,7 @@ table.table tr td.multi-file-table-name {
 
   .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
     max-height: calc(100vh - #{$header-height + $performance-bar-height + 60});
+    min-height: calc(100vh - #{$header-height + $performance-bar-height + 60});
   }
 
   &.flash-shown {
@@ -584,6 +598,7 @@ table.table tr td.multi-file-table-name {
 
     .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
       max-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
+      min-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
     }
   }
 }