Merge pull request #2991 from westlywright/style.fixes

General Style Fixes

app/components/page-header-project/component.js

@@ -164,6 +164,7 @@ export default Component.extend(ThrottledResize, {
   byCluster: computed('scope.allClusters.@each.id', 'projectChoices.@each.clusterId', 'cluster.id', function() {
     const currentClusterId = get(this, 'cluster.id');
     const out              = [];
+    const navWidth = $('#application nav').width();
 
     get(this, 'scope.allClusters').forEach((cluster) => {
       getOrAddCluster(cluster);
@@ -171,7 +172,7 @@ export default Component.extend(ThrottledResize, {
 
     get(this, 'projectChoices').forEach((project) => {
       const cluster = get(project, 'cluster');
-      const width   = textWidth(get(project, 'displayName'), FONT);
+      const width   = getMaxWidth(textWidth(get(project, 'displayName'), FONT), navWidth);
 
       if ( !cluster ) {
         return;
@@ -192,12 +193,13 @@ export default Component.extend(ThrottledResize, {
     function getOrAddCluster(cluster) {
       const clusterId = get(cluster, 'id');
       let entry       = out.findBy('clusterId', clusterId);
+      let width       = getMaxWidth(textWidth(get(cluster, 'displayName'), FONT), navWidth);
 
       if ( !entry ) {
         entry = {
           clusterId,
           cluster,
-          width:        textWidth(get(cluster, 'displayName'), FONT),
+          width,
           projectWidth: 0,
           projects:     [],
           active:       clusterId === currentClusterId,
@@ -208,6 +210,10 @@ export default Component.extend(ThrottledResize, {
 
       return entry;
     }
+
+    function getMaxWidth(width, navWidth) {
+      return width >= (navWidth / 2) ? (navWidth / 2) : width;
+    }
   }),
 
   clustersWidth: computed('byCluster.@each.width', function() {

app/styles/components/_identity-block.scss

@@ -1,8 +1,12 @@
 .identity-block {
-  width: 30vw;
+
+  &.block-wide {
+    width: 30vw;
+  }
+
   .gh-block-name > div {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
-}
+}

app/styles/layout/_medium.scss

@@ -256,8 +256,13 @@
 
 
   /*NAV LIST ITEMS*/
+  .nav-main {
+    .nav-item {
+      border-top: 1px solid rgba(255,255,255,.15);
+    }
+  }
+
   .nav-item {
-    border-top: 1px solid rgba(255,255,255,.15);
 
     &:nth-child(2) {
       text-indent: 25px;

lib/alert/addon/components/cluster-alert-row/template.hbs

@@ -10,12 +10,13 @@
   </td>
   <td data-title="{{dt.name}}" class="clip">
     {{#tooltip-element
-        type="tooltip-basic"
-        model=model.name
-        tooltipTemplate="tooltip-static"
-        aria-describedby="tooltip-base"
-        tooltipFor="tooltipLink"
-        placement="top"
+       type="tooltip-basic"
+       model=model.name
+       tooltipTemplate="tooltip-static"
+       aria-describedby="tooltip-base"
+       placement="top"
+       tagName="div"
+       clip=true
     }}
       {{model.name}}
     {{/tooltip-element}}
@@ -24,19 +25,19 @@
     <div> {{model.displayTargetType}} </div>
     {{#if (eq model.targetType "nodeSelector")}}
       {{#if (eq selectorList.length 1)}}
-          <span
-            class="badge badge-xs bg-info"
-            style="color:#ecf0f1!important;border-radius:2px;"
-          >
-            {{get selectorList "firstObject"}}
-          </span>
+        <span
+          class="badge badge-xs bg-info"
+          style="color:#ecf0f1!important;border-radius:2px;"
+        >
+          {{get selectorList "firstObject"}}
+        </span>
       {{else if (gt selectorList.length 1)}}
         {{#tooltip-element
-            type="tooltip-basic"
-            model=selectorListTip
-            tooltipTemplate="tooltip-static"
-            aria-describedby="tooltip-base"
-            tooltipFor="tooltipLink"
+           type="tooltip-basic"
+           model=selectorListTip
+           tooltipTemplate="tooltip-static"
+           aria-describedby="tooltip-base"
+           tooltipFor="tooltipLink"
         }}
           <div class="text-link"> {{selectorList.length}} {{t "alertPage.items"}} </div>
         {{/tooltip-element}}
@@ -61,12 +62,12 @@
   <td data-title="{{dt.condition}}" class="clip">
     {{#if (eq model.targetType "metric")}}
       {{#tooltip-element
-          type="tooltip-basic"
-          model=model.metricRule.expression
-          tooltipTemplate="tooltip-static"
-          aria-describedby="tooltip-base"
-          tooltipFor="tooltipLink"
-          placement="top"
+         type="tooltip-basic"
+         model=model.metricRule.expression
+         tooltipTemplate="tooltip-static"
+         aria-describedby="tooltip-base"
+         tooltipFor="tooltipLink"
+         placement="top"
       }}
         {{model.displayCondition}}
       {{/tooltip-element}}
@@ -81,21 +82,21 @@
         <div class="clip">
           {{alertGroup.displayRecipient}}
         </div>
-        {{else if (gt alertGroup.recipients.length 1)}}
-          {{#tooltip-element
-               type="tooltip-basic"
-               model=recipientsTip
-               tooltipTemplate="tooltip-static"
-               aria-describedby="tooltip-base"
-               tooltipFor="tooltipLink"
-          }}
-              <div class="text-link">{{alertGroup.displayRecipient}}</div>
-          {{/tooltip-element}}
-        {{/if}}
-      {{else}}
-        {{t "alertPage.na"}}
+      {{else if (gt alertGroup.recipients.length 1)}}
+        {{#tooltip-element
+           type="tooltip-basic"
+           model=recipientsTip
+           tooltipTemplate="tooltip-static"
+           aria-describedby="tooltip-base"
+           tooltipFor="tooltipLink"
+        }}
+          <div class="text-link">{{alertGroup.displayRecipient}}</div>
+        {{/tooltip-element}}
       {{/if}}
-   </td>
+    {{else}}
+      {{t "alertPage.na"}}
+    {{/if}}
+  </td>
 
   <td data-title="{{t "generic.actions"}}" class="actions">
     {{action-menu model=model}}

lib/alert/addon/components/project-alert-row/template.hbs

@@ -9,12 +9,14 @@
   </td>
   <td data-title="{{dt.name}}" class="clip">
     {{#tooltip-element
-        type="tooltip-basic"
-        model=model.name
-        tooltipTemplate="tooltip-static"
-        aria-describedby="tooltip-base"
-        tooltipFor="tooltipLink"
-        placement="top"
+       type="tooltip-basic"
+       model=model.name
+       tooltipTemplate="tooltip-static"
+       aria-describedby="tooltip-base"
+       tooltipFor="tooltipLink"
+       placement="top"
+       clip=true
+       inlineBlock=true
     }}
       {{model.name}}
     {{/tooltip-element}}
@@ -23,19 +25,19 @@
     <div> {{model.displayTargetType}} </div>
     {{#if (eq model.targetType "workloadSelector")}}
       {{#if (eq selectorList.length 1)}}
-          <span
-            class="badge badge-xs bg-info"
-            style="color:#ecf0f1!important;border-radius:2px;"
-          >
-            {{get selectorList "firstObject"}}
-          </span>
+        <span
+          class="badge badge-xs bg-info"
+          style="color:#ecf0f1!important;border-radius:2px;"
+        >
+          {{get selectorList "firstObject"}}
+        </span>
       {{else if (gt selectorList.length 1)}}
         {{#tooltip-element
-            type="tooltip-basic"
-            model=selectorListTip
-            tooltipTemplate="tooltip-static"
-            aria-describedby="tooltip-base"
-            tooltipFor="tooltipLink"
+           type="tooltip-basic"
+           model=selectorListTip
+           tooltipTemplate="tooltip-static"
+           aria-describedby="tooltip-base"
+           tooltipFor="tooltipLink"
         }}
           <div class="text-link"> {{selectorList.length}} {{t "alertPage.items"}} </div>
         {{/tooltip-element}}
@@ -51,10 +53,10 @@
   <td data-title="{{dt.condition}}" class="clip">
     {{#if isRestartCondition}}
       {{#tooltip-element
-            type="tooltip-basic"
-            model=displayCondition
-            tooltipTemplate="tooltip-static"
-            aria-describedby="tooltip-base"
+         type="tooltip-basic"
+         model=displayCondition
+         tooltipTemplate="tooltip-static"
+         aria-describedby="tooltip-base"
       }}
         {{model.displayCondition}}
       {{/tooltip-element}}
@@ -73,21 +75,21 @@
         <div class="clip">
           {{alertGroup.displayRecipient}}
         </div>
-        {{else if (gt alertGroup.recipients.length 1)}}
-          {{#tooltip-element
-               type="tooltip-basic"
-               model=recipientsTip
-               tooltipTemplate="tooltip-static"
-               aria-describedby="tooltip-base"
-               tooltipFor="tooltipLink"
-          }}
-            <div class="text-link">{{alertGroup.displayRecipient}}</div>
+      {{else if (gt alertGroup.recipients.length 1)}}
+        {{#tooltip-element
+           type="tooltip-basic"
+           model=recipientsTip
+           tooltipTemplate="tooltip-static"
+           aria-describedby="tooltip-base"
+           tooltipFor="tooltipLink"
+        }}
+          <div class="text-link">{{alertGroup.displayRecipient}}</div>
         {{/tooltip-element}}
       {{/if}}
     {{else}}
       {{t "alertPage.na"}}
     {{/if}}
- </td>
+  </td>
 
   <td data-title="{{t "generic.actions"}}" class="actions">
     {{action-menu model=model}}

lib/global-admin/addon/accounts/index/controller.js

@@ -25,7 +25,6 @@ export default Controller.extend({
       translationKey: 'generic.name',
       name:           'name',
       sort:           ['name'],
-      width:          250,
     },
     {
       translationKey: 'generic.id',

lib/global-admin/addon/components/account-row/template.hbs

@@ -6,9 +6,12 @@
   {{badge-state model=model}}
 </td>
 
-<td data-title="{{dt.name}}">
+<td data-title="{{dt.name}}" class="pr-15">
   {{#if model.principalIds.firstObject}}
-    {{identity-block principalId=model.principalIds.firstObject}}
+    {{identity-block
+      principalId=model.principalIds.firstObject
+      wide=false
+    }}
   {{else if model.name}}
     {{model.name}}
   {{else}}

lib/shared/addon/components/identity-block/component.js

@@ -22,8 +22,9 @@ export default Component.extend({
 
   loading:            false,
   classNames:         ['gh-block'],
-  attributeBindings:  ['aria-label: principal.name'],
-  unknownUser:       false,
+  attributeBindings:  ['aria-label:principal.name'],
+  unknownUser:        false,
+  wide:               true,
 
 
   init() {

lib/shared/addon/components/identity-block/template.hbs

@@ -1,5 +1,5 @@
 {{yield}}
-<div class="identity-block">
+<div class="identity-block {{if wide "block-wide"}}">
   {{#if avatar}}
     <div class="gh-avatar">
       {{#if principal.avatarSrc}}

lib/shared/addon/mixins/tooltip.js

@@ -1,5 +1,5 @@
 import { scheduleOnce } from '@ember/runloop';
-import { observer } from '@ember/object';
+import { get, set, observer } from '@ember/object';
 import { on } from '@ember/object/evented';
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
@@ -14,14 +14,14 @@ export default Mixin.create(ThrottledResize, {
   tooltipService: service('tooltip'),
 
   didInsertElement() {
-    let $el    = $(this.get('element'));
+    let $el    = $(get(this, 'element'));
     let markup = `<div class ='tooltip-caret'></div>`;
 
     $(markup).appendTo($el);
   },
 
   mouseEnter() {
-    this.get('tooltipService').cancelTimer();
+    get(this, 'tooltipService').cancelTimer();
   },
   mouseLeave() {
     this.destroyTooltip();
@@ -29,26 +29,26 @@ export default Mixin.create(ThrottledResize, {
 
   routeObserver: on('init', observer('router.currentRouteName', function() {
     // On init
-    if (!this.get('currentRoute')) {
-      this.set('currentRoute', this.get('router.currentRouteName'));
+    if (!get(this, 'currentRoute')) {
+      set(this, 'currentRoute', get(this, 'router.currentRouteName'));
     }
 
     // if we change routes tear down the tooltip
-    if (this.get('currentRoute') !== this.get('router.currentRouteName')) {
+    if (get(this, 'currentRoute') !== get(this, 'router.currentRouteName')) {
       this.destroyTooltip();
     }
   })),
 
   tooltipConstructor: on('init', observer('tooltipService.tooltipOpts', function() {
     scheduleOnce('afterRender', this, function() {
-      if (this.get('tooltipService.tooltipOpts')) {
+      if (get(this, 'tooltipService.tooltipOpts')) {
         this.constructTooltip();
       }
     });
   })),
 
   constructTooltip() {
-    let tts           = this.get('tooltipService');
+    let tts           = get(this, 'tooltipService');
     let node          = $(this.element);
     let eventPosition = tts.get('tooltipOpts.eventPosition');
     let position      = this.positionTooltip(node, $().extend({}, eventPosition));
@@ -70,26 +70,26 @@ export default Mixin.create(ThrottledResize, {
   },
 
   destroyTooltip() {
-    this.get('tooltipService').startTimer();
+    get(this, 'tooltipService').startTimer();
   },
 
-  positionTooltip(node, position) {
-    let windowWidth        = window.innerWidth;
-    let eventNode          = this.get('tooltipService.tooltipOpts.originalNode');
-    let originalNodeWidth  = eventNode.outerWidth();
-    let originalNodeHeight = eventNode.outerHeight();
-    let nodeHeight         = node.outerHeight();
-    let nodeWidth          = node.outerWidth();
-    let overridePlacement  = this.get('tooltipService.tooltipOpts.placement');
-    let self               = this;
+  positionTooltip(tooltipNode, position) {
+    let windowWidth       = window.innerWidth;
+    let eventNode         = get(this, 'tooltipService.tooltipOpts.originalNode');
+    let eventNodeWidth    = eventNode.outerWidth();
+    let eventNodeHeight   = eventNode.outerHeight();
+    let tooltipNodeHeight = tooltipNode.outerHeight();
+    let tooltipNodeWidth  = tooltipNode.outerWidth();
+    let overridePlacement = get(this, 'tooltipService.tooltipOpts.placement');
+    let self              = this;
 
     if ( overridePlacement ) {
       position.placement = overridePlacement;
-    } else if (nodeWidth >= position.left) {
+    } else if (tooltipNodeWidth >= position.left) {
       position.placement = 'left';
-    } else if (nodeWidth >= (windowWidth - position.left)) {
+    } else if (tooltipNodeWidth >= (windowWidth - position.left)) {
       position.placement = 'right';
-    } else if (nodeHeight >= position.top) {
+    } else if (tooltipNodeHeight >= position.top) {
       position.placement = 'bottom';
     } else {
       position.placement = 'top';
@@ -97,38 +97,38 @@ export default Mixin.create(ThrottledResize, {
 
     switch ( position.placement ) {
     case 'left':
-      position.left      = horizontalViewport(position.left + originalNodeWidth + 7, position);
-      position.top       = position.top + (originalNodeHeight / 2) - (nodeHeight / 2);
+      position.left      = horizontalViewport(position.left + eventNodeWidth + 7, position);
+      position.top       = position.top + (eventNodeHeight / 2) - (tooltipNodeHeight / 2);
       break;
     case 'right':
-      position.left      = horizontalViewport(position.left - nodeWidth - 7, position);
-      position.top       = position.top + (originalNodeHeight / 2) - (nodeHeight / 2);
+      position.left      = horizontalViewport(position.left - tooltipNodeWidth - 7, position);
+      position.top       = position.top + (eventNodeHeight / 2) - (tooltipNodeHeight / 2);
       break;
     case 'bottom':
-      position.left      = horizontalViewport(position.left + (originalNodeWidth / 2) - (nodeWidth / 2), position);
-      position.top       = position.top +  originalNodeHeight + 7;
+      position.left      = horizontalViewport(position.left + (eventNodeWidth / 2) - (tooltipNodeWidth / 2), position);
+      position.top       = position.top +  eventNodeHeight + 7;
       break;
     default:
-      position.left      = horizontalViewport(position.left + (originalNodeWidth / 2) - (nodeWidth / 2), position);
-      position.top       = position.top -  (nodeHeight + 7);
+      position.left      = horizontalViewport(position.left + (eventNodeWidth / 2) - (tooltipNodeWidth / 2), position);
+      position.top       = position.top -  (tooltipNodeHeight + 7);
       break;
     }
 
 
-    function horizontalViewport(left, position) {
-      if (left < (nodeWidth / 2)) {
-        let centerOfDot  =  self.get('tooltipService.tooltipOpts.originalNode').offset().left + (originalNodeWidth / 2);
-        let widthOfEvent = originalNodeWidth;
-        let pushFromLeft = 10;
+    function horizontalViewport(leftEdge2CenterPoint, position) {
+      if (leftEdge2CenterPoint < (tooltipNodeWidth / 2)) {
+        let centerOfDot      = self.get('tooltipService.tooltipOpts.originalNode').offset().left + (eventNodeWidth / 2);
+        let widthOfEvent     = eventNodeWidth;
+        let pushFromLeft     = 10;
 
-        left             = pushFromLeft;
-        position.caret = centerOfDot - pushFromLeft - widthOfEvent / 2;
+        leftEdge2CenterPoint = Math.max(0, leftEdge2CenterPoint) + pushFromLeft;
+        position.caret       = centerOfDot - pushFromLeft - widthOfEvent / 2;
       }
 
-      return left;
+      return leftEdge2CenterPoint;
     }
 
-    position.width = nodeWidth;
+    position.width = tooltipNodeWidth;
 
     return position;
   },