rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2991 from westlywright/style.fixes 

General Style Fixes
This commit is contained in:
Westly Wright 2019-05-14 09:42:38 -07:00 committed by GitHub
parent 69ad076e8c 4850c52a20
commit c5458609e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 138 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/page-header-project/component.js
View File

@ -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() {

4
app/styles/components/_identity-block.scss
View File

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

5
app/styles/layout/_medium.scss
View File

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

3
lib/alert/addon/components/cluster-alert-row/template.hbs
View File

@ -14,8 +14,9 @@
model=model.name
tooltipTemplate="tooltip-static"
aria-describedby="tooltip-base"
tooltipFor="tooltipLink"
placement="top"
tagName="div"
clip=true
}}
{{model.name}}
{{/tooltip-element}}

2
lib/alert/addon/components/project-alert-row/template.hbs
View File

@ -15,6 +15,8 @@
aria-describedby="tooltip-base"
tooltipFor="tooltipLink"
placement="top"
clip=true
inlineBlock=true
}}
{{model.name}}
{{/tooltip-element}}

1
lib/global-admin/addon/accounts/index/controller.js
View File

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

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

@ -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}}

1
lib/shared/addon/components/identity-block/component.js
View File

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

2
lib/shared/addon/components/identity-block/template.hbs
View File

@ -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}}

68
lib/shared/addon/mixins/tooltip.js
View File

@ -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) {
positionTooltip(tooltipNode, 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 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;
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;
leftEdge2CenterPoint = Math.max(0, leftEdge2CenterPoint) + pushFromLeft;
position.caret = centerOfDot - pushFromLeft - widthOfEvent / 2;
}
return left;
return leftEdge2CenterPoint;
}
position.width = nodeWidth;
position.width = tooltipNodeWidth;
return position;
},