This is an automated email from the ASF dual-hosted git repository. ningjiang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/servicecomb-pack.git
commit f5f2ad197a6eaa67ea0d1a5a6f14a277a73af118 Author: Lei Zhang <[email protected]> AuthorDate: Tue Aug 6 09:42:17 2019 +0800 SCB-1411 Add alpha-ui module & Bootstrap theme, template --- alpha/alpha-server/pom.xml | 4 + alpha/alpha-ui/pom.xml | 151 +++++++++ .../main/resources/static/css/sb-admin-2.min.css | 10 + .../src/main/resources/static/js/sb-admin-2.min.js | 7 + .../src/main/resources/static/scss/_buttons.scss | 52 +++ .../src/main/resources/static/scss/_cards.scss | 36 ++ .../src/main/resources/static/scss/_charts.scss | 29 ++ .../src/main/resources/static/scss/_dropdowns.scss | 21 ++ .../src/main/resources/static/scss/_error.scss | 52 +++ .../src/main/resources/static/scss/_footer.scss | 14 + .../src/main/resources/static/scss/_global.scss | 60 ++++ .../src/main/resources/static/scss/_login.scss | 50 +++ .../src/main/resources/static/scss/_mixins.scss | 1 + .../src/main/resources/static/scss/_navs.scss | 3 + .../src/main/resources/static/scss/_utilities.scss | 7 + .../src/main/resources/static/scss/_variables.scss | 76 +++++ .../main/resources/static/scss/navs/_global.scss | 42 +++ .../main/resources/static/scss/navs/_sidebar.scss | 372 +++++++++++++++++++++ .../main/resources/static/scss/navs/_topbar.scss | 129 +++++++ .../src/main/resources/static/scss/sb-admin-2.scss | 20 ++ .../static/scss/utilities/_animation.scss | 37 ++ .../static/scss/utilities/_background.scss | 17 + .../resources/static/scss/utilities/_border.scss | 7 + .../resources/static/scss/utilities/_display.scss | 4 + .../resources/static/scss/utilities/_progress.scss | 3 + .../resources/static/scss/utilities/_rotate.scss | 7 + .../resources/static/scss/utilities/_text.scss | 54 +++ alpha/alpha-ui/src/test/resources/log4j2.xml | 30 ++ alpha/pom.xml | 1 + pom.xml | 5 + 30 files changed, 1301 insertions(+) diff --git a/alpha/alpha-server/pom.xml b/alpha/alpha-server/pom.xml index 42a1734..5502cc5 100644 --- a/alpha/alpha-server/pom.xml +++ b/alpha/alpha-server/pom.xml @@ -97,6 +97,10 @@ </dependency> <dependency> <groupId>org.apache.servicecomb.pack</groupId> + <artifactId>alpha-ui</artifactId> + </dependency> + <dependency> + <groupId>org.apache.servicecomb.pack</groupId> <artifactId>alpha-spring-cloud-starter-consul</artifactId> </dependency> <dependency> diff --git a/alpha/alpha-ui/pom.xml b/alpha/alpha-ui/pom.xml new file mode 100644 index 0000000..7458dc2 --- /dev/null +++ b/alpha/alpha-ui/pom.xml @@ -0,0 +1,151 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + ~ 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. + --> + +<project xmlns="http://maven.apache.org/POM/4.0.0"; + xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; + xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd";> + <parent> + <artifactId>alpha</artifactId> + <groupId>org.apache.servicecomb.pack</groupId> + <version>0.5.0-SNAPSHOT</version> + </parent> + <modelVersion>4.0.0</modelVersion> + + <artifactId>alpha-ui</artifactId> + <name>Pack::Alpha::UI</name> + + <properties> + <leveldbjni-all.version>1.8</leveldbjni-all.version> + <akka-persistence-redis.version>0.4.0</akka-persistence-redis.version> + </properties> + + <dependencyManagement> + <dependencies> + <dependency> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-dependencies</artifactId> + <version>${spring.boot.version}</version> + <type>pom</type> + <scope>import</scope> + </dependency> + </dependencies> + </dependencyManagement> + + <dependencies> + <!-- webjars --> + <dependency> + <groupId>org.webjars</groupId> + <artifactId>webjars-locator</artifactId> + <version>0.36</version> + </dependency> + <dependency> + <groupId>org.webjars</groupId> + <artifactId>bootstrap</artifactId> + <version>4.3.1</version> + </dependency> + <dependency> + <groupId>org.webjars</groupId> + <artifactId>jquery</artifactId> + <version>3.4.1</version> + </dependency> + <dependency> + <groupId>org.webjars</groupId> + <artifactId>jquery-easing</artifactId> + <version>1.4.1</version> + </dependency> + <dependency> + <groupId>org.webjars</groupId> + <artifactId>font-awesome</artifactId> + <version>5.9.0</version> + </dependency> + <dependency> + <groupId>org.webjars</groupId> + <artifactId>datatables</artifactId> + <version>1.10.19</version> + </dependency> + + + <!-- spring boot --> + <dependency> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-starter-thymeleaf</artifactId> + </dependency> + <dependency> + <groupId>nz.net.ultraq.thymeleaf</groupId> + <artifactId>thymeleaf-layout-dialect</artifactId> + </dependency> + <dependency> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-starter-web</artifactId> + </dependency> + <dependency> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-autoconfigure</artifactId> + </dependency> + <dependency> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-starter-log4j2</artifactId> + </dependency> + <dependency> + <groupId>javax.persistence</groupId> + <artifactId>javax.persistence-api</artifactId> + </dependency> + <dependency> + <groupId>org.apache.logging.log4j</groupId> + <artifactId>log4j-api</artifactId> + <scope>test</scope> + </dependency> + <dependency> + <groupId>org.apache.logging.log4j</groupId> + <artifactId>log4j-core</artifactId> + <scope>test</scope> + </dependency> + + <!-- For testing the artifacts scope are test--> + <dependency> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-starter-test</artifactId> + <exclusions> + <exclusion> + <groupId>org.springframework.boot</groupId> + <artifactId>spring-boot-starter-logging</artifactId> + </exclusion> + </exclusions> + </dependency> + <dependency> + <groupId>org.awaitility</groupId> + <artifactId>awaitility</artifactId> + </dependency> + <dependency> + <groupId>com.github.seanyinx</groupId> + <artifactId>unit-scaffolding</artifactId> + </dependency> + <dependency> + <groupId>junit</groupId> + <artifactId>junit</artifactId> + </dependency> + <dependency> + <groupId>org.mockito</groupId> + <artifactId>mockito-core</artifactId> + </dependency> + <dependency> + <groupId>org.hamcrest</groupId> + <artifactId>hamcrest-all</artifactId> + </dependency> + </dependencies> +</project> diff --git a/alpha/alpha-ui/src/main/resources/static/css/sb-admin-2.min.css b/alpha/alpha-ui/src/main/resources/static/css/sb-admin-2.min.css new file mode 100644 index 0000000..bd64d93 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/css/sb-admin-2.min.css @@ -0,0 +1,10 @@ +/*! + * Start Bootstrap - SB Admin 2 v4.0.6 (https://startbootstrap.com/template-overviews/sb-admin-2) + * Copyright 2013-2019 Start Bootstrap + * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE) + *//*! + * Bootstrap v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */:root{--blue:#4e73df;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#e74a3b;--orange:#fd7e14;--yellow:#f6c23e;--green:#1cc88a;--teal:#20c9a6;--cyan:#36b9cc;--white:#fff;--gray:#858796;--gray-dark:#5a5c69;--primary:#4e73df;--secondary:#858796;--success:#1cc88a;--info:#36b9cc;--warning:#f6c23e;--danger:#e74a3b;--light:#f8f9fc;--dark:#5a5c69;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:"Nunito" [...] \ No newline at end of file diff --git a/alpha/alpha-ui/src/main/resources/static/js/sb-admin-2.min.js b/alpha/alpha-ui/src/main/resources/static/js/sb-admin-2.min.js new file mode 100644 index 0000000..0ef1a8b --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/js/sb-admin-2.min.js @@ -0,0 +1,7 @@ +/*! + * Start Bootstrap - SB Admin 2 v4.0.6 (https://startbootstrap.com/template-overviews/sb-admin-2) + * Copyright 2013-2019 Start Bootstrap + * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/blob/master/LICENSE) + */ + +!function(t){"use strict";t("#sidebarToggle, #sidebarToggleTop").on("click",function(o){t("body").toggleClass("sidebar-toggled"),t(".sidebar").toggleClass("toggled"),t(".sidebar").hasClass("toggled")&&t(".sidebar .collapse").collapse("hide")}),t(window).resize(function(){t(window).width()<768&&t(".sidebar .collapse").collapse("hide")}),t("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(o){if(768<t(window).width()){var e=o.originalEvent,l=e.wheelDelta||-e.detail;th [...] \ No newline at end of file diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_buttons.scss b/alpha/alpha-ui/src/main/resources/static/scss/_buttons.scss new file mode 100644 index 0000000..afcfc20 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_buttons.scss @@ -0,0 +1,52 @@ +.btn-circle { + border-radius: 100%; + height: 2.5rem; + width: 2.5rem; + font-size: 1rem; + display: inline-flex; + align-items: center; + justify-content: center; + &.btn-sm { + height: 1.8rem; + width: 1.8rem; + font-size: 0.75rem; + } + &.btn-lg { + height: 3.5rem; + width: 3.5rem; + font-size: 1.35rem; + } +} + +.btn-icon-split { + padding: 0; + overflow: hidden; + display: inline-flex; + align-items: stretch; + justify-content: center; + .icon { + background: fade-out($black, .85); + display: inline-block; + padding: $btn-padding-y $btn-padding-x; + } + .text { + display: inline-block; + padding: $btn-padding-y $btn-padding-x; + } + &.btn-sm { + .icon { + padding: $btn-padding-y-sm $btn-padding-x-sm; + } + .text { + padding: $btn-padding-y-sm $btn-padding-x-sm; + } + } + &.btn-lg { + .icon { + padding: $btn-padding-y-lg $btn-padding-x-lg; + } + .text { + padding: $btn-padding-y-lg $btn-padding-x-lg; + } + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_cards.scss b/alpha/alpha-ui/src/main/resources/static/scss/_cards.scss new file mode 100644 index 0000000..36337dd --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_cards.scss @@ -0,0 +1,36 @@ +// Custom Card Styling + +.card { + .card-header { + // Format Dropdowns in Card Headings + .dropdown { + line-height: 1; + .dropdown-menu { + line-height: 1.5; + } + } + } + // Collapsable Card Styling + .card-header[data-toggle="collapse"] { + text-decoration: none; + position: relative; + padding: 0.75rem 3.25rem 0.75rem 1.25rem; + &::after { + position: absolute; + right: 0; + top: 0; + padding-right: 1.725rem; + line-height: 51px; + font-weight: 900; + content: '\f107'; + font-family: 'Font Awesome 5 Free'; + color: $gray-400; + } + &.collapsed { + border-radius: $card-border-radius; + &::after { + content: '\f105'; + } + } + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_charts.scss b/alpha/alpha-ui/src/main/resources/static/scss/_charts.scss new file mode 100644 index 0000000..8124814 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_charts.scss @@ -0,0 +1,29 @@ +// Area Chart +.chart-area { + position: relative; + height: 10rem; + width: 100%; + @include media-breakpoint-up(md) { + height: 20rem; + } +} + +// Bar Chart +.chart-bar { + position: relative; + height: 10rem; + width: 100%; + @include media-breakpoint-up(md) { + height: 20rem; + } +} + +// Pie Chart +.chart-pie { + position: relative; + height: 15rem; + width: 100%; + @include media-breakpoint-up(md) { + height: calc(20rem - 43px) !important; + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_dropdowns.scss b/alpha/alpha-ui/src/main/resources/static/scss/_dropdowns.scss new file mode 100644 index 0000000..a2858e1 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_dropdowns.scss @@ -0,0 +1,21 @@ +// Custom Dropdown Styling + +.dropdown { + .dropdown-menu { + font-size: $dropdown-font-size; + .dropdown-header { + @extend .text-uppercase; + font-weight: 800; + font-size: 0.65rem; + color: $gray-500; + } + } +} + +// Utility class to hide arrow from dropdown + +.dropdown.no-arrow { + .dropdown-toggle::after { + display: none; + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_error.scss b/alpha/alpha-ui/src/main/resources/static/scss/_error.scss new file mode 100644 index 0000000..66cbedc --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_error.scss @@ -0,0 +1,52 @@ +// Lucas Bebber's Glitch Effect +// Tutorial and CSS from CSS Tricks +// https://css-tricks.com/glitch-effect-text-images-svg/ + +.error { + color: $gray-800; + font-size: 7rem; + position: relative; + line-height: 1; + width: 12.5rem; +} +@keyframes noise-anim { + $steps: 20; + @for $i from 0 through $steps { + #{percentage($i*(1/$steps))} { + clip: rect(random(100)+px,9999px,random(100)+px,0); + } + } +} +.error:after { + content: attr(data-text); + position: absolute; + left: 2px; + text-shadow: -1px 0 $red; + top: 0; + color: $gray-800; + background: $gray-100; + overflow: hidden; + clip: rect(0,900px,0,0); + animation: noise-anim 2s infinite linear alternate-reverse; +} + +@keyframes noise-anim-2 { + $steps: 20; + @for $i from 0 through $steps { + #{percentage($i*(1/$steps))} { + clip: rect(random(100)+px,9999px,random(100)+px,0); + } + } +} +.error:before { + content: attr(data-text); + position: absolute; + left: -2px; + text-shadow: 1px 0 $blue; + top: 0; + color: $gray-800; + background: $gray-100; + overflow: hidden; + clip: rect(0,900px,0,0); + animation: noise-anim-2 3s infinite linear alternate-reverse; +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_footer.scss b/alpha/alpha-ui/src/main/resources/static/scss/_footer.scss new file mode 100644 index 0000000..99d9dcf --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_footer.scss @@ -0,0 +1,14 @@ +footer.sticky-footer { + padding: 2rem 0; + flex-shrink: 0; + .copyright { + line-height: 1; + font-size: 0.8rem; + } +} + +body.sidebar-toggled { + footer.sticky-footer { + width: 100%; + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_global.scss b/alpha/alpha-ui/src/main/resources/static/scss/_global.scss new file mode 100644 index 0000000..fa44c55 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_global.scss @@ -0,0 +1,60 @@ +// Global component styles + +html { + position: relative; + min-height: 100%; +} + +body { + height: 100%; +} + +a { + &:focus { + outline: none; + } +} + +// Main page wrapper +#wrapper { + display: flex; + #content-wrapper { + background-color: $gray-100; + width: 100%; + overflow-x: hidden; + #content { + flex: 1 0 auto; + } + } +} + +// Set container padding to match gutter width instead of default 15px +.container, +.container-fluid { + padding-left: $grid-gutter-width; + padding-right: $grid-gutter-width; +} + +// Scroll to top button +.scroll-to-top { + position: fixed; + right: 1rem; + bottom: 1rem; + display: none; + width: 2.75rem; + height: 2.75rem; + text-align: center; + color: $white; + background: fade-out($gray-800, .5); + line-height: 46px; + &:focus, + &:hover { + color: white; + } + &:hover { + background: $gray-800; + } + i { + font-weight: 800; + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_login.scss b/alpha/alpha-ui/src/main/resources/static/scss/_login.scss new file mode 100644 index 0000000..b942f42 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_login.scss @@ -0,0 +1,50 @@ +// Pulling these images from Unsplash +// Toshi the dog from https://unsplash.com/@charlesdeluvio - what a funny dog... + +.bg-login-image { + background: url('https://source.unsplash.com/K4mSJ7kc0As/600x800'); + background-position: center; + background-size: cover; +} + +.bg-register-image { + background: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800'); + background-position: center; + background-size: cover; +} + +.bg-password-image { + background: url('https://source.unsplash.com/oWTW-jNGl9I/600x800'); + background-position: center; + background-size: cover; +} + +form.user { + + .custom-checkbox.small { + label { + line-height: 1.5rem; + } + } + + .form-control-user { + font-size: 0.8rem; + border-radius: 10rem; + padding: 1.5rem 1rem; + } + + .btn-user { + font-size: 0.8rem; + border-radius: 10rem; + padding: 0.75rem 1rem; + } + +} + +.btn-google { + @include button-variant($brand-google, $white); +} + +.btn-facebook { + @include button-variant($brand-facebook, $white); +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_mixins.scss b/alpha/alpha-ui/src/main/resources/static/scss/_mixins.scss new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_mixins.scss @@ -0,0 +1 @@ + diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_navs.scss b/alpha/alpha-ui/src/main/resources/static/scss/_navs.scss new file mode 100644 index 0000000..af517b5 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_navs.scss @@ -0,0 +1,3 @@ +@import "navs/global.scss"; +@import "navs/topbar.scss"; +@import "navs/sidebar.scss"; diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_utilities.scss b/alpha/alpha-ui/src/main/resources/static/scss/_utilities.scss new file mode 100644 index 0000000..bf50ba2 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_utilities.scss @@ -0,0 +1,7 @@ +@import "utilities/animation.scss"; +@import "utilities/background.scss"; +@import "utilities/display.scss"; +@import "utilities/text.scss"; +@import "utilities/border.scss"; +@import "utilities/progress.scss"; +@import "utilities/rotate.scss"; diff --git a/alpha/alpha-ui/src/main/resources/static/scss/_variables.scss b/alpha/alpha-ui/src/main/resources/static/scss/_variables.scss new file mode 100644 index 0000000..96ed77a --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/_variables.scss @@ -0,0 +1,76 @@ +// Override Bootstrap default variables here +// Do not edit any of the files in /vendor/bootstrap/scss/! + +// Color Variables +// Bootstrap Color Overrides + +$white: #fff !default; +$gray-100: #f8f9fc !default; +$gray-200: #eaecf4 !default; +$gray-300: #dddfeb !default; +$gray-400: #d1d3e2 !default; +$gray-500: #b7b9cc !default; +$gray-600: #858796 !default; +$gray-700: #6e707e !default; +$gray-800: #5a5c69 !default; +$gray-900: #3a3b45 !default; +$black: #000 !default; + +$blue: #4e73df !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #e74a3b !default; +$orange: #fd7e14 !default; +$yellow: #f6c23e !default; +$green: #1cc88a !default; +$teal: #20c9a6 !default; +$cyan: #36b9cc !default; + +// Custom Colors +$brand-google: #ea4335; +$brand-facebook: #3b5998; + +// Set Contrast Threshold +$yiq-contrasted-threshold: 195 !default; + +// Typography +$body-color: $gray-600 !default; + +$font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 'Noto Color Emoji' !default; + +$font-weight-light: 300 !default; +// $font-weight-base: 400; +$headings-font-weight: 400 !default; + +// Shadows +$box-shadow-sm: 0 0.125rem 0.25rem 0 rgba($gray-900, .2) !default; +$box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, .15) !default; +// $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; + +// Borders Radius +$border-radius: 0.35rem !default; +$border-color: darken($gray-200, 2%); + +// Spacing Variables +// Change below variable if the height of the navbar changes +$topbar-base-height: 4.375rem; +// Change below variable to change the width of the sidenav +$sidebar-base-width: 14rem; +// Change below variable to change the width of the sidenav when collapsed +$sidebar-collapsed-width: 6.5rem; + +// Card +$card-cap-bg: $gray-100; +$card-border-color: $border-color; + +// Adjust column spacing for symmetry +$spacer: 1rem; +$grid-gutter-width: $spacer * 1.5; + +// Transitions +$transition-collapse: height .15s ease !default; + +// Dropdowns +$dropdown-font-size: 0.85rem; +$dropdown-border-color: $border-color; diff --git a/alpha/alpha-ui/src/main/resources/static/scss/navs/_global.scss b/alpha/alpha-ui/src/main/resources/static/scss/navs/_global.scss new file mode 100644 index 0000000..a52d8b8 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/navs/_global.scss @@ -0,0 +1,42 @@ +// Global styles for both custom sidebar and topbar compoments + +.sidebar, +.topbar { + .nav-item { + // Customize Dropdown Arrows for Navbar + &.dropdown { + .dropdown-toggle { + &::after { + width: 1rem; + text-align: center; + float: right; + vertical-align: 0; + border: 0; + font-weight: 900; + content: '\f105'; + font-family: 'Font Awesome 5 Free'; + } + } + &.show { + .dropdown-toggle::after { + content: '\f107'; + } + } + } + // Counter for nav links and nav link image sizing + .nav-link { + position: relative; + .badge-counter { + position: absolute; + transform: scale(0.7); + transform-origin: top right; + right: .25rem; + margin-top: -.25rem; + } + .img-profile { + height: 2rem; + width: 2rem; + } + } + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/navs/_sidebar.scss b/alpha/alpha-ui/src/main/resources/static/scss/navs/_sidebar.scss new file mode 100644 index 0000000..a3daebd --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/navs/_sidebar.scss @@ -0,0 +1,372 @@ +// Sidebar +.sidebar { + width: $sidebar-collapsed-width; + min-height: 100vh; + .nav-item { + position: relative; + &:last-child { + margin-bottom: 1rem; + } + .nav-link { + text-align: center; + padding: 0.75rem 1rem; + width: $sidebar-collapsed-width; + span { + font-size: 0.65rem; + display: block; + } + } + &.active { + .nav-link { + font-weight: 700; + } + } + // Accordion + .collapse { + position: absolute; + left: calc(#{$sidebar-collapsed-width} + #{$grid-gutter-width} / 2); + z-index: 1; + top: 2px; + // Grow In Animation + @extend .animated--grow-in; + .collapse-inner { + border-radius: $border-radius; + box-shadow: $box-shadow; + } + } + .collapsing { + display: none; + transition: none; + } + .collapse, + .collapsing { + .collapse-inner { + padding: .5rem 0; + min-width: 10rem; + font-size: $dropdown-font-size; + margin: 0 0 1rem 0; + .collapse-header { + margin: 0; + white-space: nowrap; + padding: .5rem 1.5rem; + text-transform: uppercase; + font-weight: 800; + font-size: 0.65rem; + color: $gray-500; + } + .collapse-item { + padding: 0.5rem 1rem; + margin: 0 0.5rem; + display: block; + color: $gray-900; + text-decoration: none; + border-radius: $border-radius; + white-space: nowrap; + &:hover { + background-color: $gray-200; + } + &:active { + background-color: $gray-300; + } + &.active { + color: $primary; + font-weight: 700; + } + } + } + } + } + #sidebarToggle { + width: 2.5rem; + height: 2.5rem; + text-align: center; + margin-bottom: 1rem; + cursor: pointer; + &::after { + font-weight: 900; + content: '\f104'; + font-family: 'Font Awesome 5 Free'; + margin-right: 0.1rem; + } + &:hover { + text-decoration: none; + } + &:focus { + outline: none; + } + } + &.toggled { + width: 0 !important; + overflow: hidden; + #sidebarToggle::after { + content: '\f105'; + font-family: 'Font Awesome 5 Free'; + margin-left: 0.25rem; + } + } + .sidebar-brand { + height: $topbar-base-height; + text-decoration: none; + font-size: 1rem; + font-weight: 800; + padding: 1.5rem 1rem; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.05rem; + z-index: 1; + + .sidebar-brand-icon i { + font-size: 2rem; + } + .sidebar-brand-text { + display: none; + } + } + hr.sidebar-divider { + margin: 0 1rem 1rem; + } + .sidebar-heading { + text-align: center; + padding: 0 1rem; + font-weight: 800; + font-size: 0.65rem; + @extend .text-uppercase; + } +} + +@include media-breakpoint-up(md) { + .sidebar { + width: $sidebar-base-width !important; + .nav-item { + // Accordion + .collapse { + position: relative; + left: 0; + z-index: 1; + top: 0; + animation: none; + .collapse-inner { + border-radius: 0; + box-shadow: none; + } + } + .collapsing { + display: block; + transition: $transition-collapse; + } + .collapse, + .collapsing { + margin: 0 1rem; + } + .nav-link { + display: block; + width: 100%; + text-align: left; + padding: 1rem; + width: $sidebar-base-width; + i { + font-size: 0.85rem; + margin-right: 0.25rem; + } + span { + font-size: 0.85rem; + display: inline; + } + // Accordion Arrow Icon + &[data-toggle="collapse"] { + &::after { + width: 1rem; + text-align: center; + float: right; + vertical-align: 0; + border: 0; + font-weight: 900; + content: '\f107'; + font-family: 'Font Awesome 5 Free'; + } + &.collapsed::after { + content: '\f105'; + } + } + } + } + .sidebar-brand { + .sidebar-brand-icon i { + font-size: 2rem; + } + .sidebar-brand-text { + display: inline; + } + } + .sidebar-heading { + text-align: left; + } + &.toggled { + overflow: visible; + width: $sidebar-collapsed-width !important; + .nav-item { + // Accordion + .collapse { + position: absolute; + left: calc(#{$sidebar-collapsed-width} + #{$grid-gutter-width} / 2); + z-index: 1; + top: 2px; + // Grow In Animation for Toggled State + animation-name: growIn; + animation-duration: 200ms; + animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1); + .collapse-inner { + box-shadow: $box-shadow; + border-radius: $border-radius; + } + } + .collapsing { + display: none; + transition: none; + } + .collapse, + .collapsing { + margin: 0; + } + &:last-child { + margin-bottom: 1rem; + } + .nav-link { + text-align: center; + padding: 0.75rem 1rem; + width: $sidebar-collapsed-width; + span { + font-size: 0.65rem; + display: block; + } + i { + margin-right: 0; + } + &[data-toggle="collapse"]::after { + display: none; + } + } + } + .sidebar-brand { + .sidebar-brand-icon i { + font-size: 2rem; + } + .sidebar-brand-text { + display: none; + } + } + .sidebar-heading { + text-align: center; + } + } + } +} + +// Sidebar Color Variants + +// Sidebar Light +.sidebar-light { + .sidebar-brand { + color: $gray-700; + } + hr.sidebar-divider { + border-top: 1px solid $gray-200; + } + .sidebar-heading { + color: $gray-500; + } + .nav-item { + .nav-link { + color: $gray-600; + i { + color: $gray-400; + } + &:active, + &:focus, + &:hover { + color: $gray-700; + i { + color: $gray-700; + } + } + // Accordion + &[data-toggle="collapse"]::after { + color: $gray-500; + } + } + &.active { + .nav-link { + color: $gray-700; + i { + color: $gray-700; + } + } + } + } + // Color the sidebar toggler + #sidebarToggle { + background-color: $gray-200; + &::after { + color: $gray-500; + } + &:hover { + background-color: $gray-300; + } + } +} + +// Sidebar Dark +.sidebar-dark { + .sidebar-brand { + color: $white; + } + hr.sidebar-divider { + border-top: 1px solid fade-out($white, 0.85); + } + .sidebar-heading { + color: fade-out($white, 0.6); + } + .nav-item { + .nav-link { + color: fade-out($white, 0.2); + i { + color: fade-out($white, 0.7); + } + &:active, + &:focus, + &:hover { + color: $white; + i { + color: $white; + } + } + // Accordion + &[data-toggle="collapse"]::after { + color: fade-out($white, 0.5); + } + } + &.active { + .nav-link { + color: $white; + i { + color: $white; + } + } + } + } + // Color the sidebar toggler + #sidebarToggle { + background-color: fade-out($white, 0.8); + &::after { + color: fade-out($white, 0.5); + } + &:hover { + background-color: fade-out($white, 0.75); + } + } + &.toggled { + #sidebarToggle::after { + color: fade-out($white, 0.5); + } + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/navs/_topbar.scss b/alpha/alpha-ui/src/main/resources/static/scss/navs/_topbar.scss new file mode 100644 index 0000000..8d9a2aa --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/navs/_topbar.scss @@ -0,0 +1,129 @@ +// Topbar +.topbar { + height: $topbar-base-height; + #sidebarToggleTop { + height: 2.5rem; + width: 2.5rem; + &:hover { + background-color: $gray-200; + } + &:active { + background-color: $gray-300; + } + } + .navbar-search { + width: 25rem; + input { + font-size: 0.85rem; + } + } + .topbar-divider { + width: 0; + border-right: 1px solid $border-color; + height: calc(#{$topbar-base-height} - 2rem); + margin: auto 1rem; + } + .nav-item { + .nav-link { + height: $topbar-base-height; + display: flex; + align-items: center; + padding: 0 0.75rem; + &:focus { + outline: none; + } + } + &:focus { + outline: none; + } + } + .dropdown { + position: static; + .dropdown-menu { + width: calc(100% - #{$grid-gutter-width}); + right: $grid-gutter-width / 2; + } + } + .dropdown-list { + padding: 0; + border: none; + overflow: hidden; + .dropdown-header { + background-color: $primary; + border: 1px solid $primary; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + color: $white; + } + .dropdown-item { + white-space: normal; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-left: 1px solid $border-color; + border-right: 1px solid $border-color; + border-bottom: 1px solid $border-color; + line-height: 1.3rem; + .dropdown-list-image { + position: relative; + height: 2.5rem; + width: 2.5rem; + img { + height: 2.5rem; + width: 2.5rem; + } + .status-indicator { + background-color: $gray-200; + height: 0.75rem; + width: 0.75rem; + border-radius: 100%; + position: absolute; + bottom: 0; + right: 0; + border: .125rem solid $white; + } + } + .text-truncate { + max-width: 10rem; + } + &:active { + background-color: $gray-200; + color: $gray-900; + } + } + } + @include media-breakpoint-up(sm) { + .dropdown { + position: relative; + .dropdown-menu { + width: auto; + right: 0; + } + } + .dropdown-list { + width: 20rem !important; + .dropdown-item { + .text-truncate { + max-width: 13.375rem; + } + } + } + } +} + +.topbar.navbar-dark {} + +.topbar.navbar-light { + .navbar-nav { + .nav-item { + .nav-link { + color: $gray-400; + &:hover { + color: $gray-500; + } + &:active { + color: $gray-600; + } + } + } + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/sb-admin-2.scss b/alpha/alpha-ui/src/main/resources/static/scss/sb-admin-2.scss new file mode 100644 index 0000000..cdd6f08 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/sb-admin-2.scss @@ -0,0 +1,20 @@ +// Import Custom SB Admin 2 Variables (Overrides Default Bootstrap Variables) +@import "variables.scss"; + +// Import Bootstrap +@import "../vendor/bootstrap/scss/bootstrap.scss"; + +// Import Custom SB Admin 2 Mixins and Components +@import "mixins.scss"; +@import "global.scss"; +@import "utilities.scss"; + +// Custom Components +@import "dropdowns.scss"; +@import "navs.scss"; +@import "buttons.scss"; +@import "cards.scss"; +@import "charts.scss"; +@import "login.scss"; +@import "error.scss"; +@import "footer.scss"; diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_animation.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_animation.scss new file mode 100644 index 0000000..7a40d4d --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_animation.scss @@ -0,0 +1,37 @@ +// Animation Utilities + +// Grow In Animation + +@keyframes growIn { + 0% { + transform: scale(0.9); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +.animated--grow-in { + animation-name: growIn; + animation-duration: 200ms; + animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1); +} + +// Fade In Animation + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.animated--fade-in { + animation-name: fadeIn; + animation-duration: 200ms; + animation-timing-function: opacity cubic-bezier(0,1,.4,1); +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_background.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_background.scss new file mode 100644 index 0000000..b4ceff1 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_background.scss @@ -0,0 +1,17 @@ +// Background Gradient Utilities + +@each $color, $value in $theme-colors { + .bg-gradient-#{$color} { + background-color: $value; + background-image: linear-gradient(180deg, $value 10%, darken($value, 15%) 100%); + background-size: cover; + } +} + +// Grayscale Background Utilities + +@each $level, $value in $grays { + .bg-gray-#{$level} { + background-color: $value !important; + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_border.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_border.scss new file mode 100644 index 0000000..cede0e4 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_border.scss @@ -0,0 +1,7 @@ +@each $color, $value in $theme-colors { + @each $position in ['left', 'bottom'] { + .border-#{$position}-#{$color} { + border-#{$position}: .25rem solid $value !important; + } + } +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_display.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_display.scss new file mode 100644 index 0000000..410b9ad --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_display.scss @@ -0,0 +1,4 @@ +// Overflow Hidden +.o-hidden { + overflow: hidden !important; +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_progress.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_progress.scss new file mode 100644 index 0000000..0c2eb63 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_progress.scss @@ -0,0 +1,3 @@ +.progress-sm { + height: .5rem; +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_rotate.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_rotate.scss new file mode 100644 index 0000000..7e33d44 --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_rotate.scss @@ -0,0 +1,7 @@ +.rotate-15 { + transform: rotate(15deg); +} + +.rotate-n-15 { + transform: rotate(-15deg); +} diff --git a/alpha/alpha-ui/src/main/resources/static/scss/utilities/_text.scss b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_text.scss new file mode 100644 index 0000000..4fb78af --- /dev/null +++ b/alpha/alpha-ui/src/main/resources/static/scss/utilities/_text.scss @@ -0,0 +1,54 @@ +// Grayscale Text Utilities + +.text-xs { + font-size: .7rem; +} + +.text-lg { + font-size: 1.2rem; +} + +.text-gray-100 { + color: $gray-100 !important; +} + +.text-gray-200 { + color: $gray-200 !important; +} + +.text-gray-300 { + color: $gray-300 !important; +} + +.text-gray-400 { + color: $gray-400 !important; +} + +.text-gray-500 { + color: $gray-500 !important; +} + +.text-gray-600 { + color: $gray-600 !important; +} + +.text-gray-700 { + color: $gray-700 !important; +} + +.text-gray-800 { + color: $gray-800 !important; +} + +.text-gray-900 { + color: $gray-900 !important; +} + +.icon-circle { + height: 2.5rem; + width: 2.5rem; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/alpha/alpha-ui/src/test/resources/log4j2.xml b/alpha/alpha-ui/src/test/resources/log4j2.xml new file mode 100644 index 0000000..58924c6 --- /dev/null +++ b/alpha/alpha-ui/src/test/resources/log4j2.xml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + ~ 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. + --> + +<Configuration status="WARN"> + <Appenders> + <Console name="Console" target="SYSTEM_OUT"> + <PatternLayout pattern="%d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n"/> + </Console> + </Appenders> + <Loggers> + <Root level="info"> + <AppenderRef ref="Console"/> + </Root> + </Loggers> +</Configuration> diff --git a/alpha/pom.xml b/alpha/pom.xml index 91ec0ed..66e1660 100644 --- a/alpha/pom.xml +++ b/alpha/pom.xml @@ -40,6 +40,7 @@ <module>alpha-spring-cloud-starter-zookeeper</module> <module>alpha-spring-cloud-starter-nacos</module> <module>alpha-server</module> + <module>alpha-ui</module> </modules> <build> diff --git a/pom.xml b/pom.xml index 8c43768..5a7c7ee 100644 --- a/pom.xml +++ b/pom.xml @@ -331,6 +331,11 @@ </dependency> <dependency> <groupId>org.apache.servicecomb.pack</groupId> + <artifactId>alpha-ui</artifactId> + <version>0.5.0-SNAPSHOT</version> + </dependency> + <dependency> + <groupId>org.apache.servicecomb.pack</groupId> <artifactId>alpha-spring-cloud-starter-eureka</artifactId> <version>0.5.0-SNAPSHOT</version> </dependency>
