Merge branch 'master' into hotfix/checkboxes

2026-04-19 22:51:02 +02:00 · 2018-11-03 13:34:21 +01:00
parent 425f22f76b c87719602a
commit fbc8d695b9
29 changed files with 277 additions and 46 deletions
--- a/assets/js/Components/Admin/Toolbar.vue
+++ b/assets/js/Components/Admin/Toolbar.vue
@@ -13,12 +13,6 @@
        <li><a href="https://docs.bolt.cm/" target="_blank">Bolt Documentation</a></li>      
      </ul>
    </div>
-    <div class="toolbar--item is-site">
-      <i class="fas fa-globe-americas mr-2"></i>{{siteName}}
-      <ul class="toolbar--menu">
-        <li><a href="/" target="_blank">Visit Site</a></li>        
-      </ul>
-    </div>
    <div class="toolbar--item is-new">
      <i class="fas fa-magic mr-2"></i>Create New
      <ul class="toolbar--menu">
@@ -31,6 +25,9 @@
        </li>          
      </ul>
    </div>
+    <div class="toolbar--item is-site">
+      <a href="/" target="_blank"><i class="fas fa-globe-americas mr-2"></i>{{siteName}}</a>
+    </div>
    <div class="toolbar--item is-profile">
      <i class="fas fa-user mr-2"></i>Hey {{user}}
      <ul class="toolbar--menu">
@@ -42,11 +39,21 @@
 </template>

 <script>
