feat: Color Theme page UI + color picker + toggle

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

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,

client/js/components/color-picker.vue

@@ -1,14 +1,40 @@
 <template lang="pug">
-  p.control
+  .colorpicker
-    input.input(type='text', placeholder='#F0F0F0', v-model='color')
+    .colorpicker-choice(v-for='color in colors', :class='["is-" + color, color === currentColor ? "is-active" : ""]', @click='setColor(color)')
 </template>
 
 <script>
   export default {
     name: 'color-picker',
+    props: ['currentColor'],
     data () {
       return {
-        color: '000000'
+        colors: [
+          'red',
+          'pink',
+          'purple',
+          'deep-purple',
+          'indigo',
+          'blue',
+          'light-blue',
+          'cyan',
+          'teal',
+          'green',
+          'light-green',
+          'lime',
+          'yellow',
+          'amber',
+          'orange',
+          'deep-orange',
+          'brown',
+          'grey',
+          'blue-grey'
+        ]
+      }
+    },
+    methods: {
+      setColor(color) {
+        this.currentColor = color
       }
     }
   }

client/js/components/toggle.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  .toggle(:class='{ "is-active": currentValue }', @click='changeToggle')
+    .toggle-container
+      .toggle-pin
+    .toggle-text {{ desc }}
+</template>
+
+<script>
+  export default {
+    name: 'toggle',
+    props: ['currentValue', 'desc'],
+    data () {
+      return { }
+    },
+    methods: {
+      changeToggle() {
+        this.currentValue = !this.currentValue
+      }
+    }
+  }
+</script>

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';

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');
+        }
+      }
+    }
+
+  }
+
+}

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;
+    }
+  }
+
+}

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",

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
+      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')