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

M. Weber · yadvr · commit 1bbca4bf9051 · 2021-01-20T07:06:12.000+05:30
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 &lt;rohit.yadav@shapeblue.com&gt;
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -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",
diff --git a/ui/src/components/FooterToolbar/index.less b/ui/src/components/FooterToolbar/index.less
@@ -1,4 +1,4 @@
-@import "../index";
+@import "../../style/variables/prefixes";
 
 @footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";
 
diff --git a/ui/src/components/MultiTab/index.less b/ui/src/components/MultiTab/index.less
@@ -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;
diff --git a/ui/src/components/NumberInfo/index.less b/ui/src/components/NumberInfo/index.less
@@ -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";
 
diff --git a/ui/src/components/Trend/index.less b/ui/src/components/Trend/index.less
@@ -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";
 
diff --git a/ui/src/components/chart/chart.less b/ui/src/components/chart/chart.less
@@ -6,8 +6,5 @@
     position: absolute;
     bottom: -28px;
     width: 100%;
-
-/*    margin: 0 -5px;
-    overflow: hidden;*/
   }
 }
diff --git a/ui/src/components/index.less b/ui/src/components/index.less
diff --git a/ui/src/components/layouts/BasicLayout.vue b/ui/src/components/layouts/BasicLayout.vue
@@ -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
diff --git a/ui/src/style/README.md b/ui/src/style/README.md
@@ -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)
diff --git a/ui/src/style/common/common.less b/ui/src/style/common/common.less
@@ -0,0 +1,7 @@
+body {
+  overflow-y: scroll;
+
+  &.colorWeak {
+    filter: invert(80%);
+  }
+}
diff --git a/ui/src/style/component/ant-drawer.less b/ui/src/style/component/ant-drawer.less
@@ -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
+  }
+}
diff --git a/ui/src/style/frame/content.less b/ui/src/style/frame/content.less
@@ -0,0 +1,10 @@
+.content {
+
+  .table-operator {
+    margin-bottom: 18px;
+
+    button {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/ui/src/style/frame/search.less b/ui/src/style/frame/search.less
@@ -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;
+  }
+
+}
diff --git a/ui/src/style/frame/sider.less b/ui/src/style/frame/sider.less
@@ -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;
+    }
+  }
+
+}
diff --git a/ui/src/style/frame/top-menu.less b/ui/src/style/frame/top-menu.less
@@ -0,0 +1,6 @@
+.topmenu {
+  .page-header-index-wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
diff --git a/ui/src/style/frame/user-dropdown.less b/ui/src/style/frame/user-dropdown.less
@@ -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;
+  }
+
+}
diff --git a/ui/src/style/index.less b/ui/src/style/index.less
@@ -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";
diff --git a/ui/src/style/layout/ant.less b/ui/src/style/layout/ant.less
diff --git a/ui/src/style/objects/table.less b/ui/src/style/objects/table.less
diff --git a/ui/src/style/variables/prefixes.less b/ui/src/style/variables/prefixes.less

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import "../index";`
	`1`	`+@import "../../style/variables/prefixes";`
`2`	`2`
`3`	`3`	`@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar";`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,5 @@`
`6`	`6`	`position: absolute;`
`7`	`7`	`bottom: -28px;`
`8`	`8`	`width: 100%;`
`9`		`-`
`10`		`-/* margin: 0 -5px;`
`11`		`- overflow: hidden;*/`
`12`	`9`	`}`
`13`	`10`	`}`