-var tinycolor = require("tinycolor2");
+const tinycolor = require("tinycolor2");

 module.exports = {
  name: "admin-toolbar",
  props: ["siteName", "menu", "user"],
+  data: () => {
+    return {
+      get token() {
+        return localStorage.getItem('token') || 0;
+      },
+      set token(value) {
+        localStorage.setItem('token', value);
+      }
+    };
+  },
  computed:{
    contrast(){
      const color = getComputedStyle(document.body).getPropertyValue('--admin-toolbar');
--- a/assets/js/Components/Editor/Partials/Helper.vue
+++ b/assets/js/Components/Editor/Partials/Helper.vue
--- a/assets/js/Components/Editor/Partials/Label.vue
+++ b/assets/js/Components/Editor/Partials/Label.vue
--- a/assets/js/Components/Editor/Slug.vue
+++ b/assets/js/Components/Editor/Slug.vue
@@ -56,8 +56,18 @@ export default {
      icon: 'lock'
    };
  },
+  mounted(){
+    setTimeout(()=>{ 
+      const title = document.querySelector(`input[name='fields[${this.generate}]']`).value;
+      if(title.length <= 0){
+        this.$root.$emit('generate-from-title', true);
+      }
+    }, 0);
+    this.$root.$on('slugify-from-title', data => this.generateSlug());
+  },
  methods: {
    editSlug(){
+      this.$root.$emit('generate-from-title', false);
      if(!this.edit){
        this.edit = true;
        this.buttonText = "Edit"
@@ -74,6 +84,7 @@ export default {
      const title = document.querySelector(`input[name='fields[${this.generate}]']`).value;
      const slug = this.$options.filters.slugify(title)
      this.val = slug;
+      this.$root.$emit('generate-from-title', true);
    }
  }
 };
--- a/assets/js/Components/Editor/Text.vue
+++ b/assets/js/Components/Editor/Text.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="form-group">
+    <label>{{ label }}</label>
+    <input
+      class="form-control" 
+      :class="type"
+      :name="name" 
+      placeholder="…" 
+      type="text" 
+      v-model="val" 
+    >
+  </div>
+</template>
+
+<script>
+import field from '../../helpers/mixins/fieldValue';
+
+export default {
+  name: "editor-text",
+  props: ['value', 'label', 'name', 'type'],
+  mixins: [field],
+  mounted() {
+    this.$root.$on('generate-from-title', data => this.generate = data);
+  },
+  data: () => {
+    return {
+      generate: false
+    };
+  },
+  watch: {
+    val(){
+      if(this.generate){
+        this.$root.$emit('slugify-from-title');
+      }
+    }
+  }
+};
+</script>
--- a/assets/js/Components/Listing/Row.vue
+++ b/assets/js/Components/Listing/Row.vue
@@ -26,10 +26,10 @@
       <li>
          <a :href="`/bolt/edit/${id}`" class="link">
            <div class="btn-group">
-              <button class="btn btn-secondary btn-sm" type="button">
+              <button class="btn btn-grey btn-block btn-sm" type="button">
                <i class="far fa-edit mr-1"></i> Edit
              </button>
-              <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <button type="button" class="btn btn-sm btn-grey dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <div class="dropdown-menu dropdown-menu-right">
--- a/assets/js/Components/User/Theme.vue
+++ b/assets/js/Components/User/Theme.vue
@@ -0,0 +1,44 @@
+<template>
+  <section class="user__theme">
+    <h3>Themes:</h3>
+    <ul class="user__theme--themes">
+      <li v-for="(theme, index) in themes" :key="index" class="theme" @click="selectTheme(theme.value)">
+        <h5 class="theme--name">{{theme.name}}</h5>
+        <div class="theme--palette">
+          <span v-for="(color, index) in theme.colors" :key="index" :style="`background-color: ${color}`"></span>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "user-theme",
+  data: () => {
+    return {
+      themes: [
+        {
+          name: "Default",
+          value: "default",
+          colors: ["#1a5597", "#053b79", "#0c223b", "#ffffff"]
+        },
+        {
+          name: "Light",
+          value: "light",
+          colors: ["#1a5597", "#053b79", "#ffffff", "#f9f9f9"]
+        },
+      ]
+    };
+  },
+  methods:{
+    selectTheme(val){
+      const stylesheet = document.querySelector('#theme');
+      const url = stylesheet.getAttribute('href').split("theme-")[0];
+      const theme = `${url}theme-${val}.css`;
+      stylesheet.setAttribute("href", theme);
+    },
+  }
+};
+</script>
--- a/assets/js/Views/admin.js
+++ b/assets/js/Views/admin.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 /**
- * Editor Components
+ * Components
 */
 import Toolbar from "../Components/Admin/Toolbar";
 import Sidebar from "../Components/Admin/Sidebar";
--- a/assets/js/Views/editor.js
+++ b/assets/js/Views/editor.js
@@ -1,17 +1,19 @@
 import Vue from "vue";
 /**
- * Editor Components
+ * Components
 */
-import Slug from "../Components/Editor/Slug.vue";
-import Textarea from "../Components/Editor/Textarea.vue";
-import Markdown from "../Components/Editor/Markdown.vue";
-import Html from "../Components/Editor/Html.vue";
-import DateTime from "../Components/Editor/DateTime.vue";
-import Select from "../Components/Editor/Select.vue";
-import Image from "../Components/Editor/Image.vue";
+import Text from "../Components/Editor/Text";
+import Slug from "../Components/Editor/Slug";
+import Textarea from "../Components/Editor/Textarea";
+import Markdown from "../Components/Editor/Markdown";
+import Html from "../Components/Editor/Html";
+import DateTime from "../Components/Editor/DateTime";
+import Select from "../Components/Editor/Select";
+import Image from "../Components/Editor/Image";
 /**
 * Register Components
 */
+Vue.component("editor-text", Text);
 Vue.component("editor-slug", Slug);
 Vue.component("editor-textarea", Textarea);
 Vue.component("editor-markdown", Markdown);
--- a/assets/js/Views/listing.js
+++ b/assets/js/Views/listing.js
@@ -4,7 +4,7 @@ import Vue from "vue";
 */
 import draggable from 'vuedraggable'
 /**
- * Editor Components
+ * Components
 */
 import Filter from "../Components/Listing/Filter";
 import Row from "../Components/Listing/Row";
--- a/assets/js/Views/user.js
+++ b/assets/js/Views/user.js
@@ -0,0 +1,13 @@
+import Vue from "vue";
+/**
+ * Components
+ */
+import Theme from "../Components/User/Theme";
+
+
+/**
+ * Register Components
+ */
+Vue.component("user-theme", Theme);
+
+new Vue({ el: "#user", name: "user" });
--- a/assets/js/bolt.js
+++ b/assets/js/bolt.js
@@ -36,6 +36,7 @@ window.jQuery = $;
 import "./Views/admin";
 import "./Views/listing";
 import "./Views/editor";
+import "./Views/user";

 /**
 * Styling
--- a/assets/scss/init/_mixins.scss
+++ b/assets/scss/init/_mixins.scss
@@ -25,7 +25,7 @@
  // focus
  &:focus,
  &.focus {
-    box-shadow: 0 0 0 $btn-focus-width var(--#{$color}-300);
+    box-shadow: 0 0 0 $input-btn-focus-width var(--#{$color}-200);     
  }

  // disabled
@@ -41,7 +41,7 @@
    background-color: var(--#{$color}-600);
    border-color: var(--#{$color}-600);
    &:focus {
-      box-shadow: 0 0 0 $btn-focus-width var(--#{$color}-300);
+      box-shadow: 0 0 0 $input-btn-focus-width var(--#{$color}-200);
    }
  }
 }
@@ -59,7 +59,7 @@
  // focus
  &:focus,
  &.focus{
-    box-shadow: 0 0 0 $btn-focus-width var(--#{$color}-300);
+    box-shadow: 0 0 0 $btn-focus-width var(--#{$color}-200);
  }

  // disabled
@@ -88,7 +88,7 @@
  --#{$color}-s: #{$s};
  --#{$color}-l: #{$l};
  --#{$color}-100: hsl(var(--#{$color}-h), var(--#{$color}-s), calc(var(--#{$color}-l) * 2.3));
-  --#{$color}-200: hsl(var(--#{$color}-h), var(--#{$color}-s), calc(var(--#{$color}-l) * 2));
+  --#{$color}-200: hsl(var(--#{$color}-h), calc(var(--#{$color}-s) / 1.75), calc(var(--#{$color}-l) * 2.2));
  --#{$color}-300: hsl(var(--#{$color}-h), var(--#{$color}-s), calc(var(--#{$color}-l) * 1.75));
  --#{$color}-400: hsl(var(--#{$color}-h), var(--#{$color}-s), calc(var(--#{$color}-l) * 1.25));
  --#{$color}: hsl(var(--#{$color}-h), var(--#{$color}-s), var(--#{$color}-l));
--- a/assets/scss/modules/admin/_sidebar.scss
+++ b/assets/scss/modules/admin/_sidebar.scss
@@ -6,7 +6,7 @@
  background: var(--admin-sidebar);
  color: var(--admin-sidebar-text);
  height: 100%;
-  box-shadow: 0 0 40px 0 rgba(0,0,0, 0.07);
+  // box-shadow: 0 0 40px 0 rgba(0,0,0, 0.07);
  &--separator {
    padding: 0 $spacer;
    margin: $spacer / 2 0;
@@ -67,6 +67,7 @@
      transition: $transition-base;
      transform-origin: center;
      color: var(--admin-sidebar-icon);
+      font-weight: $font-weight-bold;
      width: 22px;
      opacity: 0.5;
    }
--- a/assets/scss/modules/admin/_toolbar.scss
+++ b/assets/scss/modules/admin/_toolbar.scss
@@ -37,6 +37,9 @@
    i{
      font-size: 120%;
    }
+    a:hover{
+      text-decoration: none;
+    }
    &.is-brand{
      svg {
        height: $admin-toolbar-height / 1.5;
@@ -44,14 +47,18 @@

      }
    }
-    &.is-profile{
-      margin-left: auto;
-      padding: 0 $spacer;
+    &.is-site, &.is-profile{
      .toolbar--menu{
        left: auto;
        right: 0;
      }
    }
+    &.is-site{
+      margin-left: auto;
+    }
+    &.is-profile{
+      padding: 0 $spacer;
+    }
    &:hover{
      opacity: 1;
      @include darken(--admin-toolbar, 0.2);
--- a/assets/scss/modules/editor/_tabbar.scss
+++ b/assets/scss/modules/editor/_tabbar.scss
@@ -19,6 +19,7 @@
      content: '';
    }
    span{
+      font-size: 95%;
      transition: $transition-base;
      display: block;
      pointer-events: none;
@@ -35,4 +36,7 @@
      }
    }
  }
+  .nav-link{
+    padding: $spacer / 2 $spacer / 1.5;
+  }
 }
--- a/assets/scss/modules/modules.scss
+++ b/assets/scss/modules/modules.scss
@@ -5,3 +5,4 @@
@import './listing/listing';
@import './editor/editor';
@import './fields/fields';
+@import './user/user';
--- a/assets/scss/modules/user/_theme.scss
+++ b/assets/scss/modules/user/_theme.scss
@@ -0,0 +1,40 @@
+//** User | Theme
+
+.user__theme{
+  margin: $spacer 0;
+  &--themes{
+    margin: $spacer 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.theme{
+  flex: 0 0 33%;
+  padding: 0 $spacer / 2;
+  margin-bottom: $spacer;
+  &--name{
+    font-size: 100%;
+    font-weight: $font-weight-bold;
+  }
+  &--palette{
+    background: var(--body-300);
+    border-radius: $border-radius;
+    height: 25px;
+    width: 100%;
+    display: flex;
+    box-shadow: $card-box-shadow;
+    span{
+      height: 100%;
+      flex: auto;
+      &:first-child{
+        border-radius: $border-radius 0 0 $border-radius;
+      }
+      &:last-child{
+        border-radius: 0 $border-radius $border-radius 0;
+      }
+    }
+  }
+}
--- a/assets/scss/modules/user/user.scss
+++ b/assets/scss/modules/user/user.scss
@@ -0,0 +1,3 @@
+//** User
+
+@import '_theme';
--- a/assets/scss/themes/default.scss
+++ b/assets/scss/themes/default.scss
@@ -16,19 +16,20 @@
  --admin-sidebar:            #0c223b;
  --admin-sidebar-text:       #ffffff;
  --admin-sidebar-icon:       #ffffff;
-  --admin-sidebar-menu:       #0c223b;
+  --admin-sidebar-menu:       #0a1d32;
  --admin-sidebar-menu-text:  #ffffff;

-  --admin-toolbar:            #053b79;
+  --admin-toolbar:            #053b7a;
  --admin-toolbar-text-light: #ffffff;
  --admin-toolbar-text-dark:  #0c223b;
  

-  @include                    generate-color(primary, 235, 42%, 37%);
+  @include                    generate-color(primary, 212, 70%, 35%);
  @include                    generate-color(secondary, 212, 90%, 25%);

  @include                    generate-color(body, 212, 66%, 14%);
  @include                    generate-color(shade, 208, 13%, 43%);
+  @include                    generate-color(grey, 251, 20%, 92%);
  
  @include                    generate-color(success, 152, 92%, 38%);
  @include                    generate-color(danger, 350, 73%, 50%);
@@ -38,8 +39,7 @@
 $bootstrap-colors: (
  "primary",
  "secondary",
-  "body",
-  "shade",
+  "grey",
  "success",
  "danger"
 );
--- a/assets/scss/themes/light.scss
+++ b/assets/scss/themes/light.scss
@@ -0,0 +1,47 @@
+//** Theme | Default
+
+@import '../init/mixins';
+@import '_shared';
+
+:root{
+
+  --background:               #f3f5f7;
+  --foreground:               #ffffff;
+
+  --status-published:         #08b883;
+  --status-draft:             #1078da;
+  --status-held:              #dd2443;
+  --status-timed:             #741ce6;
+
+  --admin-sidebar:            #ffffff;
+  --admin-sidebar-text:       #0c223b;
+  --admin-sidebar-icon:       #053b7a;
+  --admin-sidebar-menu:       #053b7a;
+  --admin-sidebar-menu-text:  #ffffff;
+
+  --admin-toolbar:            #ffffff;
+  --admin-toolbar-text-light: #ffffff;
+  --admin-toolbar-text-dark:  #0c223b;
+  
+
+  @include                    generate-color(primary, 212, 70%, 35%);
+  @include                    generate-color(secondary, 212, 90%, 25%);
+
+  @include                    generate-color(body, 212, 66%, 14%);
+  @include                    generate-color(shade, 208, 13%, 43%);
+  @include                    generate-color(grey, 251, 20%, 92%);
+  
+  @include                    generate-color(success, 152, 92%, 38%);
+  @include                    generate-color(danger, 350, 73%, 50%);
+
+}
+
+$bootstrap-colors: (
+  "primary",
+  "secondary",
+  "grey",
+  "success",
+  "danger"
+);
+
+@import '_bootstrap';
--- a/assets/scss/vendor/bootstrap/_overrides.scss
+++ b/assets/scss/vendor/bootstrap/_overrides.scss
@@ -25,7 +25,7 @@ $custom-control-indicator-active-bg:    var(--primary-400);
 $custom-range-thumb-active-bg:          var(--primary-400);

 $input-btn-focus-width:                 0.15rem;
-$input-btn-focus-box-shadow:            0 0 0 $input-btn-focus-width var(--primary-300);
+$input-btn-focus-box-shadow:            0 0 0 $input-btn-focus-width var(--primary-200);

 // Cards

--- a/package-lock.json
+++ b/package-lock.json
@@ -3533,6 +3533,11 @@
      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
      "dev": true
    },
+    "barba.js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/barba.js/-/barba.js-1.0.0.tgz",
+      "integrity": "sha1-PB1zWPDT+HcZyxvbd1vkF8knP30="
+    },
    "base": {
      "version": "0.11.2",
      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
    "@babel/polyfill": "^7.0.0",
    "axios": "^0.18.0",
    "baguettebox.js": "^1.11.0",
+    "barba.js": "^1.0.0",
    "bootstrap": "^4.1.3",
    "codemirror": "^5.40.2",
    "jquery": "^3.3.1",
--- a/templates/_base/layout.twig
+++ b/templates/_base/layout.twig
@@ -11,7 +11,7 @@
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/bolt.css') }}">
    {% set backendTheme = 'assets/theme-' ~ user.backendTheme|default('default') ~ '.css' %}
-    <link rel="stylesheet" type="text/css" href="{{ asset(backendTheme) }}">
+    <link id="theme" rel="stylesheet" type="text/css" href="{{ asset(backendTheme) }}">
    {% endblock %}
 </head>

--- a/templates/editcontent/fields/date.twig
+++ b/templates/editcontent/fields/date.twig
@@ -13,7 +13,7 @@
        {% set value = value|date(format='c') %}
    {% endif %}

-    <editor-date
+    <editor-datetime
        :value="'{{ value }}'"
        :label="'{{ label }}'"
        :name="'{{ name }}'"
--- a/templates/editcontent/fields/text.twig
+++ b/templates/editcontent/fields/text.twig
@@ -1,6 +1,10 @@
 {% extends '@bolt/editcontent/fields/_base.twig' %}

 {% block field %}
-    <label>{{ label }}</label>
-    <input name="{{ name }}" placeholder="…" type="text" value="{{ value }}" class="{{ class }}" {{ attributes|default()|raw }}>
+    <editor-text
+        :value="{{ value|json_encode() }}"
+        :label="'{{ label }}'"
+        :name="'{{ name }}'"
+        :type="'{{ class }}'"
+    ></editor-text>
 {% endblock %}
--- a/templates/users/edit.twig
+++ b/templates/users/edit.twig
@@ -7,15 +7,16 @@
 {% block body_id 'user_edit' %}

 {% block main %}
-
-    {% form_theme form 'bootstrap_4_layout.html.twig' %}
-    {{ form_start(form) }}
-    {{ form_widget(form) }}
-    <button type="submit" class="btn btn-primary">
-        <i class="fa fa-save" aria-hidden="true"></i> {{ 'action.save'|trans }}
-    </button>
-    {{ form_end(form) }}
-
+    <div id="user">
+        {% form_theme form 'bootstrap_4_layout.html.twig' %}
+        {{ form_start(form) }}
+        {{ form_widget(form) }}
+        <button type="submit" class="btn btn-primary">
+            <i class="fa fa-save" aria-hidden="true"></i> {{ 'action.save'|trans }}
+        </button>
+        {{ form_end(form) }}
+        <user-theme></user-theme>
+    </div>
 {% endblock %}

 {% block aside %}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,7 @@ Encore
  .createSharedEntry('vendor', ['@babel/polyfill'])

  .addStyleEntry('theme-default', './assets/scss/themes/default.scss')
+  .addStyleEntry('theme-light', './assets/scss/themes/light.scss')

  .autoProvidejQuery()
  .enableVueLoader()