diff --git a/src/App.vue b/src/App.vue index a5f74f1d6..79e9da706 100755 --- a/src/App.vue +++ b/src/App.vue @@ -10,9 +10,9 @@ - + - +
@@ -35,7 +35,8 @@ export default { data() { return { sidebarActive: false, - newsActive: false + newsActive: false, + theme: 'saga-blue' } }, watch: { @@ -62,6 +63,41 @@ export default { }, hideNews() { this.newsActive = false; + }, + changeTheme(event) { + let themeElement = document.getElementById('theme-link'); + themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, event.theme)); + this.theme = event.theme; + + if (event.dark) { + this.addClass(document.body, event.dark); + } + else { + this.removeClass(document.body, 'dark-theme'); + this.removeClass(document.body, 'dark-theme-alt'); + } + + this.activeMenuIndex = null; + }, + addClass(element, className) { + if (!this.hasClass(element, className)) { + if (element.classList) + element.classList.add(className); + else + element.className += ' ' + className; + } + }, + removeClass(element, className) { + if (element.classList) + element.classList.remove(className); + else + element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); + }, + hasClass(element, className) { + if (element.classList) + return element.classList.contains(className); + else + return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className); } }, components: { diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue index f50b47a17..4989c2054 100755 --- a/src/AppConfigurator.vue +++ b/src/AppConfigurator.vue @@ -12,7 +12,64 @@

FREE THEMES

Built-in component themes created by the PrimeVue Theme Designer.

+
+
+ + Saga-Blue +
+
+ + Saga-Green +
+
+ + Saga-Purple +
+
+ + Saga-Orange +
+
+ + Vela-Blue +
+
+ + Vela-Green +
+
+ + Vela-Purple +
+
+ + Vela-Orange +
Luna-Blue
Luna-Green
Luna-Amber
Luna-Pink @@ -130,10 +187,12 @@ import DomHandler from './components/utils/DomHandler'; export default { + props: { + theme: String + }, data() { return { - active: false, - theme: 'nova-light' + active: false } }, outsideClickListener: null, @@ -166,20 +225,7 @@ export default { event.preventDefault(); }, changeTheme(event, theme, dark) { - let themeElement = document.getElementById('theme-link'); - themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme)); - this.theme = theme; - const hasBodyDarkTheme = DomHandler.hasClass(document.body, 'dark-theme'); - - if (dark) { - if (!hasBodyDarkTheme) { - this.addClass(document.body, 'dark-theme'); - } - } - else if(hasBodyDarkTheme) { - this.removeClass(document.body, 'dark-theme'); - } - + this.$emit('change-theme', {theme: theme, dark: dark}); event.preventDefault(); }, bindOutsideClickListener() { @@ -200,7 +246,7 @@ export default { }, isOutsideClicked(event) { return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target)); - }, + } } } diff --git a/src/AppFooter.vue b/src/AppFooter.vue index 4f7553318..ee76a2409 100755 --- a/src/AppFooter.vue +++ b/src/AppFooter.vue @@ -1,9 +1,5 @@ \ No newline at end of file diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue index 519120c5b..2a50925a6 100755 --- a/src/AppTopBar.vue +++ b/src/AppTopBar.vue @@ -85,47 +85,14 @@ export default { }, data() { return { - theme: 'saga-blue', activeMenuIndex: null } }, methods: { changeTheme(event, theme, dark) { - let themeElement = document.getElementById('theme-link'); - themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme)); - this.theme = theme; - - if (dark) { - this.addClass(document.body, dark); - } - else { - this.removeClass(document.body, 'dark-theme'); - this.removeClass(document.body, 'dark-theme-alt'); - } - - this.activeMenuIndex = null; + this.$emit('change-theme', {theme: theme, dark: dark}); event.preventDefault(); }, - addClass(element, className) { - if (!this.hasClass(element, className)) { - if (element.classList) - element.classList.add(className); - else - element.className += ' ' + className; - } - }, - removeClass(element, className) { - if (element.classList) - element.classList.remove(className); - else - element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); - }, - hasClass(element, className) { - if (element.classList) - return element.classList.contains(className); - else - return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className); - }, toggleMenu(event, index) { this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index; event.preventDefault(); diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index 8ea123a8c..b4ce87270 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -12,7 +12,7 @@ } } -$focusBorderColor:#8dcdff; +$focusBorderColor:#b6daf2; html { font-size: 14px; @@ -44,7 +44,7 @@ input[type="number"] { a { text-decoration: none; - color: #4eafe6; + color: #2874A6; } .layout-news { @@ -351,7 +351,7 @@ a { height: calc(100% - 70px); background-color: #ffffff; overflow: auto; - width: 280px; + width: 250px; box-shadow: 0 0 2px rgba(0,0,0,0.25); .layout-menu { @@ -457,7 +457,7 @@ a { } .layout-content { - margin-left: 280px; + margin-left: 250px; padding-top: 70px; .content-section { @@ -628,13 +628,9 @@ a { } a { - color: #638fb7; - font-weight: 700; + color: #2874A6; + font-weight: 500; transition: color .2s; - - &:hover { - color: #82a5c5; - } } .btn-viewsource { @@ -790,31 +786,10 @@ a { .layout-footer { font-size: 14px; - color: #84939f; - - span a { - margin-left: 0; - } - - .footer-links { - float: right; - font-size: 24px; - } a { - margin-left: 16px; - } - - .icon-github { - width: 29.1px; - height: 29.1px; - color:#20272a - } - - .icon-twitter { - width: 29.1px; - height: 29.1px; - color:#20272a + color: #495057; + font-weight: 600; } } @@ -886,13 +861,9 @@ a { } a { - color: #638fb7; - font-weight: 700; + color: #2874A6; transition: color .2s; - - &:hover { - color: #82a5c5; - } + font-weight: 500; } .layout-config-content { @@ -953,8 +924,13 @@ a { color: #495057; background-color: #ffffff; - p { - color: #727272; + img { + width: 50px; + border-radius: 4px; + } + + span { + font-size: 13px; } } @@ -962,13 +938,10 @@ a { box-shadow: 0 0 0 0.2em $focusBorderColor; } - img { - width: 100%; - } - button { - text-align: center; position: relative; + display: inline-flex; + justify-content: center; transition: box-shadow .2s; i { @@ -1001,6 +974,10 @@ a { p { color: #d8d8d8; } + + img { + width: 100%; + } } } @@ -1030,12 +1007,9 @@ a { margin-bottom: 2em; } a { - color: #638fb7; + color: #2E86C1; + font-weight: 500; transition: color .2s; - - &:hover { - color: #82a5c5; - } } .home-button {