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

Replace action-menu style, much tweaks, very css

This commit is contained in:
Vincent Fiduccia 2015-11-08 02:49:36 -07:00
parent 881bb897fa
commit 51b703ae3c
38 changed files with 307 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/applications-tab/catalog/template.hbs
View File

@ -27,7 +27,7 @@
{{#each arrangedContent as |catalogItem|}} {{#each arrangedContent as |catalogItem|}}
<div class="container-catalog text-center"> <div class="container-catalog text-center">
<h5>{{catalogItem.name}}</h5> <h5>{{catalogItem.name}}</h5>
<img src={{catalogItem.iconLink}} alt={{catalogItem.name}} class="center-block r-mt20" style="height:75px;"> <img src="{{catalogItem.iconLink}}" alt="{{catalogItem.name}}" class="center-block r-mt20" style="height:75px;">
<div class="r-mt10 description">{{catalogItem.description}}</div> <div class="r-mt10 description">{{catalogItem.description}}</div>
{{#link-to "applications-tab.catalog.launch" catalogItem.path class="btn btn-sm btn-primary"}}View Details{{/link-to}} {{#link-to "applications-tab.catalog.launch" catalogItem.path class="btn btn-sm btn-primary"}}View Details{{/link-to}}
</div> </div>

2
app/components/account-row/template.hbs
View File

@ -30,5 +30,5 @@
</td> </td>
{{/if}} {{/if}}
<td class="actions"> <td class="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

33
app/components/action-menu/component.js
View File

@ -1,21 +1,38 @@
import Ember from 'ember'; import Ember from 'ember';
export default Ember.Component.extend({ export default Ember.Component.extend({
model: null,
size: 'xs',
showPrimary: true,
resourceActions: Ember.inject.service('resource-actions'), resourceActions: Ember.inject.service('resource-actions'),
model: null, tagName: 'div',
classNames: ['btn-group','resource-actions','action-menu'],
classNames: ['resource-actions'], didInsertElement() {
this.$().tooltip({
selector: '*[tooltip]',
animation: false,
container: 'body',
title: function() {
return $(this).attr('tooltip');
}
});
},
click(event) { click(e) {
event.preventDefault(); if ( Ember.$(e.target).closest('.resource-actions').length )
event.stopPropagation(); {
this.get('resourceActions').show(this.get('model'), event.target, this.$()); e.preventDefault();
e.stopPropagation();
this.get('resourceActions').show(this.get('model'), e.target, this.$());
}
}, },
actions: { actions: {
clicked: function(actionName) { sendAction: function(action) {
this.get('model').send(actionName); this.get('model').send(action);
} }
}, },
}); });

8
app/components/action-menu/template.hbs
View File

@ -1 +1,7 @@
<button type="button" class="btn-circle-menu"></button> {{#if showPrimary}}
{{#each model.primaryActions as |act|}}
<button type="button" class="btn btn-default btn-{{size}}" tooltip="{{act.label}}"><i class="icon icon-fw {{act.icon}}" {{action 'sendAction' act.action}}></i></button>
{{/each}}
{{/if}}
<button type="button" class="btn btn-default btn-{{size}} more-actions"><i class="icon icon-fw icon-chevron-down"></i></button>

2
app/components/apikey-row/template.hbs
View File

@ -16,5 +16,5 @@
<div class="text-muted">{{date-calendar model.created}}</div> <div class="text-muted">{{date-calendar model.created}}</div>
</td> </td>
<td class="actions"> <td class="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

2
app/components/certificate-row/template.hbs
View File

@ -22,5 +22,5 @@
</span> </span>
</td> </td>
<td class="actions"> <td class="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

2
app/components/container-row/template.hbs
View File

@ -30,5 +30,5 @@
</td> </td>
{{/if}} {{/if}}
<td class="actions"> <td class="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

2
app/components/container-subpod/template.hbs
View File

@ -1,4 +1,4 @@
{{action-menu model=model}} {{action-menu model=model showPrimary=false}}
{{#if groupHasChildren}} {{#if groupHasChildren}}
<div class="subpod-children clearfix"> <div class="subpod-children clearfix">

8
app/components/host-pod/template.hbs
View File

@ -1,7 +1,5 @@
<div class="pod-header"> <div class="pod-header">
<div class="resource-actions"> <div class="resource-actions">{{partial "fast-action-menu"}}</div>
<button type="button" class="btn-circle-menu"></button>
</div>
<div class="pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div> <div class="pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div>
<div class="pod-icon"><i class="icon icon-lg {{model.stateIcon}} {{model.stateColor}}"></i></div> <div class="pod-icon"><i class="icon icon-lg {{model.stateIcon}} {{model.stateColor}}"></i></div>
@ -50,10 +48,10 @@
</div> </div>
<div class="pod-info-line"> <div class="pod-info-line">
{{#if model.cpuBlurb}} {{#if model.cpuBlurb}}
<div class="pod-info-item"><i class="icon icon-tachometer" style="position: relative; top: -1px;"></i> {{model.cpuBlurb}}</div> <div class="pod-info-item"><i class="icon icon-cpu" style="position: relative; top: -1px;"></i> {{model.cpuBlurb}}</div>
{{/if}} {{/if}}
{{#if model.memoryBlurb}} {{#if model.memoryBlurb}}
<div class="pod-info-item"><i class="icon icon-microchip"></i> {{model.memoryBlurb}}</div> <div class="pod-info-item"><i class="icon icon-memory"></i> {{model.memoryBlurb}}</div>
{{/if}} {{/if}}
{{#if model.diskBlurb}} {{#if model.diskBlurb}}
<div class="pod-info-item"><i class="icon icon-hdd"></i> {{model.diskBlurb}}</div> <div class="pod-info-item"><i class="icon icon-hdd"></i> {{model.diskBlurb}}</div>

2
app/components/identity-avatar/component.js
View File

@ -3,7 +3,7 @@ import Ember from 'ember';
export default Ember.Component.extend({ export default Ember.Component.extend({
identity: null, identity: null,
link: true, link: true,
size: 36, size: 35,
classNames: ['gh-avatar'], classNames: ['gh-avatar'],
attributeBindings: ['aria-label:identity.name'], attributeBindings: ['aria-label:identity.name'],

2
app/components/identity-block/component.js
View File

@ -9,7 +9,7 @@ export default Ember.Component.extend({
avatar: true, avatar: true,
link: true, link: true,
size: 36, size: 35,
loading: false, loading: false,
didInitAttrs: function() { didInitAttrs: function() {

2
app/components/lb-addtl-info/template.hbs
View File

@ -4,7 +4,7 @@
<div class="state"> <div class="state">
<h3 class="{{service.stateColor}} text-capitalize">{{service.state}}</h3> <h3 class="{{service.stateColor}} text-capitalize">{{service.state}}</h3>
{{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}} {{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}}
{{svg-action-menu model=service size='xs'}} {{action-menu model=service size='xs'}}
</div> </div>
<div> <div>
<label class="text-muted text-bold text-uppercase r-mt15">DNS Name</label> <label class="text-muted text-bold text-uppercase r-mt15">DNS Name</label>

172
app/components/page-header/template.hbs
View File

@ -1,4 +1,4 @@
<div class="top-row"> <div class="top-row clearfix">
<div class="logo" {{action "showAbout"}} aria-label="About Rancher"></div> <div class="logo" {{action "showAbout"}} aria-label="About Rancher"></div>
<nav> <nav>
{{#if project}} {{#if project}}
@ -10,107 +10,103 @@
{{/if}} {{/if}}
</nav> </nav>
<div class="right"> <div class="dropdown user-btn">
<div class="dropdown"> <span class="user-toggle" id="user-dropdown" data-toggle="dropdown" aria-expanded="true" aria-label="User Menu: {{session.user}}">
<span class="user-toggle" id="user-dropdown" data-toggle="dropdown" aria-expanded="true" aria-label="User Menu: {{session.user}}"> {{#if accessEnabled}}
{{#if accessEnabled}} {{identity-avatar link=false identity=access.identity}}
{{identity-avatar link=false identity=access.identity}} <span class="caret user-dropdown-arrow"></span>
<span class="caret user-dropdown-arrow"></span> {{else}}
{{else}} <div class="gh-avatar">
<div class="gh-avatar"> <div class="gh-placeholder">
<div class="gh-placeholder"> <i class="icon icon-user"></i>
<i class="icon icon-user"></i>
</div>
</div> </div>
<span class="caret user-dropdown-arrow"></span> </div>
{{/if}} <span class="caret user-dropdown-arrow"></span>
</span> {{/if}}
<ul class="dropdown-menu dropdown-menu-right user-menu" role="menu" aria-labelledby="user-dropdown"> </span>
{{#if accessEnabled}} <ul class="dropdown-menu dropdown-menu-right user-menu" role="menu" aria-labelledby="user-dropdown">
<li role="presentation" class="user-auth"> {{#if accessEnabled}}
{{identity-block avatar=false identity=access.identity}} <li role="presentation" class="user-auth">
{{#link-to "logout" tabindex="-1" class="user-logout"}}<i class="icon icon-logout"></i><br/>Log Out{{/link-to}} {{identity-block avatar=false identity=access.identity}}
</li> {{#link-to "logout" tabindex="-1" class="user-logout"}}<i class="icon icon-logout"></i><br/>Log Out{{/link-to}}
{{/if}}
<li role="presentation" class="dropdown-header text-uppercase">
Your Account
</li> </li>
{{/if}}
<li role="presentation" class="dropdown-header text-uppercase">
Your Account
</li>
<li role="presentation">
{{#link-to "settings.projects" role="menuitem" tabindex="-1"}}Manage Environments{{/link-to}}
</li>
{{#if isLocalAuth}}
<li role="presentation"> <li role="presentation">
{{#link-to "settings.projects" role="menuitem" tabindex="-1"}}Manage Environments{{/link-to}} <a {{action "changePassword"}} role="menuitem" tabindex="-1">Change Password</a>
</li> </li>
{{/if}}
{{#if isLocalAuth}} <li role="presentation" class="divider"></li>
<li role="presentation"> <li role="presentation" class="dropdown-header text-uppercase">
<a {{action "changePassword"}} role="menuitem" tabindex="-1">Change Password</a> This Environment
</li> </li>
{{/if}}
<li role="presentation" class="divider"></li> <li role="presentation">
<li role="presentation" class="dropdown-header text-uppercase"> {{#link-to "settings.apikeys" role="menuitem" tabindex="-1"}}API &amp; Keys{{/link-to}}
This Environment </li>
</li>
<li role="presentation"> <li role="presentation">
{{#link-to "settings.apikeys" role="menuitem" tabindex="-1"}}API &amp; Keys{{/link-to}} {{#link-to "settings.registries" role="menuitem" tabindex="-1"}}Registries{{/link-to}}
</li> </li>
</ul>
<li role="presentation">
{{#link-to "settings.registries" role="menuitem" tabindex="-1"}}Registries{{/link-to}}
</li>
</ul>
</div>
</div> </div>
<div class="right" style="padding-right: 0;"> {{#if project}}
{{#if project}} <div class="btn-group project-btn">
<div class="btn-group project-btn"> <button type="button" class="btn btn-link dropdown-toggle text-left clip" data-toggle="dropdown" aria-expanded="false">
<button type="button" class="btn btn-link dropdown-toggle text-left clip" data-toggle="dropdown" aria-expanded="false"> <i class="icon icon-fw {{project.icon}}"></i>&nbsp;{{project.displayName}}
<i class="icon icon-fw {{project.icon}}"></i>&nbsp;{{project.displayName}} <span class="caret"></span>
<span class="caret"></span> </button>
</button> <ul class="dropdown-menu dropdown-menu-right project-menu" role="menu">
<ul class="dropdown-menu dropdown-menu-right project-menu" role="menu"> {{#if projectChoices.length}}
{{#if projectChoices.length}} <li role="presentation" class="dropdown-header text-uppercase">
<li role="presentation" class="dropdown-header text-uppercase"> {{#if accessEnabled}}
{{#if accessEnabled}} Your Environments
Your Environments {{else}}
{{else}} All Environments
All Environments {{/if}}
{{/if}} </li>
</li> {{#each projectChoices as |p|}}
{{#each projectChoices as |p|}} <li class="{{if p.active 'disabled selected'}}">
<li class="{{if p.active 'disabled selected'}}"> <a {{action "switchProject" p.id}} class="clip">
<a {{action "switchProject" p.id}} class="clip"> <i class="icon {{p.icon}}"></i>
<i class="icon {{p.icon}}"></i>
&nbsp;
{{p.displayName}}
</a>
</li>
{{/each}}
{{/if}}
{{#if projectChoices.length}}
<li role="presentation" class="divider"></li>
{{/if}}
{{#if projectIsMissing}}
<li role="presentation" class="dropdown-header text-uppercase">Selected Environment:</li>
<li class="{{if project.active 'disabled selected'}}">
<a {{action "switchProject" project.id}} class="clip">
<i class="icon {{project.icon}}"></i>
&nbsp; &nbsp;
{{project.displayName}} {{p.displayName}}
</a> </a>
</li> </li>
<li role="presentation" class="divider"></li> {{/each}}
{{/if}} {{/if}}
<li>{{#link-to "settings.projects"}}Manage Environments{{/link-to}}</li> {{#if projectChoices.length}}
</ul> <li role="presentation" class="divider"></li>
</div> {{/if}}
{{/if}} {{#if projectIsMissing}}
</div> <li role="presentation" class="dropdown-header text-uppercase">Selected Environment:</li>
<li class="{{if project.active 'disabled selected'}}">
<a {{action "switchProject" project.id}} class="clip">
<i class="icon {{project.icon}}"></i>
&nbsp;
{{project.displayName}}
</a>
</li>
<li role="presentation" class="divider"></li>
{{/if}}
<li>{{#link-to "settings.projects"}}Manage Environments{{/link-to}}</li>
</ul>
</div>
{{/if}}
</div> </div>
<div class="bottom-row"> <div class="bottom-row clearfix">
<nav> <nav>
{{#if isInfrastructureTab}} {{#if isInfrastructureTab}}
{{#link-to "hosts"}}<i class="icon icon-host"></i>Hosts{{/link-to}} {{#link-to "hosts"}}<i class="icon icon-host"></i>Hosts{{/link-to}}
@ -121,7 +117,7 @@
{{#link-to "environments"}}<i class="icon icon-globe"></i> Stacks{{/link-to}} {{#link-to "environments"}}<i class="icon icon-globe"></i> Stacks{{/link-to}}
{{#link-to "applications-tab.catalog"}}<i class="icon icon-database"></i> Catalog{{/link-to}} {{#link-to "applications-tab.catalog"}}<i class="icon icon-database"></i> Catalog{{/link-to}}
<div class="btn-group pull-right"> <div class="compose-download">
<a class="dropdown-toggle hand" data-toggle="dropdown" aria-expanded="false"> <a class="dropdown-toggle hand" data-toggle="dropdown" aria-expanded="false">
<i class="icon icon-download"></i> Rancher Compose CLI <span class="caret"></span> <i class="icon icon-download"></i> Rancher Compose CLI <span class="caret"></span>
</a> </a>

2
app/components/project-row/template.hbs
View File

@ -13,5 +13,5 @@
{{#if model.isDefault}}<i class="icon icon-check"></i>{{else}}<span class="text-muted">&ndash;</span>{{/if}} {{#if model.isDefault}}<i class="icon icon-check"></i>{{else}}<span class="text-muted">&ndash;</span>{{/if}}
</td> </td>
<td class="actions"> <td class="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

2
app/components/registry-row/template.hbs
View File

@ -16,5 +16,5 @@
{{date-calendar model.created}} {{date-calendar model.created}}
</td> </td>
<td align="actions"> <td align="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

4
app/components/service-pod/template.hbs
View File

@ -1,7 +1,5 @@
<div class="pod-header"> <div class="pod-header">
<div class="resource-actions"> <div class="resource-actions">{{partial "fast-action-menu"}}</div>
<button type="button" class="btn-circle-menu"></button>
</div>
<div class="pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div> <div class="pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div>
<div class="pod-icon"><i class="{{model.stateIcon}} icon-lg {{iconColor}}"></i> {{iconLabel}}</div> <div class="pod-icon"><i class="{{model.stateIcon}} icon-lg {{iconColor}}"></i> {{iconLabel}}</div>

55
app/components/stack-section/template.hbs
View File

@ -1,21 +1,6 @@
<div class="clearfix"> <div class="clearfix">
<div class="stack-state {{model.stateBackground}}"><i class="{{model.stateIcon}}"></i></div> <div class="stack-state {{model.stateBackground}}"><i class="{{model.stateIcon}}"></i></div>
<div class="right left-divider stack-actions">
{{upgrade-btn environmentResource=model}}
{{action-menu model=model}}
</div>
<div class="right left-divider count">
<p class="count">{{instanceCount}}</p>
<label>Container{{unless (eq instanceCount 1) 's'}}</label>
</div>
<div class="right left-divider count">
<p>{{model.unremovedServices.length}}</p>
<label>Service{{unless (eq model.unremovedServices.length 1) 's'}}</label>
</div>
<div class="left collapser"> <div class="left collapser">
<a {{action "toggleCollapse"}} class="btn btn-link"><i class="icon {{if collapsed 'icon-plus' 'icon-minus'}}" alt="Toggle stack details" title=""></i></a> <a {{action "toggleCollapse"}} class="btn btn-link"><i class="icon {{if collapsed 'icon-plus' 'icon-minus'}}" alt="Toggle stack details" title=""></i></a>
</div> </div>
@ -25,17 +10,45 @@
<span class="divider clip">{{#link-to "environment" model.id}}{{model.name}}{{/link-to}}</span> <span class="divider clip">{{#link-to "environment" model.id}}{{model.name}}{{/link-to}}</span>
</h4> </h4>
</div> </div>
<div class="right right-divider stack-actions">
{{action-menu model=model}}
</div>
<div class="right right-divider count">
<p class="count">{{instanceCount}}</p>
<label>Container{{unless (eq instanceCount 1) 's'}}</label>
</div>
<div class="right right-divider count">
<p>{{model.unremovedServices.length}}</p>
<label>Service{{unless (eq model.unremovedServices.length 1) 's'}}</label>
</div>
<div class="right right-divider stack-template">
{{upgrade-btn environmentResource=model}}
</div>
<div class="right right-divider stack-template">
<div class="btn-group">
{{#link-to "service.new" (query-params environmentId=model.id) classNames="btn btn-default btn-sm"}}Add Service{{/link-to}}
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>{{#link-to "service.new-balancer" (query-params environmentId=model.id)}}Add Load Balancer{{/link-to}}</li>
<li>{{#link-to "service.new-alias" (query-params environmentId=model.id)}}Add Service Alias{{/link-to}}</li>
<li>{{#link-to "service.new-external" (query-params environmentId=model.id)}}Add External Service{{/link-to}}</li>
</ul>
</div>
</div>
</div> </div>
{{#liquid-if (not collapsed)}} {{#liquid-if (not collapsed)}}
<div class="r-pl10 r-pr10 r-pb10"> <div class="r-pl10 r-pr10 r-pb10">
<table class="grid fixed" style="margin-bottom: 0"> <table class="grid fixed" style="margin-bottom: 0">
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th width="230">&nbsp;</th>
<th width="50">&nbsp;</th>
</tr>
{{#each model.services as |service|}} {{#each model.services as |service|}}
<tr> <tr>
<td><i class="{{service.stateIcon}} {{service.stateColor}}"></i> {{#link-to "service" model.id service.id}}{{service.displayName}}{{/link-to}}</td> <td><i class="{{service.stateIcon}} {{service.stateColor}}"></i> {{#link-to "service" model.id service.id}}{{service.displayName}}{{/link-to}}</td>

25
app/components/svg-action-menu/component.js
View File

@ -1,25 +0,0 @@
import Ember from 'ember';
export default Ember.Component.extend({
resourceActions: Ember.inject.service('resource-actions'),
tagName: 'div',
classNames: [/*,'pull-right', */ 'btn-group','graph-actions'/*, 'btn-group-xs'*/],
model: null,
click(event) {
event.preventDefault();
event.stopPropagation();
if (Ember.$(event.target).is('#dropdown-toggler')) {
this.get('resourceActions').show(this.get('model'), event.target, this.$());
}
},
actions: {
sendAction: function(action) {
this.get('model').send(action);
}
},
});

7
app/components/svg-action-menu/template.hbs
View File

@ -1,7 +0,0 @@
{{~#if (eq model.state 'active')}}
<button type="button" class="btn btn-danger btn-{{size}}"><i class="icon icon-fw icon icon-pause" {{action 'sendAction' 'deactivate'}}></i></button>
{{~else}}
<button type="button" class="btn btn-success btn-{{size}}"><i class="icon icon-fw icon icon-play" {{action 'sendAction' 'activate'}}></i></button>
{{~/if}}
<button type="button" class="btn btn-default btn-{{size}} " id="dropdown-toggler"><span class="caret"></span></button>

5
app/components/svg-service-container/component.js
View File

@ -21,12 +21,13 @@ export default Ember.Component.extend({
click: function(e) { click: function(e) {
var target = e.target; var target = e.target;
if (!Ember.$(target).hasClass('icon-pause') && !Ember.$(target).hasClass('icon-play') && !Ember.$(target).hasClass('graph-actions')) { if ( Ember.$(target).closest('action-menu').length === 0 )
{
this.sendAction('action', this.get('node.service')); this.sendAction('action', this.get('node.service'));
} }
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}, },
transform: Ember.computed('node.{x,y}', function() { transform: Ember.computed('node.{x,y}', function() {

2
app/components/svg-service-container/template.hbs
View File

@ -15,7 +15,7 @@
<h5>{{node.service.name}}</h5> <h5>{{node.service.name}}</h5>
</div> </div>
<div class="row actions"> <div class="row actions">
{{svg-action-menu model=node.service size='xs'}} {{action-menu model=node.service size='xs'}}
</div> </div>
{{#if (not-eq node.service.displayType 'Service')}} {{#if (not-eq node.service.displayType 'Service')}}
<div class="container-badge"> <div class="container-badge">

2
app/components/volume-row/template.hbs
View File

@ -27,5 +27,5 @@
</td> </td>
<td class="actions"> <td class="actions">
<button type="button" class="btn-circle-menu"></button> {{partial "fast-action-menu"}}
</td> </td>

2
app/hosts/index/template.hbs
View File

@ -3,7 +3,7 @@
<span class="right-divider">Hosts</span> <span class="right-divider">Hosts</span>
<div class="btn-group right-divider" style="margin: 0 10px 0 -5px;"> <div class="btn-group right-divider" style="margin: 0 10px 0 -5px;">
{{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm btn-default"}}<i class="icon icon-ellipsis" data-placement="bottom" tooltip="Tiny Dots"></i>{{/link-to}} {{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm btn-default"}}<i class="icon icon-ellipsis" data-placement="bottom"></i>{{/link-to}}
{{#link-to "hosts" (query-params mode="list") classNames="btn btn-sm btn-default"}}<i class="icon icon-thumbnails" data-placement="bottom" tooltip="Containers"></i>{{/link-to}} {{#link-to "hosts" (query-params mode="list") classNames="btn btn-sm btn-default"}}<i class="icon icon-thumbnails" data-placement="bottom" tooltip="Containers"></i>{{/link-to}}
{{#link-to "hosts" (query-params mode="grouped") classNames="btn btn-sm btn-default"}}<i class="icon icon-layeredgroup" data-placement="bottom" tooltip="Grouped Stacks &amp; Sidekicks"></i>{{/link-to}} {{#link-to "hosts" (query-params mode="grouped") classNames="btn btn-sm btn-default"}}<i class="icon icon-layeredgroup" data-placement="bottom" tooltip="Grouped Stacks &amp; Sidekicks"></i>{{/link-to}}
</div> </div>

23
app/mixins/cattle-transitioning-resource.js
View File

@ -69,6 +69,29 @@ export default Ember.Mixin.create({
return []; return [];
}.property(), }.property(),
primaryActions: function() {
// The default implementation returns the first enabled item that has an icon
// and is before the first divider. If you want a different behavior or
// multiple primaryActions, you can override this in a specific model.
var all = this.get('availableActions');
var obj;
for ( var i = 0 ; i < all.get('length') ; i++ )
{
obj = all.objectAt(i);
if ( Ember.get(obj,'divider') )
{
// Nothing was found, stop at the first divider;
return [];
}
else if ( Ember.get(obj,'enabled') && Ember.get(obj,'icon') && Ember.get(obj,'action') !== 'promptDelete')
{
return [obj];
}
}
return [];
}.property('availableActions.@each.enabled'),
actions: { actions: {
promptDelete: function() { promptDelete: function() {
this.get('application').set('confirmDeleteResources', [ this ] ); this.get('application').set('confirmDeleteResources', [ this ] );

2
app/mixins/faster-links-and-menus.js
View File

@ -8,7 +8,7 @@ export default Ember.Mixin.create({
resourceActions: Ember.inject.service('resource-actions'), resourceActions: Ember.inject.service('resource-actions'),
click(event) { click(event) {
if ( event.target.tagName === 'BUTTON' && $(event.target).hasClass('btn-circle-menu') ) // Only menu buttons if ( $(event.target).closest('BUTTON').hasClass('more-actions') ) // Only menu buttons
{ {
this.get('resourceActions').show(this.get('model'), event.target); this.get('resourceActions').show(this.get('model'), event.target);
} }

29
app/styles/bootstrap-tweak.scss vendored
View File

@ -1,16 +1,11 @@
$normal-weight: 400; $normal-weight: 400;
$bold-weight: 600; $bold-weight: 600;
* {
transition: ease all .25s;
box-sizing: border-box;
}
a { a {
color: $blue; color: $blue;
&:focus { &:focus {
outline: none; outline: none;
} }
} }
H1, H2, H3, H4, H5, H6 { H1, H2, H3, H4, H5, H6 {
@ -98,18 +93,15 @@ fieldset[disabled] .btn {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
.btn-group { .btn-default {
.btn-default { box-shadow: none;
background-color: $lightGrayTwo;
color: $midGray;
border: solid 1px $lightGray;
box-shadow: none;
&.active { &:hover {
background: white color: white;
}
} }
}
.btn-group {
&.clearable { &.clearable {
.icon { .icon {
position: absolute; position: absolute;
@ -219,6 +211,7 @@ fieldset[disabled] .btn {
.bg-default { background-color: $lightGrayTwo; color: $midGray; }
.bg-primary { background-color: $brand-primary; } .bg-primary { background-color: $brand-primary; }
.bg-success { background-color: $brand-success; } .bg-success { background-color: $brand-success; }
.bg-danger { background-color: $brand-danger; } .bg-danger { background-color: $brand-danger; }
@ -226,12 +219,14 @@ fieldset[disabled] .btn {
.bg-info { background-color: $brand-info; } .bg-info { background-color: $brand-info; }
.badge { .badge {
&.bg-default { background-color: $lightGrayTwo; color: $midGray; }
&.bg-primary { background-color: $brand-primary; } &.bg-primary { background-color: $brand-primary; }
&.bg-success { background-color: $brand-success; } &.bg-success { background-color: $brand-success; }
&.bg-danger { background-color: $brand-danger; } &.bg-danger { background-color: $brand-danger; }
&.bg-warning { background-color: $brand-warning; } &.bg-warning { background-color: $brand-warning; }
&.bg-info { background-color: $brand-info; } &.bg-info { background-color: $brand-info; }
&.badge-default { background-color: $lightGrayTwo; color: $midGray;}
&.badge-primary { background-color: $brand-primary; } &.badge-primary { background-color: $brand-primary; }
&.badge-success { background-color: $brand-success; } &.badge-success { background-color: $brand-success; }
&.badge-danger { background-color: $brand-danger; } &.badge-danger { background-color: $brand-danger; }
@ -239,12 +234,14 @@ fieldset[disabled] .btn {
&.badge-info { background-color: $brand-info; } &.badge-info { background-color: $brand-info; }
} }
.border-default { border-color: $lightGrayTwo; }
.border-primary { border-color: $brand-primary; } .border-primary { border-color: $brand-primary; }
.border-success { border-color: $brand-success; } .border-success { border-color: $brand-success; }
.border-danger { border-color: $brand-danger; } .border-danger { border-color: $brand-danger; }
.border-warning { border-color: $brand-warning; } .border-warning { border-color: $brand-warning; }
.border-info { border-color: $brand-info; } .border-info { border-color: $brand-info; }
.border-top-default { border-top-color: $lightGrayTwo !important; }
.border-top-primary { border-top-color: $brand-primary !important; } .border-top-primary { border-top-color: $brand-primary !important; }
.border-top-success { border-top-color: $brand-success !important; } .border-top-success { border-top-color: $brand-success !important; }
.border-top-danger { border-top-color: $brand-danger !important; } .border-top-danger { border-top-color: $brand-danger !important; }

37
app/styles/environment.scss
View File

@ -26,7 +26,7 @@ $stateBorder: 2px;
} }
.count { .count {
min-width: 120px; min-width: 99.5px;
text-align: center; text-align: center;
P { P {
@ -34,6 +34,8 @@ $stateBorder: 2px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
position: relative;
top: 5px;
} }
LABEL { LABEL {
@ -60,9 +62,10 @@ $stateBorder: 2px;
height: $stackHeight; height: $stackHeight;
} }
.left-divider { .right-divider {
padding-left: 10px; padding-right: 10px;
border-left: 2px dotted $lightGrayTwoDark; border-right: 1px dotted $lightGrayTwoDark;
} }
.collapser { .collapser {
@ -75,11 +78,21 @@ $stateBorder: 2px;
.stack-actions { .stack-actions {
line-height: $stackHeight; line-height: $stackHeight;
width: 69px;
text-align: right;
padding-right: 10px;
border-right: 0;
}
.stack-template {
line-height: $stackHeight;
min-width: 150px;
text-align: center;
} }
.resource-actions BUTTON, .resource-actions BUTTON,
.collapser { .collapser {
padding: 5px; padding: 3px 5px;
} }
.badge { .badge {
@ -95,11 +108,19 @@ $stateBorder: 2px;
border-bottom: 1px solid $lightGray; border-bottom: 1px solid $lightGray;
} }
TR:nth-child(odd) TD { TD:nth-child(3) {
background-color: $lightGrayTwo; width: 230px;
} }
TR:nth-child(even) TD { TD:nth-child(4) {
width: 80px;
}
//TR:nth-child(odd) TD {
// background-color: $lightGrayTwo;
//}
TR:nth-child(odd) TD {
background-color: #fff; background-color: #fff;
} }

7
app/styles/github-avatar.scss
View File

@ -38,14 +38,13 @@
} }
.gh-avatar { .gh-avatar {
width: 37px; width: 39px;
height: 37px; height: 39px;
border: 3px solid $lightGray; border: 2px solid $lightGray;
border-radius: 50%; border-radius: 50%;
background-color: $black; background-color: $black;
display: inline-block; display: inline-block;
box-sizing: border-box;
IMG { IMG {
border-radius: 50%; border-radius: 50%;

85
app/styles/header.scss
View File

@ -1,17 +1,16 @@
/********** /**********
* Header (top bar) * Header (top bar)
**********/ **********/
$topHeight: ($header-height * 0.45);
$bottomHeight: ($header-height * 0.55);
HEADER { HEADER {
position: relative; position: relative;
z-index: 5; z-index: 5;
height: $header-height;
background-color: $black;
NAV { NAV {
&>A, &>.btn-group>A { &>A {
float: left; display: inline-block;
height: ($header-height * .45);
line-height: ($header-height * .45);
padding: 0 20px; padding: 0 20px;
vertical-align: top; vertical-align: top;
font-weight: normal; font-weight: normal;
@ -30,10 +29,18 @@ HEADER {
} }
.top-row { .top-row {
height: ($header-height * .45); background-color: $black;
min-height: $topHeight;
NAV { NAV {
float: left;
font-size: 14px; font-size: 14px;
&>A {
height: $topHeight;
line-height: $topHeight;
}
&>A { &>A {
&:hover { &:hover {
background: $blackDark; background: $blackDark;
@ -48,7 +55,7 @@ HEADER {
.logo { .logo {
cursor: pointer; cursor: pointer;
float: left; float: left;
height: ($header-height * .45); height: $topHeight;
width: 68px; width: 68px;
background-image: url('images/logos/main.svg'); background-image: url('images/logos/main.svg');
background-color: $blackDark; background-color: $blackDark;
@ -56,13 +63,22 @@ HEADER {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.user-btn {
float: right;
vertical-align: top;
padding: 3px 15px;
}
.project-btn { .project-btn {
float: right;
margin-right: 10px; margin-right: 10px;
border-radius: 3px; border-radius: 3px;
max-width: 200px; max-width: 200px;
.dropdown-toggle { .dropdown-toggle {
height: 50px; height: $topHeight;
line-height: $topHeight;
padding: 0; padding: 0;
margin-right: 10px; margin-right: 10px;
max-width: 100%; max-width: 100%;
@ -90,17 +106,10 @@ HEADER {
} }
.user-menu { .user-menu {
margin-top: -13px;
z-index: 1000; /* These have to be > 990 for bootstrap on touch devices */ z-index: 1000; /* These have to be > 990 for bootstrap on touch devices */
padding-top: 0; padding-top: 0;
width: 250px; width: 250px;
border-radius: 2px; border-radius: 2px;
li {
a{
padding: 15px;
}
}
} }
.user-dropdown-arrow { .user-dropdown-arrow {
@ -166,16 +175,18 @@ HEADER {
} }
.bottom-row { .bottom-row {
height: ($header-height * .55); min-height: $bottomHeight;
background-color: white; background-color: white;
border-bottom: solid 2px $lightGrayTwo; border-bottom: solid 2px $lightGrayTwo;
NAV { NAV {
font-size: 14px; font-size: 14px;
margin-left: 68px; margin-left: 68px;
overflow: hidden;
clear: both;
height: 100%;
&>A { &>A {
height: $bottomHeight;
line-height: $bottomHeight;
padding-top: 12px;
color: $midGrayDark; color: $midGrayDark;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
@ -184,18 +195,40 @@ HEADER {
} }
&.active { &.active {
color: $primary; color: $primary;
background-color: rgba($lightTeal, 0.1);
} }
&>* {
I {
display: block; display: block;
} }
} }
.compose-download {
display: inline-block;
float: right;
margin-right: 20px;
height: $bottomHeight;
line-height: $bottomHeight;
color: $midGrayDark;
A {
color: $midGrayDark;
&:hover {
color: $blueTwo
}
&.active {
color: $primary;
}
}
}
} }
} }
H3 { H3 {
margin: 0; margin: 0;
line-height: ($header-height * .55); line-height: $bottomHeight;
color: #fff; color: #fff;
padding-left: 20px; padding-left: 20px;
white-space: nowrap; white-space: nowrap;
@ -211,13 +244,5 @@ HEADER {
color: $header-link-text; color: $header-link-text;
} }
} }
.right {
float: right;
height: ($header-height * .55);
line-height: ($header-height * .55);
vertical-align: top;
padding: 0 15px 0 15px;
}
} }

12
app/styles/layout.scss
View File

@ -483,16 +483,7 @@ $spacing-property-map: (
background-image: url('images/circle-x.svg'); background-image: url('images/circle-x.svg');
} }
.btn-circle-menu {
@extend .btn-circle;
background-image: url('images/circle-menu.svg');
}
ASIDE { ASIDE {
.btn-circle-menu {
background-image: url('images/circle-menu-white.svg');
}
.btn-circle-plus { .btn-circle-plus {
background-image: url('images/circle-plus-white.svg'); background-image: url('images/circle-plus-white.svg');
} }
@ -773,6 +764,9 @@ ASIDE {
&.active A:hover { &.active A:hover {
background-color: white; background-color: white;
color: $orange; color: $orange;
position: relative;
z-index: 1;
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.15);
} }
} }
} }

9
app/styles/resource-actions.scss
View File

@ -1,14 +1,5 @@
.resource-actions { .resource-actions {
display: inline-block; display: inline-block;
BUTTON {
color: #444;
padding: 0;
}
BUTTON:hover {
color: #1d6fa5;
}
} }
/* /*

2
app/styles/service-addtl-info.scss
View File

@ -109,7 +109,7 @@
font-size: 11px; font-size: 11px;
} }
} }
.graph-actions { .action-menu {
margin-right: 15px; margin-right: 15px;
} }
} }

1
app/templates/fast-action-menu.hbs Normal file
View File

@ -0,0 +1 @@
<button type="button" class="btn btn-default btn-xs more-actions"><i class="icon icon-chevron-down"></i></button>

2
app/templates/service-addtl-info.hbs
View File

@ -4,7 +4,7 @@
<div class="state"> <div class="state">
<h3 class="{{service.stateColor}} text-capitalize">{{service.state}}</h3> <h3 class="{{service.stateColor}} text-capitalize">{{service.state}}</h3>
{{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}} {{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}}
{{svg-action-menu model=service size='xs'}} {{action-menu model=service size='xs'}}
</div> </div>
<div> <div>
<label class="text-muted text-bold text-uppercase r-mt15">Image: </label> <label class="text-muted text-bold text-uppercase r-mt15">Image: </label>

13
public/assets/images/circle-menu-white.svg
View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M50,4.8c24.8,0,45.2,20.5,45.2,45.2S74.8,95.2,50,95.2S4.8,74.8,4.8,50S25.2,4.8,50,4.8 M50,0
C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0L50,0z"/>
</g>
<path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M27.1,40.5"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="50" x2="73.8" y2="50"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="35.7" x2="73.8" y2="35.7"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="64.3" x2="73.8" y2="64.3"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

13
public/assets/images/circle-menu.svg
View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#37B7E1" d="M50,4.8c24.8,0,45.2,20.5,45.2,45.2S74.8,95.2,50,95.2S4.8,74.8,4.8,50S25.2,4.8,50,4.8 M50,0
C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0L50,0z"/>
</g>
<path fill="none" stroke="#37B7E1" stroke-miterlimit="10" d="M27.1,40.5"/>
<line fill="none" stroke="#37B7E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="50" x2="73.8" y2="50"/>
<line fill="none" stroke="#37B7E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="35.7" x2="73.8" y2="35.7"/>
<line fill="none" stroke="#37B7E1" stroke-width="2" stroke-miterlimit="10" x1="26.2" y1="64.3" x2="73.8" y2="64.3"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

10
vendor/bootswatch-cosmo/_variables.scss vendored
View File

@ -17,8 +17,8 @@ $gray-lighter: #eff2f6; //lighten($gray-base, 90%); // #eee
$brand-primary: #0075a8; $brand-primary: #0075a8;
$brand-success: #2ecc71; $brand-success: #2ecc71;
$brand-info: #f9e79f; $brand-info: #f9e79f;
$brand-warning: #f15354; $brand-warning: #f3be90;
$brand-danger: #f3be90; $brand-danger: #f15354;
$primary: #0075a8; $primary: #0075a8;
$primaryDark: #00558b; $primaryDark: #00558b;
@ -207,9 +207,9 @@ $table-border-color: #f0f3f5;
$btn-font-weight: normal; $btn-font-weight: normal;
$btn-default-color: #fff; $btn-default-color: $midGray;
$btn-default-bg: $primary; $btn-default-bg: $lightGrayTwo;
// $btn-default-border: #e1e4e9; $btn-default-border: $lightGray;
$btn-primary-color: #fff; $btn-primary-color: #fff;
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;

2
vendor/icons vendored

@ -1 +1 @@
Subproject commit 864e685f9345d8543f12469faea475b8f05e8648 Subproject commit aface0a579380fe81e755e2d126f9bb28265703a