UI Tweaks April 2018 (emberjs#780)

* Pill CSS cleanup Match BEM syntax in other parts of the app * Lighten grays on background and borders I chose grays that in the middle of the lighter UI in Firefox and the darker UI in Chrome * High resolution Fishy Tomster image * Mixin sidebar cleanup - More consistent BEM CSS syntax - Whitespace here and there - Text and icon alignment * New Navigation icons Thanks project Clarity: https://vmware.github.io/clarity These icons are consistent in weight and style * Button for clearing search inputs * Toolbar tweaks - Increase height - Consistent space around items - More clickable space around items - more visible selected item for toolbar radios * Search consistification - Common partial for search fields - Same property name for text * Bring in svg-jar add-on * Search-field component
cyril-sf · Mar 30, 2022 · 71439a5 · 71439a5
1 parent 1a38a05
commit 71439a5
Show file tree

Hide file tree

Showing 61 changed files with 728 additions and 426 deletions.
diff --git a/app/components/search-field.js b/app/components/search-field.js
@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+
+  actions: {
+    clear() {
+      this.set('value', '');
+    }
+  }
+});
diff --git a/app/controllers/container-type.js b/app/controllers/container-type.js
@@ -9,7 +9,7 @@ export default Controller.extend({
 
   sortProperties: ['name'],
 
-  searchVal: debounceComputed('search', 300),
+  searchValue: debounceComputed('search', 300),
 
   search: null,
 

diff --git a/app/controllers/deprecations.js b/app/controllers/deprecations.js
@@ -13,10 +13,12 @@ export default Controller.extend({
    */
   application: controller(),
   search: null,
-  searchVal: debounceComputed('search', 300),
+  searchValue: debounceComputed('search', 300),
+
   filtered: filter('model', function(item) {
     return searchMatch(get(item, 'message'), this.get('search'));
   }).property('model.@each.message', 'search'),
+
   actions: {
     openResource(item) {
       this.get('adapter').openResource(item.fullSource, item.line);

diff --git a/app/controllers/promise-tree.js b/app/controllers/promise-tree.js
@@ -70,15 +70,15 @@ export default Controller.extend({
   isPendingFilter: equal('filter', 'pending'),
   isFulfilledFilter: equal('filter', 'fulfilled'),
 
-  search: null,
+  searchValue: null,
   effectiveSearch: null,
 
-  searchChanged: observer('search', function() {
+  searchChanged: observer('searchValue', function() {
     debounce(this, this.notifyChange, 500);
   }),
 
   notifyChange() {
-    this.set('effectiveSearch', this.get('search'));
+    this.set('effectiveSearch', this.get('searchValue'));
     next(() => {
       this.notifyPropertyChange('model');
     });

diff --git a/app/controllers/records.js b/app/controllers/records.js
@@ -8,11 +8,11 @@ import { dasherize } from '@ember/string';
 export default Controller.extend({
   application: controller(),
 
-  queryParams: ['filterValue', 'search'],
+  queryParams: ['filterValue', 'searchValue'],
 
   columns: readOnly('modelType.columns'),
 
-  search: '',
+  searchValue: '',
 
   filters: computed(() => []),
 
@@ -21,7 +21,7 @@ export default Controller.extend({
   noFilterValue: none('filterValue'),
 
   modelChanged: observer('model', function() {
-    this.set('search', '');
+    this.set('searchValue', '');
   }),
 
   recordToString(record) {
@@ -72,8 +72,8 @@ export default Controller.extend({
     return { columns };
   }),
 
-  filtered: computed('search', 'model.@each.columnValues', 'model.@each.filterValues', 'filterValue', function() {
-    let search = this.get('search');
+  filtered: computed('searchValue', 'model.@each.columnValues', 'model.@each.filterValues', 'filterValue', function() {
+    let search = this.get('searchValue');
     let filter = this.get('filterValue');
     return this.get('model').filter(item => {
       // check filters

diff --git a/app/controllers/render-tree.js b/app/controllers/render-tree.js
@@ -68,7 +68,7 @@ export default Controller.extend({
 
   // bound to the input field, updates the `search` property
   // 300ms after changing
-  searchField: debounceComputed('search', 300),
+  searchValue: debounceComputed('search', 300),
 
   // model filtered based on this value
   search: '',

diff --git a/app/controllers/view-tree.js b/app/controllers/view-tree.js
@@ -17,11 +17,11 @@ export default Controller.extend({
   /**
    * Bound to the search field to filter the component list.
    *
-   * @property searchText
+   * @property searchValue
    * @type {String}
    * @default ''
    */
-  searchText: '',
+  searchValue: '',
 
   /**
    * The filtered view list.
@@ -30,8 +30,8 @@ export default Controller.extend({
    * @type {Array<Object>}
    */
   filteredList: filter('model', function(item) {
-    return searchMatch(get(item, 'value.name'), this.get('searchText'));
-  }).property('model.[]', 'searchText'),
+    return searchMatch(get(item, 'value.name'), this.get('searchValue'));
+  }).property('model.[]', 'searchValue'),
 
   optionsChanged: on('init', observer('options.components', function() {
     this.port.send('view:setOptions', { options: this.get('options') });

diff --git a/app/styles/drag_handle.scss b/app/styles/drag_handle.scss
@@ -25,7 +25,7 @@
   height: 100%;
   margin-left: 3px;
   width: 1px;
-  border-left: 1px solid #A3A3A3;
+  border-left: 1px solid #bcbcbc;
   pointer-events: none;
 }
 

diff --git a/app/styles/dropdown.scss b/app/styles/dropdown.scss
@@ -6,20 +6,22 @@
 .dropdown {
   position: relative;
   flex: auto;
+  height: 28px;
 }
 
 .dropdown__select {
-  -webkit-appearance: none;
   box-sizing: border-box;
   display: block;
   width: 100%;
-  height: 18px;
-  padding: 0 15px 0 5px;
-  font-size: 12px;
-  color: rgb(48, 48, 48);
-  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+  height: 100%;
+  margin: 0;
   border: 0;
+  padding: 0 16px 0 5px;
+  font-size: 12px;
+  color: rgb(70, 70, 70);
   background-color: transparent;
+  -moz-appearance: none;
+  -webkit-appearance: none;
 }
 
 .dropdown__select:focus {
@@ -28,13 +30,9 @@
 
 .dropdown__arrow {
   position: absolute;
-  right: 4px;
-  top: 7px;
-  background-image: url(images/arrow_down.svg);
-  background-size: 100%;
+  right: 5px;
+  top: 9px;
   opacity: 0.7;
-  width: 7px;
-  height: 7px;
-  display: inline-block;
+  width: 6px;
   pointer-events: none;
 }
diff --git a/app/styles/error_page.scss b/app/styles/error_page.scss
@@ -58,6 +58,7 @@
   width: 128px;
   height: 89px;
   background: url("images/fishy_tomster.png") left center no-repeat;
+  background-size: 128px 89px;
   position: absolute;
   right: 0px;
   bottom: 0px;

diff --git a/app/styles/external_link.scss b/app/styles/external_link.scss
@@ -9,7 +9,7 @@
     position: absolute;
     right: -12px;
     bottom: 10px;
-    background-image: url('images/external_link.svg');
+    background-image: url('svg/external_link.svg');
     background-size: 100%;
   }
 }

diff --git a/app/styles/mixin.scss b/app/styles/mixin.scss
@@ -6,69 +6,54 @@
  or a mixin the object extends
 */
 
+$mixin-left-padding: 22px;
+
 .mixin__name {
-  margin-top: -1px;
-  padding: 2px 2px 2px 5px;
-  border-top: 1px solid #bdbdbd;
-  border-bottom: 1px solid #bdbdbd;
-  background-color: #f0f0f0;
+  position: relative;
+  padding: 4px 2px 4px $mixin-left-padding;
+  border-bottom: 1px solid #cecece;
+  background-color: #f5f5f5;
   cursor: default;
   user-select: none;
+  color: #222;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .mixin__name:active {
-  background-color: #ccc;
-  border-top: 1px solid #b2b2b2;
-  border-bottom: 1px solid #b2b2b2;
+  background-color: #e7e7e7;
+}
+
+.mixin__name--no-props {
+  color: #777;
 }
 
   .mixin_props_no .mixin__name:before {
     opacity: 0;
   }
 
-  .mixin.ember-mixin .mixin__name {
-    color: #888;
-  }
-
 .mixin__name:before {
+  position: absolute;
+  top: 5px;
+  left: 7px;
   content: "\25B6";
   color: #737373;
-  margin-right: 4px;
-  position: relative;
-  top: -1px;
-  font-size: 75%;
+  margin-right: 5px;
+  font-size: 90%;
 }
 
-  .mixin_state_expanded .mixin__name {
-    border-bottom: 1px solid #bdbdbd;
-  }
-
   .mixin_state_expanded .mixin__name:before {
     content: "\25BC";
   }
 
-  .mixin.ember-mixin .mixin__name:before {
-    color: #aaa;
-  }
-
-.mixin__name_errors {
-  background-color: #fff;
-
-  &:active{
-    background-color: #fff;
-  }
-}
-
-
 .mixin__properties {
-  margin: 5px;
   list-style-type: none;
-  padding: 0;
+  border-bottom: 1px solid #cecece;
+  margin: 0;
+  padding: 3px 0 5px 0;
   font-size: 12px;
-  font-family: Menlo, Monaco, monospace;
+  font-family: 'SF Mono', Menlo, Monaco, monospace;
 }
 
 .mixin__property {
@@ -79,24 +64,52 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  min-height: 19px;
 }
 
+/* Errors */
+
 .mixin__error {
   margin-right: 3px;
   padding: 0px 20px;
   color: red;
 }
 
-.mixin__property button {
-  border: none;
-  background: none;
-  margin: 0;
-  padding: 0;
+.mixin__name--errors {
+  background-color: #fff;
+
+  &:active{
+    background-color: #fff;
+  }
 }
 
-.mixin__property button img, .mixin__property span.pad {
-  margin-right: 3px;
-  width: 20px;
+/* Buttons */
+
+.mixin__property {
+  button {
+    border: none;
+    background: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .pad { width: $mixin-left-padding; }
+  .mixin__calc-btn {
+    width: $mixin-left-padding;
+
+    img {
+      max-height: 16px;
+    }
+  }
+
+  .mixin__calc-btn--calculated {
+    opacity: 0.4;
+  }
+
+  .mixin__send-btn {
+    opacity: 0;
+    padding-right: 6px;
+  }
 }
 
 .mixin__property-overridden-by {
@@ -124,15 +137,6 @@
   outline: none;
 }
 
-.mixin__calc-btn_calculated {
-  opacity: 0.4;
-}
-
-.mixin__send-btn {
-  width: 20px;
-  opacity: 0;
-}
-
 
 .mixin__property-value-separator {
   margin-right: 5px;
@@ -173,7 +177,7 @@
 
 
 .mixin__property:not(.mixin__property_state_overridden):hover {
-  background-color: #ffe;
+  background-color: #f3f3f3;
 }
 
 
@@ -186,9 +190,10 @@
 }
 
 .mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
-    opacity: 1;
-}
+  opacity: 1;
 
-.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn:active {
-  opacity: 0.5;
+  &:active {
+    opacity: 0.5;
+  }
 }
+