etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: create new .less files structure (#3) 

Delete global.less file and split rules into several .less files inside new style folder.
Upgrade import paths and write readme file that describes how less-coding could look like.
Add missed npm package to fix terminal error.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
M. Weber 2019-08-05 07:24:04 +02:00 committed by Rohit Yadav
parent 0ef07cdc42
commit 1bbca4bf90
21 changed files with 1021 additions and 788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1338
ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
ui/package.json
View File

@ -3,6 +3,7 @@
"version": "1.3.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
@ -23,6 +24,7 @@
"lodash.pick": "^4.4.0",
"md5": "^2.2.1",
"moment": "^2.24.0",
"node-emoji": "^1.10.0",
"npm-check-updates": "^3.1.13",
"nprogress": "^0.2.0",
"viser-vue": "^2.4.6",

2
ui/src/components/FooterToolbar/index.less
View File

@ -1,4 +1,4 @@
@import "../index";
@import "../../style/variables/prefixes";
@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";

8
ui/src/components/MultiTab/index.less
View File

@ -1,14 +1,8 @@
@import '../index';
@import '../../style/variables/prefixes';
@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab";
@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper";
/*
.topmenu .@{multi-tab-prefix-cls} {
max-width: 1200px;
margin: -23px auto 24px auto;
}
*/
.@{multi-tab-prefix-cls} {
margin: -23px -24px 24px -24px;
background: #fff;

3
ui/src/components/NumberInfo/index.less
View File

@ -1,4 +1,5 @@
@import "../index";
@import '~ant-design-vue/lib/style/themes/default';
@import '../../style/variables/prefixes';
@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info";

3
ui/src/components/Trend/index.less
View File

@ -1,4 +1,5 @@
@import "../index";
@import '~ant-design-vue/lib/style/themes/default';
@import '../../style/variables/prefixes';
@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";

3
ui/src/components/chart/chart.less
View File

@ -6,8 +6,5 @@
position: absolute;
bottom: -28px;
width: 100%;
/* margin: 0 -5px;
overflow: hidden;*/
}
}

4
ui/src/components/index.less
View File

@ -1,4 +0,0 @@
@import "~ant-design-vue/lib/style/index";
// The prefix to use on all css classes from ant-pro.
@ant-pro-prefix : ant-pro;

3
ui/src/components/layouts/BasicLayout.vue
View File

