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 <[email protected]> Authored: Mon Oct 7 10:31:08 2013 -0700 Committer: Brian Federle <[email protected]> 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
