- {{svg-action-menu model=node.service size='xs'}}
+ {{action-menu model=node.service size='xs'}}
{{#if (not-eq node.service.displayType 'Service')}}
diff --git a/app/components/volume-row/template.hbs b/app/components/volume-row/template.hbs
index 4249dd153..48d3aa6d6 100644
--- a/app/components/volume-row/template.hbs
+++ b/app/components/volume-row/template.hbs
@@ -27,5 +27,5 @@
-
+ {{partial "fast-action-menu"}}
|
diff --git a/app/hosts/index/template.hbs b/app/hosts/index/template.hbs
index eaacb6483..3c9c0aca1 100644
--- a/app/hosts/index/template.hbs
+++ b/app/hosts/index/template.hbs
@@ -3,7 +3,7 @@
Hosts
- {{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm btn-default"}}{{/link-to}}
+ {{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm btn-default"}}{{/link-to}}
{{#link-to "hosts" (query-params mode="list") classNames="btn btn-sm btn-default"}}{{/link-to}}
{{#link-to "hosts" (query-params mode="grouped") classNames="btn btn-sm btn-default"}}{{/link-to}}
diff --git a/app/mixins/cattle-transitioning-resource.js b/app/mixins/cattle-transitioning-resource.js
index 3b345029b..d3ee779d8 100644
--- a/app/mixins/cattle-transitioning-resource.js
+++ b/app/mixins/cattle-transitioning-resource.js
@@ -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 ] );
diff --git a/app/mixins/faster-links-and-menus.js b/app/mixins/faster-links-and-menus.js
index 1c5f7dc9b..958516e28 100644
--- a/app/mixins/faster-links-and-menus.js
+++ b/app/mixins/faster-links-and-menus.js
@@ -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);
}
diff --git a/app/styles/bootstrap-tweak.scss b/app/styles/bootstrap-tweak.scss
index 75ed97018..ddfeb3c79 100644
--- a/app/styles/bootstrap-tweak.scss
+++ b/app/styles/bootstrap-tweak.scss
@@ -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; }
diff --git a/app/styles/environment.scss b/app/styles/environment.scss
index 039002cda..6045f2cb1 100644
--- a/app/styles/environment.scss
+++ b/app/styles/environment.scss
@@ -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;
}
diff --git a/app/styles/github-avatar.scss b/app/styles/github-avatar.scss
index 6dd9fd9f6..c53ba60e9 100644
--- a/app/styles/github-avatar.scss
+++ b/app/styles/github-avatar.scss
@@ -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%;
diff --git a/app/styles/header.scss b/app/styles/header.scss
index f382955fb..c7073fd6e 100644
--- a/app/styles/header.scss
+++ b/app/styles/header.scss
@@ -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;
- }
}
diff --git a/app/styles/layout.scss b/app/styles/layout.scss
index 0bd322e36..481241326 100644
--- a/app/styles/layout.scss
+++ b/app/styles/layout.scss
@@ -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);
}
}
}
diff --git a/app/styles/resource-actions.scss b/app/styles/resource-actions.scss
index bf4f6ed30..9fffff45f 100644
--- a/app/styles/resource-actions.scss
+++ b/app/styles/resource-actions.scss
@@ -1,14 +1,5 @@
.resource-actions {
display: inline-block;
-
- BUTTON {
- color: #444;
- padding: 0;
- }
-
- BUTTON:hover {
- color: #1d6fa5;
- }
}
/*
diff --git a/app/styles/service-addtl-info.scss b/app/styles/service-addtl-info.scss
index 0fc6b019e..b37115498 100644
--- a/app/styles/service-addtl-info.scss
+++ b/app/styles/service-addtl-info.scss
@@ -109,7 +109,7 @@
font-size: 11px;
}
}
- .graph-actions {
+ .action-menu {
margin-right: 15px;
}
}
diff --git a/app/templates/fast-action-menu.hbs b/app/templates/fast-action-menu.hbs
new file mode 100644
index 000000000..eaf0dbef0
--- /dev/null
+++ b/app/templates/fast-action-menu.hbs
@@ -0,0 +1 @@
+
diff --git a/app/templates/service-addtl-info.hbs b/app/templates/service-addtl-info.hbs
index 9ad3d2ba4..252841967 100644
--- a/app/templates/service-addtl-info.hbs
+++ b/app/templates/service-addtl-info.hbs
@@ -4,7 +4,7 @@
{{service.state}}
{{#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'}}
diff --git a/public/assets/images/circle-menu-white.svg b/public/assets/images/circle-menu-white.svg
deleted file mode 100644
index c2ed3be31..000000000
--- a/public/assets/images/circle-menu-white.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
diff --git a/public/assets/images/circle-menu.svg b/public/assets/images/circle-menu.svg
deleted file mode 100644
index f8ca5c1f8..000000000
--- a/public/assets/images/circle-menu.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
diff --git a/vendor/bootswatch-cosmo/_variables.scss b/vendor/bootswatch-cosmo/_variables.scss
index 48b745189..6a6240d1c 100644
--- a/vendor/bootswatch-cosmo/_variables.scss
+++ b/vendor/bootswatch-cosmo/_variables.scss
@@ -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;
diff --git a/vendor/icons b/vendor/icons
index 864e685f9..aface0a57 160000
--- a/vendor/icons
+++ b/vendor/icons
@@ -1 +1 @@
-Subproject commit 864e685f9345d8543f12469faea475b8f05e8648
+Subproject commit aface0a579380fe81e755e2d126f9bb28265703a