UI Tweaks April 2018 #780

nummi · 2018-04-09T15:23:34Z

See corresponding Issue: #778

If reviewing I suggest looking at each commit individually.

Match BEM syntax in other parts of the app

I chose grays that in the middle of the lighter UI in Firefox and the darker UI in Chrome

- More consistent BEM CSS syntax - Whitespace here and there - Text and icon alignment

Thanks project Clarity: https://vmware.github.io/clarity These icons are consistent in weight and style

- Increase height - Consistent space around items - More clickable space around items - more visible selected item for toolbar radios

RobbieTheWagner

Thanks so much for this PR! The content looks great. I think my only requests are that we try to abstract some things out.

I think we can use a common clear action / maybe make a component for it, and use svg-jar for the svgs, and make them actual svg files. Please let me know your thoughts and thanks for all the hard work!

RobbieTheWagner · 2018-04-09T15:53:04Z

app/controllers/view-tree.js

@@ -38,6 +38,10 @@ export default Controller.extend({
  })),

  actions: {
+    clearSearchText() {


It seems like we have a lot of different actions for clearing search. Could we perhaps name them all the same and maybe even have a base controller that has some common stuff to extend from?

RobbieTheWagner · 2018-04-09T15:55:01Z

app/templates/components/clear-button.hbs

-    <circle cx="5.5" cy="5.5" r="5.5"></circle>
-    <path d="M1.98253524,1.98253524 L9,9" id="Line" stroke-linecap="square"></path>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13">


Would it perhaps be better to split this out into its own svg file, and then use it in the component? Perhaps with https://github.com/ivanvotti/ember-svg-jar?

RobbieTheWagner · 2018-04-09T15:55:20Z

app/templates/components/icon-input-clear.hbs

@@ -0,0 +1,3 @@
+<svg version="1.1" width="14" height="14" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:55:27Z

app/templates/components/iframe-picker.hbs

@@ -4,5 +4,7 @@
      <option value={{iframe.val}}>{{iframe.name}}</option>
    {{/each}}
  </select>
-  <div class="dropdown__arrow"></div>
+  <svg class="dropdown__arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.2 40.4">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:55:38Z

app/templates/components/object-inspector.hbs

-          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <polygon class="svg-fill" fill="#000000" transform="translate(4.500000, 4.500000) rotate(-90.000000) translate(-4.500000, -4.500000) " points="4.5 0 9 9 0 9 "></polygon>
-          </g>
+        <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:56:25Z

app/templates/nav.hbs

-        Data
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
-          <path d="M9.5,0.001C3.907,0.001,0,1.507,0,3.663v11.675C0,17.494,3.907,19,9.5,19c5.594,0,9.5-1.506,9.5-3.662V3.663 C19,1.507,15.094,0.001,9.5,0.001z M9.5,5.669c-4.768,0-7.81-1.318-7.81-2.007c0-0.689,3.042-2.008,7.81-2.008 c4.769,0,7.81,1.318,7.81,2.008C17.31,4.352,14.269,5.669,9.5,5.669z M17.31,15.338c0,0.689-3.041,2.007-7.81,2.007 c-4.768,0-7.81-1.317-7.81-2.007V5.852C3.39,6.77,6.282,7.324,9.5,7.324c3.217,0,6.108-0.554,7.81-1.472V15.338z"/>
+        <svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:56:32Z

app/templates/nav.hbs

-              c-0.552,0.01-1.015-0.45-1.013-1.008c0.001-0.552,0.449-1.004,1-1.007C10.829,13.531,11.281,13.983,11.285,14.534z"/>
-          </g>
-        </g>
+        <svg aria-hidden="true" version="1.1" width="20" height="20"  viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:56:37Z

app/templates/nav.hbs

-        <rect id="svg_3" height="6.815" width="3.33" fill="#454545" y="7.8805" x="7.737"/>
-        <circle id="svg_4" r="1.753" cy="5.3775" cx="9.451" fill="#454545"/>
-        <path id="svg_6" d="m9.5,19c-5.238,0 -9.5,-4.262 -9.5,-9.5c0,-5.238 4.262,-9.5 9.5,-9.5s9.5,4.262 9.5,9.5c0,5.238 -4.262,9.5 -9.5,9.5zm0,-17.434c-4.375,0 -7.933,3.559 -7.933,7.933c0,4.374 3.559,7.932 7.933,7.932c4.374,0 7.933,-3.559 7.933,-7.932c0,-4.374 -3.559,-7.933 -7.933,-7.933z" fill="#454545"/>
+      <svg aria-hidden="true" version="1.1" width="20" height="20"  viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:56:44Z

app/templates/nav.hbs

-        </g>
-      </g>
-      </svg>
+        <svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">


Same about svgs here

RobbieTheWagner · 2018-04-09T15:57:32Z

app/templates/deprecations-toolbar.hbs

  <div class="toolbar__search js-deprecations-search">
    {{input value=searchVal placeholder="Search"}}
+    {{#if searchVal}}
+      <button {{action "clearSearchVal"}} class="toolbar__icon-button toolbar__search-clear-button" title="clear">


It might also be good to put these common clear elements in some common template and use them, rather than repeating ourselves.

- Common partial for search fields - Same property name for text

nummi · 2018-04-09T20:15:07Z

@rwwagner90, change requests addressed. 👍

RobbieTheWagner

Thanks for making those changes! svg-jar stuff is awesome and the search stuff is closer, but left a comment on it. I think we can simplify it in a component.

RobbieTheWagner · 2018-04-09T20:35:10Z

app/controllers/container-type.js

@@ -18,6 +18,10 @@ export default Controller.extend({
  }).property('[email protected]', 'search'),

  actions: {
+    clearSearch() {
+      this.set('searchValue', '');


We're closer now, with these all having the same name, but it would be awesome to just move this stuff to a common component, instead of defining the same action a bunch of times. Could we pull this stuff into a common component, and use that component instead of partials? I believe partials are deprecated or at least recommended against.

RobbieTheWagner · 2018-04-09T20:35:58Z

app/templates/nav.hbs

-        <circle id="svg_4" r="1.753" cy="5.3775" cx="9.451" fill="#454545"/>
-        <path id="svg_6" d="m9.5,19c-5.238,0 -9.5,-4.262 -9.5,-9.5c0,-5.238 4.262,-9.5 9.5,-9.5s9.5,4.262 9.5,9.5c0,5.238 -4.262,9.5 -9.5,9.5zm0,-17.434c-4.375,0 -7.933,3.559 -7.933,7.933c0,4.374 3.559,7.932 7.933,7.932c4.374,0 7.933,-3.559 7.933,-7.932c0,-4.374 -3.559,-7.933 -7.933,-7.933z" fill="#454545"/>
-      </svg>
+        {{svg-jar "nav-info" width="20px" height="20px"}}


Love this svg-jar stuff! 🎉

nummi · 2018-04-10T02:31:44Z

@rwwagner90 search-field component created.

RobbieTheWagner · 2018-04-10T13:01:23Z

Thanks @nummi! This looks great!

service detection and cp code catching better service detection safer service detection cleanup template try catch for code getter to handle serialization issue 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 Merge branch 'master' into computed-dependent-keys code to string update from comments code cleanup style cleanup code cleanup hasDependent keys computed template code cleanup icon sizing update Merge pull request #2 from lifeart/pr/781 icon sizing update attempt to fix tests style updates

* 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

nummi added 7 commits April 5, 2018 22:48

Pill CSS cleanup

6e65dd5

Match BEM syntax in other parts of the app

Lighten grays on background and borders

f9cb5f5

I chose grays that in the middle of the lighter UI in Firefox and the darker UI in Chrome

High resolution Fishy Tomster image

58af4ad

Mixin sidebar cleanup

8d9ab32

- More consistent BEM CSS syntax - Whitespace here and there - Text and icon alignment

New Navigation icons

3ac7cdb

Thanks project Clarity: https://vmware.github.io/clarity These icons are consistent in weight and style

Button for clearing search inputs

8337bb2

Toolbar tweaks

c3c8d62

- Increase height - Consistent space around items - More clickable space around items - more visible selected item for toolbar radios

nummi mentioned this pull request Apr 9, 2018

UI Tweaks April 2018 #778

Closed

nummi changed the title ~~Ui Tweaks April 2018~~ UI Tweaks April 2018 Apr 9, 2018

RobbieTheWagner requested changes Apr 9, 2018

View reviewed changes

nummi added 2 commits April 9, 2018 12:24

Search consistification

37a97a7

- Common partial for search fields - Same property name for text

Bring in svg-jar add-on

88eb40c

RobbieTheWagner requested changes Apr 9, 2018

View reviewed changes

RobbieTheWagner added the enhancement label Apr 10, 2018

RobbieTheWagner approved these changes Apr 10, 2018

View reviewed changes

Search-field component

8924ada

RobbieTheWagner merged commit 317f4d1 into emberjs:master Apr 10, 2018

nummi mentioned this pull request Apr 12, 2018

search-field Component Bug Fix and Acceptance Tests #784

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Tweaks April 2018 #780

UI Tweaks April 2018 #780

nummi commented Apr 9, 2018

RobbieTheWagner left a comment

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

nummi commented Apr 9, 2018

RobbieTheWagner left a comment

RobbieTheWagner Apr 9, 2018

RobbieTheWagner Apr 9, 2018

nummi commented Apr 10, 2018 •

edited

Loading

RobbieTheWagner commented Apr 10, 2018

		@@ -0,0 +1,3 @@
		<svg version="1.1" width="14" height="14" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

UI Tweaks April 2018 #780

UI Tweaks April 2018 #780

Conversation

nummi commented Apr 9, 2018

RobbieTheWagner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nummi commented Apr 9, 2018

RobbieTheWagner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nummi commented Apr 10, 2018 • edited Loading

RobbieTheWagner commented Apr 10, 2018

nummi commented Apr 10, 2018 •

edited

Loading