You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2013/10/07 19:31:26 UTC
git commit: updated refs/heads/ui-restyle to 6e83063
Updated Branches:
refs/heads/ui-restyle f6fb769b6 -> 6e83063ef
Add action icons
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/6e83063e
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/6e83063e
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/6e83063e
Branch: refs/heads/ui-restyle
Commit: 6e83063ef58cc3a28dd81d01a4cc93f9e0363269
Parents: f6fb769
Author: Brian Federle <br...@citrix.com>
Authored: Mon Oct 7 10:31:08 2013 -0700
Committer: Brian Federle <br...@citrix.com>
Committed: Mon Oct 7 10:31:08 2013 -0700
----------------------------------------------------------------------
ui/stylesheets/_icons.scss | 478 +++++++++++++++++++++++++++++++++
ui/stylesheets/cloudstack.scss | 31 +++
ui/stylesheets/csui/_action.scss | 39 +++
ui/stylesheets/csui/_csui.scss | 3 +-
ui/stylesheets/csui/_details.scss | 21 --
5 files changed, 550 insertions(+), 22 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6e83063e/ui/stylesheets/_icons.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/_icons.scss b/ui/stylesheets/_icons.scss
new file mode 100644
index 0000000..0719662
--- /dev/null
+++ b/ui/stylesheets/_icons.scss
@@ -0,0 +1,478 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+.action.edit .icon {
+ background-position: 1px -1px;
+}
+
+.action.edit:hover .icon {
+ background-position: 1px -583px;
+}
+
+.start .icon {
+ background-position: -169px -1px;
+}
+
+.start:hover .icon {
+ background-position: -169px -583px;
+}
+
+.stop .icon,
+.removeVmwareDc .icon,
+.release .icon {
+ background-position: 0px -31px;
+}
+
+.stop:hover .icon,
+.removeVmwareDc:hover .icon,
+.release:hover .icon {
+ background-position: 0px -613px;
+}
+
+.restart .icon,
+.releaseDedicatedZone .icon {
+ background-position: 0px -63px;
+}
+
+.restart:hover .icon,
+.releaseDedicatedZone:hover .icon {
+ background-position: 0px -645px;
+}
+
+.destroy .icon,
+.remove .icon,
+.delete .icon,
+.decline .icon,
+.deleteacllist .icon {
+ background-position: 1px -92px;
+}
+
+.destroy:hover .icon,
+.remove:hover .icon,
+.delete:hover .icon,
+.deleteacllist:hover .icon {
+ background-position: 1px -674px;
+}
+
+.migrate .icon,
+.migrateToAnotherStorage .icon {
+ background-position: 0px -125px;
+}
+
+.migrate:hover .icon,
+.migrateToAnotherStorage:hover .icon {
+ background-position: 0px -707px;
+}
+
+.migrate .icon,
+.migrateVolume .icon {
+ background-position: 0px -125px;
+}
+
+.migrate:hover .icon,
+.migrateVolume:hover .icon {
+ background-position: 0px -707px;
+}
+
+.attach .icon,
+.attachISO .icon,
+.attachDisk .icon,
+.associateProfileToBlade .icon {
+ background-position: -104px -3px;
+}
+
+.attach:hover .icon,
+.attachISO:hover .icon,
+.attachDisk:hover .icon {
+ background-position: -104px -585px;
+}
+
+.detach .icon,
+.detachISO .icon,
+.detachDisk .icon,
+.disassociateProfileFromBlade .icon {
+ background-position: -101px -65px;
+}
+
+.detach:hover .icon,
+.detachISO:hover .icon,
+.detachDisk:hover .icon,
+.disassociateProfileFromBlade:hover .icon {
+ background-position: -101px -647px;
+}
+
+.resetPassword .icon,
+.changePassword .icon {
+ background-position: -68px -30px;
+}
+
+.resetPassword:hover .icon,
+.changePassword:hover .icon {
+ background-position: -68px -612px;
+}
+
+.changeService .icon {
+ background-position: -38px -33px;
+}
+
+.changeService:hover .icon {
+ background-position: -38px -615px;
+}
+
+.snapshot .icon,
+.takeSnapshot .icon {
+ background-position: -36px -91px;
+}
+
+.snapshot:hover .icon,
+.takeSnapshot:hover .icon {
+ background-position: -36px -673px;
+}
+
+.recurringSnapshot .icon {
+ background-position: -69px -95px;
+}
+
+.recurringSnapshot:hover .icon {
+ background-position: -69px -677px;
+}
+
+.downloadVolume .icon,
+.downloadTemplate .icon,
+.downloadISO .icon,
+.replaceacllist .icon,
+.replaceACL .icon {
+ background-position: -35px -125px;
+}
+
+.downloadVolume:hover .icon,
+.downloadTemplate:hover .icon,
+.downloadISO:hover .icon,
+.replaceacllist:hover .icon,
+.replaceACL:hover .icon {
+ background-position: -35px -707px;
+}
+
+.createVolume .icon {
+ background-position: -70px -124px;
+}
+
+.createVolume:hover .icon {
+ background-position: -70px -706px;
+}
+
+.enable .icon,
+.enableStaticNAT .icon {
+ background-position: -102px -92px;
+}
+
+.enable:hover .icon,
+.enableStaticNAT:hover .icon {
+ background-position: -102px -676px;
+}
+
+.disable .icon,
+.disableStaticNAT .icon {
+ background-position: -136px -93px;
+}
+
+.disable:hover .icon,
+.disableStaticNAT:hover .icon {
+ background-position: -136px -677px;
+}
+
+.add .icon,
+.addNew .icon,
+.assignVm .icon {
+ background-position: -37px -61px;
+}
+
+.add:hover .icon,
+.addNew:hover .icon,
+.assignVm:hover .icon {
+ background-position: -37px -643px;
+}
+
+.create .icon,
+.createTemplate .icon,
+.enableSwift .icon,
+.addVM .icon,
+.dedicateZone .icon,
+.dedicate .icon {
+ background-position: -69px -63px;
+}
+
+.create:hover .icon,
+.createTemplate:hover .icon,
+.enableSwift:hover .icon,
+.addVM:hover .icon,
+.dedicateZone:hover .icon {
+ background-position: -69px -645px;
+}
+
+.copyTemplate .icon,
+.copyISO .icon {
+ background-position: -138px -2px;
+}
+
+.copyTemplate:hover .icon,
+.copyISO:hover .icon {
+ background-position: -138px -584px;
+}
+
+.createVM .icon {
+ background-position: -137px -32px;
+}
+
+.createVM:hover .icon {
+ background-position: -137px -614px;
+}
+
+.enableMaintenanceMode .icon {
+ background-position: -138px -65px;
+}
+
+.enableMaintenanceMode:hover .icon {
+ background-position: -138px -647px;
+}
+
+.cancelMaintenanceMode .icon {
+ background-position: -138px -123px;
+}
+
+.cancelMaintenanceMode:hover .icon {
+ background-position: -138px -705px;
+}
+
+.lock .icon {
+ background-position: -104px -124px;
+}
+
+.lock:hover .icon {
+ background-position: -104px -706px;
+}
+
+.updateResourceLimits .icon {
+ background-position: -100px -32px;
+}
+
+.updateResourceLimits:hover .icon {
+ background-position: -100px -614px;
+}
+
+.addVlanRange .icon,
+.addVmwareDc .icon {
+ background-position: -37px -62px;
+}
+
+.addVlanRange:hover .icon,
+.addVmwareDc:hover .icon {
+ background-position: -37px -62px;
+}
+
+.removeVlanRange .icon {
+ background-position: 1px -92px;
+}
+
+.removeVlanRange:hover .icon {
+ background-position: 1px -92px;
+}
+
+.resize .icon,
+.updateResourceCount .icon {
+ background-position: -167px -66px;
+}
+
+.resize:hover .icon,
+.updateResourceCount:hover .icon {
+ background-position: -167px -648px;
+}
+
+.generateKeys .icon,
+.networkACL .icon {
+ background-position: -167px -95px;
+}
+
+.generateKeys:hover .icon,
+.networkACL:hover .icon {
+ background-position: -167px -677px;
+}
+
+.restoreVM .icon,
+.restore .icon {
+ background-position: -168px -31px;
+}
+
+.reset .icon {
+ background-position: -168px -31px;
+}
+
+.scaleUp .icon {
+ background-position: -167px -66px;
+}
+
+.restoreVM:hover .icon,
+.restore:hover .icon {
+ background-position: -168px -613px;
+}
+
+.reset:hover .icon {
+ background-position: -168px -613px;
+}
+
+.enableVPN .icon {
+ background-position: -198px -3px;
+}
+
+.enableVPN:hover .icon {
+ background-position: -197px -586px;
+}
+
+.disableVPN .icon {
+ background-position: -198px -32px;
+}
+
+.disableVPN:hover .icon {
+ background-position: -197px -615px;
+}
+
+.addIpRange .icon {
+ background-position: -197px -65px;
+}
+
+.addIpRange:hover .icon {
+ background-position: -197px -647px;
+}
+
+.forceReconnect .icon {
+ background-position: -196px -95px;
+}
+
+.forceReconnect:hover .icon {
+ background-position: -196px -677px;
+}
+
+.manage .icon {
+ background-position: -165px -122px;
+}
+
+.manage:hover .icon {
+ background-position: -165px -704px;
+}
+
+.unmanage .icon {
+ background-position: -196px -122px;
+}
+
+.unmanage:hover .icon {
+ background-position: -196px -704px;
+}
+
+.viewConsole .icon {
+ background-position: -231px -2px;
+}
+
+.viewConsole:hover .icon {
+ background-position: -229px -586px;
+}
+
+.moveTop .icon {
+ background-position: -24px -161px;
+}
+
+.moveTop:hover .icon {
+ background-position: -24px -734px;
+}
+
+.moveBottom .icon {
+ background-position: -98px -161px;
+}
+
+.moveBottom:hover .icon {
+ background-position: -98px -734px;
+}
+
+.moveUp .icon {
+ background-position: -2px -161px;
+}
+
+.moveUp:hover .icon {
+ background-position: -2px -734px;
+}
+
+.moveDown .icon {
+ background-position: -55px -161px;
+}
+
+.moveDown:hover .icon {
+ background-position: -55px -734px;
+}
+
+.moveDrag .icon {
+ cursor: move;
+ /*+border-radius:10px;*/
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -khtml-border-radius: 10px;
+ border-radius: 10px;
+ border-radius: 10px 10px 10px 10px;
+ background-position: -74px -162px;
+}
+
+.moveDrag:hover .icon {
+ background-color: #FFFFFF;
+ cursor: move !important;
+}
+
+.uploadVolume .icon {
+ background-position: -232px -34px;
+}
+
+.uploadVolume:hover .icon {
+ background-position: -230px -615px;
+}
+
+.editTags .icon {
+ background-position: -228px -65px;
+}
+
+.editTags:hover .icon {
+ background-position: -228px -646px;
+}
+
+.changeAffinity .icon {
+ background-position: -264px -2px;
+}
+
+.changeAffinity:hover .icon {
+ background-position: -263px -583px;
+}
+
+.releaseFromAccount .icon {
+ background-position: -230px -123px;
+}
+
+.releaseFromAccount:hover .icon {
+ background-position: -229px -704px;
+}
+
+.addAccount .icon {
+ background-position: -231px -96px;
+}
+
+.addAccount:hover .icon {
+ background-position: -230px -677px;
+}
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6e83063e/ui/stylesheets/cloudstack.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss
index ea9f131..8efe3ff 100644
--- a/ui/stylesheets/cloudstack.scss
+++ b/ui/stylesheets/cloudstack.scss
@@ -16,6 +16,7 @@
// under the License.
@import "csui/csui";
@import "browser";
+@import "icons";
html body > .login {
@include csui-login;
@@ -246,6 +247,27 @@ body {
.ui-tabs-hide {
display: none;
}
+
+ &:not(.detail-actions) {
+ table {
+ width: 100%;
+
+ tr {
+ &:nth-child(even) {
+ background: lighten(#ccc, 12%);
+ }
+ }
+
+ th, td {
+ padding: 10px;
+ }
+ }
+ }
+
+ .detail-actions {
+ background: white;
+ border-radius: 6px;
+ }
}
// Panel toolbars
@@ -256,3 +278,12 @@ body {
display: none;
}
}
+
+// Action buttons
+.action {
+ @include csui-action-button;
+
+ .icon {
+ background-image: url(../images/sprites.png);
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6e83063e/ui/stylesheets/csui/_action.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_action.scss b/ui/stylesheets/csui/_action.scss
new file mode 100644
index 0000000..810123a
--- /dev/null
+++ b/ui/stylesheets/csui/_action.scss
@@ -0,0 +1,39 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+@mixin csui-action-button {
+ width: 25px;
+ height: 25px;
+ float: left;
+ margin: 4px;
+ cursor: pointer;
+
+ a {
+ text-decoration: none;
+ }
+
+ .icon {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ &.text {
+ @include csui-button;
+
+ float: right;
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6e83063e/ui/stylesheets/csui/_csui.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_csui.scss b/ui/stylesheets/csui/_csui.scss
index 508d938..0f49053 100644
--- a/ui/stylesheets/csui/_csui.scss
+++ b/ui/stylesheets/csui/_csui.scss
@@ -58,4 +58,5 @@ html, body {
@import "list";
@import "details";
@import "toolbar";
-@import "breadcrumbs";
\ No newline at end of file
+@import "breadcrumbs";
+@import "action";
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/6e83063e/ui/stylesheets/csui/_details.scss
----------------------------------------------------------------------
diff --git a/ui/stylesheets/csui/_details.scss b/ui/stylesheets/csui/_details.scss
index 3cbe3cf..b0ee36c 100644
--- a/ui/stylesheets/csui/_details.scss
+++ b/ui/stylesheets/csui/_details.scss
@@ -43,25 +43,4 @@
background: lighten(#ccc, 15%);
padding: 10px;
border-bottom: 1px solid #ccc;
-
- &:not(.detail-actions) {
- table {
- width: 100%;
-
- tr {
- &:nth-child(even) {
- background: lighten(#ccc, 12%);
- }
- }
-
- th, td {
- padding: 10px;
- }
- }
- }
-
- .detail-actions {
- background: white;
- border-radius: 6px;
- }
}
\ No newline at end of file