@ -26,7 +26,8 @@ export default {
</script>
<style lang="less">
@import url('../global.less');
@import url('../../style/index.less');
/*
* The following styles are auto-applied to elements with

36
ui/src/style/README.md Normal file
View File

@ -0,0 +1,36 @@
# index.less
- src/styles/index.less imports all necessary rules for cloudstack
# ant .less structure node_modules/ant-design-vue/
## main .less entry points:
1. dist/antd.less
- imports everthing with index.less + components.less
2. lib/style/index.less
- themes/default.less
- color/colors'
- default theme @variables
- core/index.less
- includes base styles, motion rules and iconfont
# src/style/ explaination
- index.less includes ant styles, as well as all custom variables and rules
## folders:
1. variables
- include all custom variables here
2. common
- include all rules that reset styles, define global stuffs without classes at all
- e.g. body {} p, ul, li {} h1, h2, h3 {}
3. frame
- everything that belongs to the frame
- e.g. header, footer, nav, sider, content (just the actual content frame, not every component in it)
4. layout
- rules that modify the page at all if new layout class is set.
- e.g. #html class="layout-ant-black"#
5. objects
- repeatly used elements like buttons, inputs,
6. components
- complex elements like dropdown, forms, table, search (usualy include this to components/FooterToolbar/ folder)

7
ui/src/style/common/common.less Normal file
View File

@ -0,0 +1,7 @@
body {
overflow-y: scroll;
&.colorWeak {
filter: invert(80%);
}
}

22
ui/src/style/component/ant-drawer.less Normal file
View File

@ -0,0 +1,22 @@
.ant-drawer.drawer-sider {
.sider {
box-shadow: none;
}
&.dark {
.ant-drawer-content {
background-color: rgb(0, 21, 41);
}
}
&.light {
box-shadow: none;
.ant-drawer-content {
background-color: #fff;
}
}
.ant-drawer-body {
padding: 0
}
}

10
ui/src/style/frame/content.less Normal file
View File

@ -0,0 +1,10 @@
.content {
.table-operator {
margin-bottom: 18px;
button {
margin-right: 8px;
}
}
}

35
ui/src/style/frame/search.less Normal file
View File

@ -0,0 +1,35 @@
.table-page-search-wrapper {
.ant-form-inline {
.ant-form-item {
display: flex;
margin-bottom: 24px;
margin-right: 0;
.ant-form-item-control-wrapper {
flex: 1 1;
display: inline-block;
vertical-align: middle;
}
> .ant-form-item-label {
line-height: 32px;
padding-right: 8px;
width: auto;
}
.ant-form-item-control {
height: 32px;
line-height: 32px;
}
}
}
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
}

70
ui/src/style/frame/sider.less Normal file
View File

@ -0,0 +1,70 @@
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
z-index: 10;
height: auto;
.ant-layout-sider-children {
overflow-y: hidden;
&:hover {
overflow-y: auto;
}
}
&.ant-fixed-sidemenu {
position: fixed;
height: 100%;
}
.logo {
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img,
svg,
h1 {
display: inline-block;
vertical-align: middle;
}
img {
height: 32px;
width: 32px;
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
font-weight: 600;
vertical-align: middle;
}
}
&.light {
background-color: #fff;
box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
.logo {
background: #fff;
box-shadow: 1px 1px 0px 0px #e8e8e8;
h1 {
color: unset;
}
}
.ant-menu-light {
border-right-color: transparent;
}
}
}

6
ui/src/style/frame/top-menu.less Normal file
View File

@ -0,0 +1,6 @@
.topmenu {
.page-header-index-wide {
max-width: 1200px;
margin: 0 auto;
}
}

21
ui/src/style/frame/user-dropdown.less Normal file
View File

@ -0,0 +1,21 @@
.user-dropdown-menu {
span {
user-select: none;
}
}
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0;
.ant-dropdown-menu-item {
width: 160px;
}
.ant-dropdown-menu-item > .anticon:first-child,
.ant-dropdown-menu-item > a > .anticon:first-child,
.ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
}

20
ui/src/style/index.less Normal file
View File

@ -0,0 +1,20 @@
//* import all ## official ant ## variables; mixins and styles
@import "~ant-design-vue/lib/style/themes/default";
@import "~ant-design-vue/lib/style/core/index";
//* import all ## custom ## variables, mixins and styles
@import "variables/prefixes";
@import "common/common";
@import "component/ant-drawer";
@import "frame/content";
@import "frame/search";
@import "frame/sider";
@import "frame/top-menu";
@import "frame/user-dropdown";
@import "layout/ant";
@import "objects/table";

211
ui/src/components/global.less → ui/src/style/layout/ant.less
View File

@ -1,18 +1,9 @@
@import './index.less';
body {
overflow-y: scroll;
&.colorWeak {
filter: invert(80%);
}
}
.layout.ant-layout {
height: auto;
overflow-x: hidden;
&.mobile,&.tablet {
&.mobile,
&.tablet {
.ant-layout-content {
@ -25,10 +16,12 @@ body {
.ant-table-content {
overflow-y: auto;
}
.ant-table-body {
min-width: 800px;
}
}
.topmenu {
&.content-width-Fluid {
.header-index-wide {
@ -42,7 +35,8 @@ body {
.sidemenu {
.ant-header-fixedHeader {
&.ant-header-side-opened, &.ant-header-side-closed {
&.ant-header-side-opened,
&.ant-header-side-closed {
width: 100%
}
}
@ -59,6 +53,7 @@ body {
padding: 0 24px;
cursor: pointer;
transition: color .3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
@ -81,6 +76,7 @@ body {
width: 100%;
}
}
&.content-width-Fluid {
.header-index-wide {
max-width: unset;
@ -121,7 +117,8 @@ body {
position: relative;
}
.header, .top-nav-header-index {
.header,
.top-nav-header-index {
.user-wrapper {
float: right;
@ -158,6 +155,7 @@ body {
.action {
color: rgba(255, 255, 255, 0.85);
a {
color: rgba(255, 255, 255, 0.85);
}
@ -170,7 +168,8 @@ body {
}
}
&.mobile,&.tablet {
&.mobile,
&.tablet {
.top-nav-header-index {
.header-index-wide {
@ -186,6 +185,7 @@ body {
flex: 0 0 56px;
text-align: center;
line-height: 58px;
h1 {
display: none;
}
@ -203,12 +203,14 @@ body {
}
}
}
//
}
}
}
&.tablet {
// overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
.top-nav-header-index {
@ -217,10 +219,11 @@ body {
.header-index-left {
.logo > a {
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.ant-menu.ant-menu-horizontal {
flex: 1 1;
white-space: normal;
@ -231,9 +234,9 @@ body {
}
.top-nav-header-index {
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
position: relative;
transition: background .3s,width .2s;
transition: background .3s, width .2s;
.header-index-wide {
max-width: 1200px;
@ -260,7 +263,8 @@ body {
transition: all .3s;
overflow: hidden;
img, svg {
img,
svg {
display: inline-block;
vertical-align: middle;
height: 32px;
@ -307,173 +311,4 @@ body {
padding: 0 12px 0 0;
}
}
.topmenu {
.page-header-index-wide {
max-width: 1200px;
margin: 0 auto;
}
}
.ant-drawer.drawer-sider {
.sider {
box-shadow: none;
}
&.dark {
.ant-drawer-content {
background-color: rgb(0, 21, 41);
}
}
&.light {
box-shadow: none;
.ant-drawer-content {
background-color: #fff;
}
}
.ant-drawer-body {
padding: 0
}
}
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
z-index: 10;
height: auto;
.ant-layout-sider-children {
overflow-y: hidden;
&:hover{
overflow-y: auto;
}
}
&.ant-fixed-sidemenu {
position: fixed;
height: 100%;
}
.logo {
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, svg, h1 {
display: inline-block;
vertical-align: middle;
}
img {
height: 32px;
width: 32px;
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
font-weight: 600;
vertical-align: middle;
}
}
&.light {
background-color: #fff;
box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
.logo {
background: #fff;
box-shadow: 1px 1px 0px 0px #e8e8e8;
h1 {
color: unset;
}
}
.ant-menu-light {
border-right-color: transparent;
}
}
}
.user-dropdown-menu {
span {
user-select: none;
}
}
.user-dropdown-menu-wrapper.ant-dropdown-menu {
padding: 4px 0;
.ant-dropdown-menu-item {
width: 160px;
}
.ant-dropdown-menu-item > .anticon:first-child,
.ant-dropdown-menu-item > a > .anticon:first-child,
.ant-dropdown-menu-submenu-title > .anticon:first-child
.ant-dropdown-menu-submenu-title > a > .anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
}
.table-alert {
margin-bottom: 16px;
}
.table-page-search-wrapper {
.ant-form-inline {
.ant-form-item {
display: flex;
margin-bottom: 24px;
margin-right: 0;
.ant-form-item-control-wrapper {
flex: 1 1;
display: inline-block;
vertical-align: middle;
}
>.ant-form-item-label {
line-height: 32px;
padding-right: 8px;
width: auto;
}
.ant-form-item-control {
height: 32px;
line-height: 32px;
}
}
}
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
}
.content {
.table-operator {
margin-bottom: 18px;
button {
margin-right: 8px;
}
}
}
}

3
ui/src/style/objects/table.less Normal file
View File

@ -0,0 +1,3 @@
.table-alert {
margin-bottom: 16px;
}

2
ui/src/style/variables/prefixes.less Normal file
View File

@ -0,0 +1,2 @@
// The prefix to use on all css classes from ant-pro.
@ant-pro-prefix : ant-pro;