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|}}
<div class="container-catalog text-center">
<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>
{{#link-to "applications-tab.catalog.launch" catalogItem.path class="btn btn-sm btn-primary"}}View Details{{/link-to}}
</div>

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

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

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

@ -1,21 +1,38 @@
import Ember from 'ember';
export default Ember.Component.extend({
model: null,
size: 'xs',
showPrimary: true,
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) {
event.preventDefault();
event.stopPropagation();
this.get('resourceActions').show(this.get('model'), event.target, this.$());
click(e) {
if ( Ember.$(e.target).closest('.resource-actions').length )
{
e.preventDefault();
e.stopPropagation();
this.get('resourceActions').show(this.get('model'), e.target, this.$());
}
},
actions: {
clicked: function(actionName) {
this.get('model').send(actionName);
sendAction: function(action) {
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>
</td>
<td class="actions">
<button type="button" class="btn-circle-menu"></button>
{{partial "fast-action-menu"}}
</td>

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

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

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

@ -30,5 +30,5 @@
</td>
{{/if}}
<td class="actions">
<button type="button" class="btn-circle-menu"></button>
{{partial "fast-action-menu"}}
</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}}
<div class="subpod-children clearfix">

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

@ -1,7 +1,5 @@
<div class="pod-header">
<div class="resource-actions">
<button type="button" class="btn-circle-menu"></button>
</div>
<div class="resource-actions">{{partial "fast-action-menu"}}</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>
@ -50,10 +48,10 @@
</div>
<div class="pod-info-line">
{{#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 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 model.diskBlurb}}
<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({
identity: null,
link: true,
size: 36,
size: 35,
classNames: ['gh-avatar'],
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,
link: true,
size: 36,
size: 35,
loading: false,
didInitAttrs: function() {

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

@ -4,7 +4,7 @@
<div class="state">
<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}}
{{svg-action-menu model=service size='xs'}}
{{action-menu model=service size='xs'}}
</div>
<div>
<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>
<nav>
{{#if project}}
@ -10,107 +10,103 @@
{{/if}}
</nav>
<div class="right">
<div class="dropdown">
<span class="user-toggle" id="user-dropdown" data-toggle="dropdown" aria-expanded="true" aria-label="User Menu: {{session.user}}">
{{#if accessEnabled}}
{{identity-avatar link=false identity=access.identity}}
<span class="caret user-dropdown-arrow"></span>
{{else}}
<div class="gh-avatar">
<div class="gh-placeholder">
<i class="icon icon-user"></i>
</div>
<div class="dropdown user-btn">
<span class="user-toggle" id="user-dropdown" data-toggle="dropdown" aria-expanded="true" aria-label="User Menu: {{session.user}}">
{{#if accessEnabled}}
{{identity-avatar link=false identity=access.identity}}
<span class="caret user-dropdown-arrow"></span>
{{else}}
<div class="gh-avatar">
<div class="gh-placeholder">
<i class="icon icon-user"></i>
</div>
<span class="caret user-dropdown-arrow"></span>
{{/if}}
</span>
<ul class="dropdown-menu dropdown-menu-right user-menu" role="menu" aria-labelledby="user-dropdown">
{{#if accessEnabled}}
<li role="presentation" class="user-auth">
{{identity-block avatar=false identity=access.identity}}
{{#link-to "logout" tabindex="-1" class="user-logout"}}<i class="icon icon-logout"></i><br/>Log Out{{/link-to}}
</li>
{{/if}}
<li role="presentation" class="dropdown-header text-uppercase">
Your Account
</div>
<span class="caret user-dropdown-arrow"></span>
{{/if}}
</span>
<ul class="dropdown-menu dropdown-menu-right user-menu" role="menu" aria-labelledby="user-dropdown">
{{#if accessEnabled}}
<li role="presentation" class="user-auth">
{{identity-block avatar=false identity=access.identity}}
{{#link-to "logout" tabindex="-1" class="user-logout"}}<i class="icon icon-logout"></i><br/>Log Out{{/link-to}}
</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">
{{#link-to "settings.projects" role="menuitem" tabindex="-1"}}Manage Environments{{/link-to}}
<a {{action "changePassword"}} role="menuitem" tabindex="-1">Change Password</a>
</li>
{{/if}}
{{#if isLocalAuth}}
<li role="presentation">
<a {{action "changePassword"}} role="menuitem" tabindex="-1">Change Password</a>
</li>
{{/if}}
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header text-uppercase">
This Environment
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header text-uppercase">
This Environment
</li>
<li role="presentation">
{{#link-to "settings.apikeys" role="menuitem" tabindex="-1"}}API &amp; Keys{{/link-to}}
</li>
<li role="presentation">
{{#link-to "settings.apikeys" role="menuitem" tabindex="-1"}}API &amp; Keys{{/link-to}}
</li>
<li role="presentation">
{{#link-to "settings.registries" role="menuitem" tabindex="-1"}}Registries{{/link-to}}
</li>
</ul>
</div>
<li role="presentation">
{{#link-to "settings.registries" role="menuitem" tabindex="-1"}}Registries{{/link-to}}
</li>
</ul>
</div>
<div class="right" style="padding-right: 0;">
{{#if project}}
<div class="btn-group project-btn">
<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}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right project-menu" role="menu">
{{#if projectChoices.length}}
<li role="presentation" class="dropdown-header text-uppercase">
{{#if accessEnabled}}
Your Environments
{{else}}
All Environments
{{/if}}
</li>
{{#each projectChoices as |p|}}
<li class="{{if p.active 'disabled selected'}}">
<a {{action "switchProject" p.id}} class="clip">
<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>
{{#if project}}
<div class="btn-group project-btn">
<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}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right project-menu" role="menu">
{{#if projectChoices.length}}
<li role="presentation" class="dropdown-header text-uppercase">
{{#if accessEnabled}}
Your Environments
{{else}}
All Environments
{{/if}}
</li>
{{#each projectChoices as |p|}}
<li class="{{if p.active 'disabled selected'}}">
<a {{action "switchProject" p.id}} class="clip">
<i class="icon {{p.icon}}"></i>
&nbsp;
{{project.displayName}}
{{p.displayName}}
</a>
</li>
<li role="presentation" class="divider"></li>
{{/if}}
<li>{{#link-to "settings.projects"}}Manage Environments{{/link-to}}</li>
</ul>
</div>
{{/if}}
</div>
{{/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;
{{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 class="bottom-row">
<div class="bottom-row clearfix">
<nav>
{{#if isInfrastructureTab}}
{{#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 "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">
<i class="icon icon-download"></i> Rancher Compose CLI <span class="caret"></span>
</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}}
</td>
<td class="actions">
<button type="button" class="btn-circle-menu"></button>
{{partial "fast-action-menu"}}
</td>

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

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

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

@ -1,7 +1,5 @@
<div class="pod-header">
<div class="resource-actions">
<button type="button" class="btn-circle-menu"></button>
</div>
<div class="resource-actions">{{partial "fast-action-menu"}}</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>

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

@ -1,21 +1,6 @@
<div class="clearfix">
<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">
<a {{action "toggleCollapse"}} class="btn btn-link"><i class="icon {{if collapsed 'icon-plus' 'icon-minus'}}" alt="Toggle stack details" title=""></i></a>
</div>
@ -25,17 +10,45 @@
<span class="divider clip">{{#link-to "environment" model.id}}{{model.name}}{{/link-to}}</span>
</h4>
</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>
{{#liquid-if (not collapsed)}}
<div class="r-pl10 r-pr10 r-pb10">
<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|}}
<tr>
<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) {
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'));
}
e.preventDefault();
e.stopPropagation();
},
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>
</div>
<div class="row actions">
{{svg-action-menu model=node.service size='xs'}}
{{action-menu model=node.service size='xs'}}
</div>
{{#if (not-eq node.service.displayType 'Service')}}
<div class="container-badge">

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

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

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

@ -3,7 +3,7 @@
<span class="right-divider">Hosts</span>
<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="grouped") classNames="btn btn-sm btn-default"}}<i class="icon icon-layeredgroup" data-placement="bottom" tooltip="Grouped Stacks &amp; Sidekicks"></i>{{/link-to}}
</div>

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

@ -69,6 +69,29 @@ export default Ember.Mixin.create({
return [];
}.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: {
promptDelete: function() {
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'),
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);
}

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

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

37
app/styles/environment.scss
View File

@ -26,7 +26,7 @@ $stateBorder: 2px;
}
.count {
min-width: 120px;
min-width: 99.5px;
text-align: center;
P {
@ -34,6 +34,8 @@ $stateBorder: 2px;
font-weight: bold;
text-align: center;
font-size: 14px;
position: relative;
top: 5px;
}
LABEL {
@ -60,9 +62,10 @@ $stateBorder: 2px;
height: $stackHeight;
}
.left-divider {
padding-left: 10px;
border-left: 2px dotted $lightGrayTwoDark;
.right-divider {
padding-right: 10px;
border-right: 1px dotted $lightGrayTwoDark;
}
.collapser {
@ -75,11 +78,21 @@ $stateBorder: 2px;
.stack-actions {
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,
.collapser {
padding: 5px;
padding: 3px 5px;
}
.badge {
@ -95,11 +108,19 @@ $stateBorder: 2px;
border-bottom: 1px solid $lightGray;
}
TR:nth-child(odd) TD {
background-color: $lightGrayTwo;
TD:nth-child(3) {
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;
}

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

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

85
app/styles/header.scss
View File

@ -1,17 +1,16 @@
/**********
* Header (top bar)
**********/
$topHeight: ($header-height * 0.45);
$bottomHeight: ($header-height * 0.55);
HEADER {
position: relative;
z-index: 5;
height: $header-height;
background-color: $black;
NAV {
&>A, &>.btn-group>A {
float: left;
height: ($header-height * .45);
line-height: ($header-height * .45);
&>A {
display: inline-block;
padding: 0 20px;
vertical-align: top;
font-weight: normal;
@ -30,10 +29,18 @@ HEADER {
}
.top-row {
height: ($header-height * .45);
background-color: $black;
min-height: $topHeight;
NAV {
float: left;
font-size: 14px;
&>A {
height: $topHeight;
line-height: $topHeight;
}
&>A {
&:hover {
background: $blackDark;
@ -48,7 +55,7 @@ HEADER {
.logo {
cursor: pointer;
float: left;
height: ($header-height * .45);
height: $topHeight;
width: 68px;
background-image: url('images/logos/main.svg');
background-color: $blackDark;
@ -56,13 +63,22 @@ HEADER {
background-repeat: no-repeat;
}
.user-btn {
float: right;
vertical-align: top;
padding: 3px 15px;
}
.project-btn {
float: right;
margin-right: 10px;
border-radius: 3px;
max-width: 200px;
.dropdown-toggle {
height: 50px;
height: $topHeight;
line-height: $topHeight;
padding: 0;
margin-right: 10px;
max-width: 100%;
@ -90,17 +106,10 @@ HEADER {
}
.user-menu {
margin-top: -13px;
z-index: 1000; /* These have to be > 990 for bootstrap on touch devices */
padding-top: 0;
width: 250px;
border-radius: 2px;
li {
a{
padding: 15px;
}
}
}
.user-dropdown-arrow {
@ -166,16 +175,18 @@ HEADER {
}
.bottom-row {
height: ($header-height * .55);
min-height: $bottomHeight;
background-color: white;
border-bottom: solid 2px $lightGrayTwo;
NAV {
font-size: 14px;
margin-left: 68px;
overflow: hidden;
clear: both;
height: 100%;
&>A {
height: $bottomHeight;
line-height: $bottomHeight;
padding-top: 12px;
color: $midGrayDark;
line-height: 25px;
text-align: center;
@ -184,18 +195,40 @@ HEADER {
}
&.active {
color: $primary;
background-color: rgba($lightTeal, 0.1);
}
&>* {
I {
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 {
margin: 0;
line-height: ($header-height * .55);
line-height: $bottomHeight;
color: #fff;
padding-left: 20px;
white-space: nowrap;
@ -211,13 +244,5 @@ HEADER {
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');
}
.btn-circle-menu {
@extend .btn-circle;
background-image: url('images/circle-menu.svg');
}
ASIDE {
.btn-circle-menu {
background-image: url('images/circle-menu-white.svg');
}
.btn-circle-plus {
background-image: url('images/circle-plus-white.svg');
}
@ -773,6 +764,9 @@ ASIDE {
&.active A:hover {
background-color: white;
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 {
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;
}
}
.graph-actions {
.action-menu {
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">
<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}}
{{svg-action-menu model=service size='xs'}}
{{action-menu model=service size='xs'}}
</div>
<div>
<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-success: #2ecc71;
$brand-info: #f9e79f;
$brand-warning: #f15354;
$brand-danger: #f3be90;
$brand-warning: #f3be90;
$brand-danger: #f15354;
$primary: #0075a8;
$primaryDark: #00558b;
@ -207,9 +207,9 @@ $table-border-color: #f0f3f5;
$btn-font-weight: normal;
$btn-default-color: #fff;
$btn-default-bg: $primary;
// $btn-default-border: #e1e4e9;
$btn-default-color: $midGray;
$btn-default-bg: $lightGrayTwo;
$btn-default-border: $lightGray;
$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;

2
vendor/icons vendored

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