From 00da4e3e05c85b3ebd2fbd39a1db6a3303d3aa7f Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sat, 24 Jun 2017 22:45:23 -0400 Subject: [PATCH] feat: Color Theme page UI + color picker + toggle --- CHANGELOG.md | 2 + client/js/app.js | 2 + client/js/components/color-picker.vue | 32 ++++++++++++-- client/js/components/toggle.vue | 21 ++++++++++ client/scss/app.scss | 2 + client/scss/components/color-picker.scss | 32 ++++++++++++++ client/scss/components/toggle.scss | 53 ++++++++++++++++++++++++ server/locales/en/admin.json | 6 +++ server/views/pages/admin/theme.pug | 22 ++++++---- 9 files changed, 161 insertions(+), 11 deletions(-) create mode 100644 client/js/components/toggle.vue create mode 100644 client/scss/components/color-picker.scss create mode 100644 client/scss/components/toggle.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index dc1577f5..78a03c53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,10 +4,12 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [v1.0.0-beta.13] - Unreleased ### Added +- **Editor**: Linebreaks are now rendered, can be disabled via config option - **History**: History section to list all changes - **Security**: Optional Two-Factor Authentication protection ### Changed +- **Editor**: TeX and MathML is now rendered server-side to SVG - **UI**: Updated icons to Nucleo icon set ### Fixed diff --git a/client/js/app.js b/client/js/app.js index 75f43a30..f2a1e8f5 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -75,6 +75,7 @@ import modalProfile2faComponent from './components/modal-profile-2fa.vue' import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue' import pageLoaderComponent from './components/page-loader.vue' import searchComponent from './components/search.vue' +import toggleComponent from './components/toggle.vue' import treeComponent from './components/tree.vue' import adminEditUserComponent from './pages/admin-edit-user.component.js' @@ -189,6 +190,7 @@ $(() => { pageLoader: pageLoaderComponent, search: searchComponent, sourceView: sourceViewComponent, + toggle: toggleComponent, tree: treeComponent }, store, diff --git a/client/js/components/color-picker.vue b/client/js/components/color-picker.vue index 5e41a7f9..3f180e63 100644 --- a/client/js/components/color-picker.vue +++ b/client/js/components/color-picker.vue @@ -1,14 +1,40 @@ diff --git a/client/scss/app.scss b/client/scss/app.scss index e59fc66c..36cb4690 100644 --- a/client/scss/app.scss +++ b/client/scss/app.scss @@ -14,6 +14,7 @@ $primary: 'indigo'; @import 'components/alert'; @import 'components/button'; @import 'components/collapsable-nav'; +@import 'components/color-picker'; @import 'components/footer'; @import 'components/form'; @import 'components/grid'; @@ -25,6 +26,7 @@ $primary: 'indigo'; @import 'components/search'; @import 'components/sidebar'; @import 'components/table'; +@import 'components/toggle'; @import 'components/typography'; @import 'libs/nucleo-icons'; diff --git a/client/scss/components/color-picker.scss b/client/scss/components/color-picker.scss new file mode 100644 index 00000000..28f2e958 --- /dev/null +++ b/client/scss/components/color-picker.scss @@ -0,0 +1,32 @@ +.colorpicker { + display: flex; + align-items: center; + height: 60px; + + &-choice { + width: 50px; + height: 50px; + border: 1px solid #FFF; + transition: all .2s ease; + cursor: pointer; + + &.is-active, &:hover { + border-width: 5px; + width: 60px; + height: 60px; + } + + @each $color, $colorvalue in $material-colors { + &.is-#{$color} { + background-color: mc($color, '500'); + border-color: mc($color,'500'); + + &.is-active, &:hover { + border-color: mc($color,'300'); + } + } + } + + } + +} diff --git a/client/scss/components/toggle.scss b/client/scss/components/toggle.scss new file mode 100644 index 00000000..dbfec4df --- /dev/null +++ b/client/scss/components/toggle.scss @@ -0,0 +1,53 @@ +.toggle { + display: inline-flex; + align-items: center; + height: 24px; + cursor: pointer; + margin: 5px 5px 5px 0; + + & + & { + margin-left: 15px; + } + + &-container { + display: inline-flex; + align-items: center; + height: 24px; + width: 50px; + background-color: mc('grey', '300'); + border-radius: 12px; + padding: 2px; + transition: background-color .5s ease; + } + + &-pin { + display: flex; + background-color: #FFF; + border-radius:10px; + height: 20px; + width: 20px; + transition: all .5s ease; + } + + &-text { + padding-left: 10px; + color: mc('grey', '700'); + font-size: 12px; + } + + &:hover { + .toggle-container { + background-color: mc('grey', '400'); + } + } + + &.is-active { + .toggle-container { + background-color: mc('indigo', '500'); + } + .toggle-pin { + margin-left: 28px; + } + } + +} diff --git a/server/locales/en/admin.json b/server/locales/en/admin.json index 47bddd81..7268974a 100644 --- a/server/locales/en/admin.json +++ b/server/locales/en/admin.json @@ -42,6 +42,12 @@ "system": { "subtitle": "Information on Wiki.js and troubleshooting tools" }, + "theme": { + "subtitle": "Customize the appearance of your wiki", + "primarycolor": "Primary Color", + "altcolor": "Secondary Color", + "codeblock": "Code Blocks" + }, "users": { "createauthorize": "Create / Authorize User", "subtitle": "Manage users and access rights", diff --git a/server/views/pages/admin/theme.pug b/server/views/pages/admin/theme.pug index 301f9d8d..24b356f7 100644 --- a/server/views/pages/admin/theme.pug +++ b/server/views/pages/admin/theme.pug @@ -1,11 +1,17 @@ extends ./_layout.pug block adminContent - #page-type-admin-settings - .hero - h1.title#title= t('nav.theme') - h2.subtitle= t('admin:theme.subtitle') - .form-sections - section - label.label= t('admin:theme.primarycolor') - color-picker + .hero + h1.title#title= t('nav.theme') + h2.subtitle= t('admin:theme.subtitle') + .form-sections + section + label.label= t('admin:theme.primarycolor') + color-picker(current-color='indigo') + section + label.label= t('admin:theme.altcolor') + color-picker(current-color='blue-grey') + section + label.label= t('admin:theme.codeblock') + toggle(current-value='dark', desc='Use Dark Theme') + toggle(current-value='dark', desc='Colorize code syntax')