From d201b5663e606c0e4dd9b57a2fd1804239ddfa7d Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 17 Sep 2020 11:26:23 +0200
Subject: [PATCH] disabled components

---
 .../App/components/forms/check-list.vue       |  2 +-
 .../App/components/forms/form-header.vue      |  6 ++---
 .../App/components/forms/input-list.vue       |  5 +++++
 zero.Web.UI/App/components/forms/rte.vue      |  2 +-
 .../App/components/modules/edit-module.vue    |  6 ++---
 .../App/components/modules/module-preview.vue |  6 ++++-
 .../App/components/modules/modules-select.vue |  4 ++++
 .../App/components/modules/modules.vue        |  8 +++++--
 zero.Web.UI/App/components/permissions.vue    |  2 +-
 .../dateRangePicker/daterangepicker.vue       |  2 +-
 zero.Web.UI/App/editor/editor-component.vue   |  6 ++++-
 zero.Web.UI/App/editor/editor-overlay.vue     |  4 ++--
 zero.Web.UI/App/editor/editor.vue             | 14 +++++++-----
 zero.Web.UI/App/editor/fields/checklist.vue   |  6 ++++-
 zero.Web.UI/App/editor/fields/colorpicker.vue |  6 ++++-
 .../App/editor/fields/countrypicker.vue       |  6 ++++-
 zero.Web.UI/App/editor/fields/culture.vue     |  2 +-
 zero.Web.UI/App/editor/fields/iconPicker.vue  |  6 ++++-
 zero.Web.UI/App/editor/fields/inputlist.vue   |  6 ++++-
 zero.Web.UI/App/editor/fields/language.vue    |  2 +-
 zero.Web.UI/App/editor/fields/media.vue       |  6 ++++-
 zero.Web.UI/App/editor/fields/modules.vue     |  6 ++++-
 zero.Web.UI/App/editor/fields/nested.vue      |  2 +-
 zero.Web.UI/App/editor/fields/number.vue      |  8 +++++--
 zero.Web.UI/App/editor/fields/rte.vue         |  6 ++++-
 zero.Web.UI/App/editor/fields/select.vue      |  2 +-
 zero.Web.UI/App/editor/fields/state.vue       |  6 ++++-
 zero.Web.UI/App/editor/fields/text.vue        |  8 +++++--
 zero.Web.UI/App/editor/fields/textarea.vue    |  6 ++++-
 zero.Web.UI/App/pages/media/detail.vue        |  2 +-
 .../App/pages/media/overlays/folder.vue       |  4 ++--
 zero.Web.UI/App/pages/media/upload.vue        |  9 ++++++--
 zero.Web.UI/App/pages/pages/page-info.vue     |  8 +++++--
 zero.Web.UI/App/pages/pages/page.vue          |  5 ++++-
 .../App/pages/settings/application.vue        |  2 +-
 zero.Web.UI/App/pages/settings/country.vue    |  2 +-
 zero.Web.UI/App/pages/settings/language.vue   |  2 +-
 zero.Web.UI/App/pages/settings/role.vue       |  2 +-
 .../App/pages/settings/translation.vue        |  4 ++--
 zero.Web.UI/App/pages/settings/user.vue       |  4 ++--
 zero.Web.UI/App/pages/spaces/views/editor.vue |  2 +-
 zero.Web.UI/Sass/Core/_forms.scss             | 22 +++++++++++++++++++
 42 files changed, 163 insertions(+), 56 deletions(-)

diff --git a/zero.Web.UI/App/components/forms/check-list.vue b/zero.Web.UI/App/components/forms/check-list.vue
index a3b2a221..112a0fd6 100644
--- a/zero.Web.UI/App/components/forms/check-list.vue
+++ b/zero.Web.UI/App/components/forms/check-list.vue
@@ -1,7 +1,7 @@
  <template>
   <div class="ui-check-list" :class="{'is-disabled': disabled, 'is-inline': inline }">
     <label v-for="item in list" class="ui-native-check ui-check-list-item">
-      <input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" />
+      <input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" :disabled="disabled" />
       <span class="ui-native-check-toggle"></span>
       <span v-localize="item.name"></span>
     </label>
diff --git a/zero.Web.UI/App/components/forms/form-header.vue b/zero.Web.UI/App/components/forms/form-header.vue
index 6b78bcf6..e4678f89 100644
--- a/zero.Web.UI/App/components/forms/form-header.vue
+++ b/zero.Web.UI/App/components/forms/form-header.vue
@@ -2,16 +2,16 @@
   <ui-header-bar class="ui-form-header" :back-button="true">
     <template v-slot:title>
       <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name}">
-        <input class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled" />
+        <input class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
         <!--<span v-localize="value.name || title"></span>-->
       </h2>
     </template>
     <div class="ui-form-header-aside">
       <slot></slot>
       <div v-if="activeToggle" class="ui-form-header-toggle">
-        <ui-toggle v-model="value.isActive" class="is-primary" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" />
+        <ui-toggle v-model="value.isActive" class="is-primary" off-content="@ui.inactive" :off-warning="true" on-content="@ui.active" :content-left="true" :disabled="disabled" />
       </div>
-      <ui-dropdown v-if="actionsDefined" align="right">
+      <ui-dropdown v-if="actionsDefined && !disabled" align="right">
         <template v-slot:button>
           <ui-button type="light onbg" label="@ui.actions" caret="down" />
         </template>
diff --git a/zero.Web.UI/App/components/forms/input-list.vue b/zero.Web.UI/App/components/forms/input-list.vue
index 588aad61..2bb68a7d 100644
--- a/zero.Web.UI/App/components/forms/input-list.vue
+++ b/zero.Web.UI/App/components/forms/input-list.vue
@@ -103,6 +103,11 @@
       margin-top: 6px;
     }
 
+    .ui-input-list.is-disabled &
+    {
+      background: transparent;
+    }
+
     .ui-input
     {
       border-radius: var(--radius) 0 0 var(--radius);
diff --git a/zero.Web.UI/App/components/forms/rte.vue b/zero.Web.UI/App/components/forms/rte.vue
index 694459ce..8d13b892 100644
--- a/zero.Web.UI/App/components/forms/rte.vue
+++ b/zero.Web.UI/App/components/forms/rte.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-rte">
+  <div class="ui-rte" :disabled="disabled">
     <div ref="editor" :id="id" class="pell" v-show="!raw"></div>
     <div class="pell-raw" v-show="raw">
       <div class="pell-actionbar">
diff --git a/zero.Web.UI/App/components/modules/edit-module.vue b/zero.Web.UI/App/components/modules/edit-module.vue
index 811fdf8e..e840b857 100644
--- a/zero.Web.UI/App/components/modules/edit-module.vue
+++ b/zero.Web.UI/App/components/modules/edit-module.vue
@@ -8,13 +8,13 @@
 
       <template v-slot:footer>
         <ui-button type="light onbg" label="@ui.close" @click="config.hide"></ui-button>
-        <ui-button type="primary" :submit="true" label="Confirm" :state="form.state" :disabled="loading || disabled"></ui-button>
+        <ui-button v-if="!disabled" type="primary" :submit="true" label="Confirm" :state="form.state" :disabled="loading"></ui-button>
       </template>
 
       <ui-loading v-if="loading" :is-big="true" />
 
       <div v-if="!loading" class="ui-module-overlay-editor">
-        <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" />
+        <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
       </div>
 
     </ui-overlay-editor>
@@ -57,7 +57,7 @@
 
         form.load(ModulesApi.getEmpty(this.config.module.alias)).then(response =>
         {
-          this.disabled = !response.meta.canEdit;
+          this.disabled = !response.meta.canEdit || this.config.disabled;
           this.meta = response.meta;
 
           if (this.isAdd)
diff --git a/zero.Web.UI/App/components/modules/module-preview.vue b/zero.Web.UI/App/components/modules/module-preview.vue
index 82dce7da..5eda7488 100644
--- a/zero.Web.UI/App/components/modules/module-preview.vue
+++ b/zero.Web.UI/App/components/modules/module-preview.vue
@@ -11,7 +11,7 @@
 
     <div v-if="!value.isActive" class="ui-module-item-disabled"></div>
 
-    <div class="ui-module-item-actions">
+    <div class="ui-module-item-actions" v-if="!disabled">
       <ui-dropdown align="right">
         <template v-slot:button>
           <ui-icon-button v-if="!value.isActive" class="ui-module-item-disabled-icon" icon="fth-lock" title="Disabled" />
@@ -42,6 +42,10 @@
         type: Array,
         default: () => []
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
 
diff --git a/zero.Web.UI/App/components/modules/modules-select.vue b/zero.Web.UI/App/components/modules/modules-select.vue
index 14958ed0..49386b92 100644
--- a/zero.Web.UI/App/components/modules/modules-select.vue
+++ b/zero.Web.UI/App/components/modules/modules-select.vue
@@ -42,6 +42,10 @@
       types: {
         type: Array,
         default: () => []
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
diff --git a/zero.Web.UI/App/components/modules/modules.vue b/zero.Web.UI/App/components/modules/modules.vue
index 1a4a8254..789bcebf 100644
--- a/zero.Web.UI/App/components/modules/modules.vue
+++ b/zero.Web.UI/App/components/modules/modules.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ui-modules-inner">
     <div v-if="items.length" class="ui-modules-inner-sortable" v-sortable="{ onUpdate: onSortingUpdated }">
-      <ui-module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" />
+      <ui-module-preview v-for="item in items" :key="item.id" :types="moduleTypes" :value="item" @edit="edit" @remove="remove" :disabled="disabled" />
     </div>
     <ui-modules-select ref="moduleSelect" :types="moduleTypes" :value="value" v-if="canAdd" @selected="onAdd" />
   </div>
@@ -22,6 +22,10 @@
         type: Array,
         default: () => []
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
 
@@ -43,7 +47,7 @@
     computed: {
       canAdd()
       {
-        return true;
+        return !this.disabled;
       }
     },
 
diff --git a/zero.Web.UI/App/components/permissions.vue b/zero.Web.UI/App/components/permissions.vue
index bda196c9..2a2cc024 100644
--- a/zero.Web.UI/App/components/permissions.vue
+++ b/zero.Web.UI/App/components/permissions.vue
@@ -7,7 +7,7 @@
           <ui-toggle v-if="permission.valueType === 'boolean'" :disabled="disabled" v-model="permission.value" @input="onChange" />
           <div class="ui-permissions-crud" v-if="permission.valueType === 'crud'">
             <ui-toggle :value="permission.value != 'none'" :disabled="disabled" @input="onPermissionToggle($event, permission)" />
-            <ui-check-list :value="permission.value.split(',')" :items="stateItems" v-if="permission.value != 'none'" :inline="true" @input="onPermissionCRUDChecked($event, permission)" />
+            <ui-check-list :value="permission.value.split(',')" :items="stateItems" v-if="permission.value != 'none'" :inline="true" @input="onPermissionCRUDChecked($event, permission)" :disabled="disabled" />
           </div>
           <!--<input v-if="permission.valueType === 'string'" :disabled="disabled" v-model="permission.value" type="text" class="ui-input" @input="onChange" />-->
         </ui-property>
diff --git a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
index 8086f1ae..55a9cd53 100644
--- a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
+++ b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-daterangepicker" :class="{'is-disabled': disabled }">
-    <button type="button" class="ui-link" @click="schedule" v-localize="scheduleLocalize"></button>
+    <button type="button" class="ui-link" @click="schedule" v-localize="scheduleLocalize" :disabled="disabled"></button>
   </div>
 </template>
 
diff --git a/zero.Web.UI/App/editor/editor-component.vue b/zero.Web.UI/App/editor/editor-component.vue
index 0aa3bfa4..64b5cebb 100644
--- a/zero.Web.UI/App/editor/editor-component.vue
+++ b/zero.Web.UI/App/editor/editor-component.vue
@@ -39,6 +39,10 @@
       depth: {
         type: Number,
         default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -91,7 +95,7 @@
       },
       isDisabled()
       {
-        return (typeof this.config.disabled === 'boolean' && this.config.disabled) || (typeof this.config.disabled === 'function' && this.config.disabled(this.value));
+        return this.disabled || (typeof this.config.disabled === 'boolean' && this.config.disabled) || (typeof this.config.disabled === 'function' && this.config.disabled(this.value));
       },
       isStatic()
       {
diff --git a/zero.Web.UI/App/editor/editor-overlay.vue b/zero.Web.UI/App/editor/editor-overlay.vue
index ccdc66e9..f51f7314 100644
--- a/zero.Web.UI/App/editor/editor-overlay.vue
+++ b/zero.Web.UI/App/editor/editor-overlay.vue
@@ -8,13 +8,13 @@
 
       <template v-slot:footer>
         <ui-button type="light onbg" label="@ui.close" @click="config.hide"></ui-button>
-        <ui-button type="primary" :submit="true" label="Confirm" :state="form.state" :disabled="loading || disabled"></ui-button>
+        <ui-button v-if="!disabled" type="primary" :submit="true" label="Confirm" :state="form.state" :disabled="loading"></ui-button>
       </template>
 
       <ui-loading v-if="loading" :is-big="true" />
 
       <div v-if="!loading" class="ui-editor-overlay-editor">
-        <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" />
+        <ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
       </div>
 
     </ui-overlay-editor>
diff --git a/zero.Web.UI/App/editor/editor.vue b/zero.Web.UI/App/editor/editor.vue
index 80bb8be5..9cd3bb49 100644
--- a/zero.Web.UI/App/editor/editor.vue
+++ b/zero.Web.UI/App/editor/editor.vue
@@ -2,9 +2,9 @@
   <div>
     <div class="editor-outer" v-if="loaded && !rendererNotFound" :class="{ 'has-tabs': hasTabs, '-infos-aside': !nested, 'is-page': isPage }" :renderer="config">
       <ui-tabs class="editor" :active="activeTab">
-        <ui-tab v-if="!disabled(tab)" class="ui-box" :class="tab.class" :label="tab.label" :count="tab.count(value)" v-for="(tab, index) in tabs" :key="index" :depth="depth" :name="tab.name">
-          <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" :renderer="configuration" v-model="value" @input="onChange" :meta="meta" :depth="depth" />
-          <component v-if="tab.component" :is="tab.component" v-model="value" />
+        <ui-tab v-if="!tabDisabled(tab)" class="ui-box" :class="tab.class" :label="tab.label" :count="tab.count(value)" v-for="(tab, index) in tabs" :key="index" :depth="depth" :name="tab.name">
+          <editor-component v-for="(field, fieldIndex) in tab.fields" :key="fieldIndex" :config="field" :renderer="configuration" v-model="value" @input="onChange" :meta="meta" :depth="depth" :disabled="disabled" />
+          <component v-if="tab.component" :is="tab.component" v-model="value" :disabled="disabled" />
         </ui-tab>
       </ui-tabs>
       <aside v-if="!nested && infos && infos != 'none'" class="editor-infos">
@@ -17,7 +17,7 @@
               <i class="fth-radio"></i>
             </div>
             <ui-property v-if="activeToggle" label="@ui.active" :is-text="true" class="is-toggle">
-              <ui-toggle v-model="value.isActive" class="is-primary" />
+              <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
             </ui-property>
           </slot>
           <slot name="settings-properties"></slot>
@@ -93,6 +93,10 @@
       activeTab: {
         type: Number,
         default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -198,7 +202,7 @@
       },
 
 
-      disabled(tab)
+      tabDisabled(tab)
       {
         if (typeof tab.disabled !== 'function')
         {
diff --git a/zero.Web.UI/App/editor/fields/checklist.vue b/zero.Web.UI/App/editor/fields/checklist.vue
index 3037930e..ea53274c 100644
--- a/zero.Web.UI/App/editor/fields/checklist.vue
+++ b/zero.Web.UI/App/editor/fields/checklist.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-check-list :value="value" @input="$emit('input', $event)" :reverse="config.reverse" :items="config.items" />
+  <ui-check-list :value="value" @input="$emit('input', $event)" :reverse="config.reverse" :items="config.items" :disabled="disabled" />
 </template>
 
 <script>
@@ -9,6 +9,10 @@
         type: Array,
         default: () => []
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
   }
diff --git a/zero.Web.UI/App/editor/fields/colorpicker.vue b/zero.Web.UI/App/editor/fields/colorpicker.vue
index 8d4a4107..cc7f0e9b 100644
--- a/zero.Web.UI/App/editor/fields/colorpicker.vue
+++ b/zero.Web.UI/App/editor/fields/colorpicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-colorpicker :value="value" @input="$emit('input', $event)" />
+  <ui-colorpicker :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>
 
 
@@ -9,6 +9,10 @@
       value: {
         type: String
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/countrypicker.vue b/zero.Web.UI/App/editor/fields/countrypicker.vue
index c768fbe5..27a347e0 100644
--- a/zero.Web.UI/App/editor/fields/countrypicker.vue
+++ b/zero.Web.UI/App/editor/fields/countrypicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="config.limit || 1" />
+  <ui-countrypicker :value="value" @input="$emit('input', $event)" :limit="config.limit || 1" :disabled="disabled" />
 </template>
 
 
@@ -9,6 +9,10 @@
       value: {
         type: [String, Array]
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/culture.vue b/zero.Web.UI/App/editor/fields/culture.vue
index 4c2fb6cf..f84ebb12 100644
--- a/zero.Web.UI/App/editor/fields/culture.vue
+++ b/zero.Web.UI/App/editor/fields/culture.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-native-select">
+  <div class="ui-native-select" :disabled="disabled">
     <select :value="value" @input="$emit('input', $event.target.value)" :disabled="disabled">
       <option v-for="item in items" :value="item.code">{{item.name}}</option>
     </select>
diff --git a/zero.Web.UI/App/editor/fields/iconPicker.vue b/zero.Web.UI/App/editor/fields/iconPicker.vue
index aa86d5dc..12060d33 100644
--- a/zero.Web.UI/App/editor/fields/iconPicker.vue
+++ b/zero.Web.UI/App/editor/fields/iconPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-iconpicker :value="value" @input="$emit('input', $event)" />
+  <ui-iconpicker :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>
 
 
@@ -9,6 +9,10 @@
       value: {
         type: String
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/inputlist.vue b/zero.Web.UI/App/editor/fields/inputlist.vue
index 976144a5..f17c646e 100644
--- a/zero.Web.UI/App/editor/fields/inputlist.vue
+++ b/zero.Web.UI/App/editor/fields/inputlist.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-input-list :value="value" @input="$emit('input', $event)" :add-label="config.addLabel || '@ui.add'" />
+  <ui-input-list :value="value" @input="$emit('input', $event)" :add-label="config.addLabel || '@ui.add'" :disabled="disabled" />
 </template>
 
 <script>
@@ -9,6 +9,10 @@
         type: Array,
         default: () => []
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
   }
diff --git a/zero.Web.UI/App/editor/fields/language.vue b/zero.Web.UI/App/editor/fields/language.vue
index 0e1c3eea..66c3cf9d 100644
--- a/zero.Web.UI/App/editor/fields/language.vue
+++ b/zero.Web.UI/App/editor/fields/language.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-native-select">
+  <div class="ui-native-select" :disabled="disabled">
     <select :value="value" @input="onChange($event)" :disabled="disabled">
       <option :value="null"></option>
       <option v-for="item in items" :value="item.id">{{item.name}}</option>
diff --git a/zero.Web.UI/App/editor/fields/media.vue b/zero.Web.UI/App/editor/fields/media.vue
index 143761a5..a30d63e1 100644
--- a/zero.Web.UI/App/editor/fields/media.vue
+++ b/zero.Web.UI/App/editor/fields/media.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-mediapicker :config="config" :value="value" @input="$emit('input', $event)" />
+  <ui-mediapicker :config="config" :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>
 
 
@@ -10,6 +10,10 @@
         type: [String, Array],
         default: null
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
   }
diff --git a/zero.Web.UI/App/editor/fields/modules.vue b/zero.Web.UI/App/editor/fields/modules.vue
index 7fc6ab65..cd963131 100644
--- a/zero.Web.UI/App/editor/fields/modules.vue
+++ b/zero.Web.UI/App/editor/fields/modules.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-modules :value="value" @input="$emit('input', $event)" :config="config" />
+  <ui-modules :value="value" @input="$emit('input', $event)" :config="config" :disabled="disabled" />
 </template>
 
 
@@ -9,6 +9,10 @@
       value: {
         type: [String, Object, Array]
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/nested.vue b/zero.Web.UI/App/editor/fields/nested.vue
index 7358ca32..0f2d63c2 100644
--- a/zero.Web.UI/App/editor/fields/nested.vue
+++ b/zero.Web.UI/App/editor/fields/nested.vue
@@ -3,7 +3,7 @@
     <div class="ui-pick-previews" v-if="items.length">
       <div v-for="(item, index) in items" class="ui-pick-preview">
         <ui-select-button :icon="config.icon" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
-        <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" />
+        <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" />
       </div>
     </div>
     <ui-select-button v-if="limit > items.length" icon="fth-plus" :label="config.addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
diff --git a/zero.Web.UI/App/editor/fields/number.vue b/zero.Web.UI/App/editor/fields/number.vue
index dea3a754..231dd9a6 100644
--- a/zero.Web.UI/App/editor/fields/number.vue
+++ b/zero.Web.UI/App/editor/fields/number.vue
@@ -1,5 +1,5 @@
 <template>
-  <input :value="value" @input="onChange($event.target.value)" type="text" class="ui-input" v-localize:placeholder="" :maxlength="maxLength" />
+  <input :value="value" @input="onChange($event.target.value)" type="text" class="ui-input" v-localize:placeholder="" :maxlength="maxLength" :disabled="disabled" />
 </template>
 
 
@@ -10,7 +10,11 @@
         type: Number,
         default: null
       },
-      config: Object
+      config: Object,
+      disabled: {
+        type: Boolean,
+        default: false
+      }
     },
 
     computed: {
diff --git a/zero.Web.UI/App/editor/fields/rte.vue b/zero.Web.UI/App/editor/fields/rte.vue
index 65c1148e..1c5dfa4f 100644
--- a/zero.Web.UI/App/editor/fields/rte.vue
+++ b/zero.Web.UI/App/editor/fields/rte.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-rte :value="value" @input="$emit('input', $event)" />
+  <ui-rte :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>
 
 
@@ -10,6 +10,10 @@
         type: String,
         default: null
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/select.vue b/zero.Web.UI/App/editor/fields/select.vue
index 88871373..ef1c0cb5 100644
--- a/zero.Web.UI/App/editor/fields/select.vue
+++ b/zero.Web.UI/App/editor/fields/select.vue
@@ -1,5 +1,5 @@
  <template>
-  <div class="ui-native-select">
+  <div class="ui-native-select" :disabled="disabled">
     <select :value="value" @input="$emit('input', $event.target.value)" :disabled="disabled">
       <option v-for="item in config.items" :value="item.value" v-localize="item.label"></option>
     </select>
diff --git a/zero.Web.UI/App/editor/fields/state.vue b/zero.Web.UI/App/editor/fields/state.vue
index 0b9f52b2..bd838de1 100644
--- a/zero.Web.UI/App/editor/fields/state.vue
+++ b/zero.Web.UI/App/editor/fields/state.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-state-button :items="config.items" :value="value" @input="$emit('input', $event)" />
+  <ui-state-button :items="config.items" :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>
 
 
@@ -9,6 +9,10 @@
       value: {
         type: [ String, Number ]
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
 
diff --git a/zero.Web.UI/App/editor/fields/text.vue b/zero.Web.UI/App/editor/fields/text.vue
index 6f72f0be..9e186990 100644
--- a/zero.Web.UI/App/editor/fields/text.vue
+++ b/zero.Web.UI/App/editor/fields/text.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-box">
-    <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="config.placeholder" :maxlength="maxLength" />
+    <input :value="value" @input="$emit('input', $event.target.value)" type="text" class="ui-input" v-localize:placeholder="config.placeholder" :maxlength="maxLength" :disabled="disabled" />
   </div>
 </template>
 
@@ -12,7 +12,11 @@
         type: String,
         default: null
       },
-      config: Object
+      config: Object,
+      disabled: {
+        type: Boolean,
+        default: false
+      }
     },
 
     computed: {
diff --git a/zero.Web.UI/App/editor/fields/textarea.vue b/zero.Web.UI/App/editor/fields/textarea.vue
index e0b44c83..ef253571 100644
--- a/zero.Web.UI/App/editor/fields/textarea.vue
+++ b/zero.Web.UI/App/editor/fields/textarea.vue
@@ -1,5 +1,5 @@
 <template>
-  <textarea class="ui-textarea" :value="value" @input="$emit('input', $event.target.value)" rows="3"></textarea>
+  <textarea class="ui-textarea" :value="value" @input="$emit('input', $event.target.value)" rows="3" :disabled="disabled"></textarea>
 </template>
 
 
@@ -9,6 +9,10 @@
       value: {
         type: String
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       config: Object
     },
   }
diff --git a/zero.Web.UI/App/pages/media/detail.vue b/zero.Web.UI/App/pages/media/detail.vue
index e5701d7f..c09fdb2a 100644
--- a/zero.Web.UI/App/pages/media/detail.vue
+++ b/zero.Web.UI/App/pages/media/detail.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="mediaitem" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@media.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="media" v-model="model" :meta="meta" :active-toggle="false">
+    <ui-editor config="media" v-model="model" :meta="meta" :active-toggle="false" :disabled="disabled">
       <template v-slot:infos-more>
         <ui-property v-if="model.imageMeta" label="@media.fields.date" :is-text="true">
           <ui-date v-model="model.imageMeta.createdDate" />
diff --git a/zero.Web.UI/App/pages/media/overlays/folder.vue b/zero.Web.UI/App/pages/media/overlays/folder.vue
index be3b5c6f..e5f7c9cc 100644
--- a/zero.Web.UI/App/pages/media/overlays/folder.vue
+++ b/zero.Web.UI/App/pages/media/overlays/folder.vue
@@ -3,7 +3,7 @@
     <h2 class="ui-headline" v-localize="model.id ? '@media.editfolder' : '@media.addfolder'"></h2>
     <div class="mediafolder-items">
       <ui-property :required="true">
-        <input v-model="item.name" type="text" class="ui-input" maxlength="80" v-localize:placeholder="'@media.fields.foldername_placeholder'" :readonly="disabled" />
+        <input v-model="item.name" type="text" class="ui-input" maxlength="80" v-localize:placeholder="'@media.fields.foldername_placeholder'" :disabled="disabled" />
         <ui-error :catch-all="true" />
       </ui-property>
     </div>
@@ -39,7 +39,7 @@
       {
         form.load(!this.model.id ? MediaFolderApi.getEmpty() : MediaFolderApi.getById(this.model.id)).then(response =>
         {
-          this.disabled = false; //!response.canEdit;
+          this.disabled = !response.canEdit;
           this.item = response.entity;
           this.item.parentId = this.model.parentId;
           this.loading = false;
diff --git a/zero.Web.UI/App/pages/media/upload.vue b/zero.Web.UI/App/pages/media/upload.vue
index a077995d..3fbbb228 100644
--- a/zero.Web.UI/App/pages/media/upload.vue
+++ b/zero.Web.UI/App/pages/media/upload.vue
@@ -18,10 +18,10 @@
 
     <div v-if="entity.source">
       <a :href="entity.source" target="_blank" v-if="entity.type === 'image'" class="ui-link media-upload-preview-remove">Open</a>
-      <button type="button" class="ui-link media-upload-preview-remove" @click="removeFile">Remove file</button>
+      <button type="button" class="ui-link media-upload-preview-remove" @click="removeFile" v-if="!disabled">Remove file</button>
     </div>
 
-    <div v-if="!entity.source" class="ui-select-button type-light">
+    <div v-if="!entity.source && !disabled" class="ui-select-button type-light">
       <span class="ui-select-button-icon"><i class="fth-plus"></i></span>
       <content class="ui-select-button-content">
         <strong class="ui-select-button-label">Upload file</strong>
@@ -96,6 +96,11 @@
 
       setFocalPoint(ev)
       {
+        if (this.disabled)
+        {
+          return;
+        }
+
         let image = this.$refs.image.getBoundingClientRect();
         let point = { x: ev.pageX - image.x, y: ev.pageY - image.y };
         const left = +(point.x / image.width).toFixed(2);
diff --git a/zero.Web.UI/App/pages/pages/page-info.vue b/zero.Web.UI/App/pages/pages/page-info.vue
index 6d143cff..e9e41eda 100644
--- a/zero.Web.UI/App/pages/pages/page-info.vue
+++ b/zero.Web.UI/App/pages/pages/page-info.vue
@@ -11,10 +11,10 @@
     <div class="ui-view-box-aside editor-infos">
       <div class="ui-box editor-active-toggle" :class="{'is-active': value.isActive }">
         <ui-property label="@ui.active" :is-text="true" class="is-toggle">
-          <ui-toggle v-model="value.isActive" class="is-primary" />
+          <ui-toggle v-model="value.isActive" class="is-primary" :disabled="disabled" />
         </ui-property>
         <ui-property label="@page.schedule.label" :is-text="true">
-          <ui-daterangepicker :value="{ from: value.publishDate, to: value.unpublishDate }" @input="onRangeChange" :class="{ 'is-primary': value.publishDate || value.unpublishDate }" />
+          <ui-daterangepicker :value="{ from: value.publishDate, to: value.unpublishDate }" @input="onRangeChange" :class="{ 'is-primary': value.publishDate || value.unpublishDate }" :disabled="disabled" />
         </ui-property>
       </div>
       <div class="ui-box is-light">
@@ -40,6 +40,10 @@
     props: {
       value: {
         type: [ Object, Array ]
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
 
diff --git a/zero.Web.UI/App/pages/pages/page.vue b/zero.Web.UI/App/pages/pages/page.vue
index 04bd3904..2f60b022 100644
--- a/zero.Web.UI/App/pages/pages/page.vue
+++ b/zero.Web.UI/App/pages/pages/page.vue
@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <ui-editor v-if="!loading" :config="renderer" v-model="model" :meta="meta" :is-page="true" infos="none" :on-configure="onEditorConfigure" />
+    <ui-editor v-if="!loading" :config="renderer" v-model="model" :meta="meta" :is-page="true" infos="none" :on-configure="onEditorConfigure" :disabled="disabled" />
   </ui-form>
 </template>
 
@@ -39,6 +39,8 @@
 
   export default {
 
+    name: 'page',
+
     props: ['id', 'type', 'parent'],
 
     components: { UiEditor },
@@ -124,6 +126,7 @@
 
         form.load(!this.id ? PagesApi.getEmpty(this.type, this.parent) : PagesApi.getById(this.id)).then(response =>
         {
+          this.disabled = !response.meta.canEdit;
           this.renderer = response.entity ? 'page.' + response.entity.pageTypeAlias : null;
           this.model = response.entity;
           this.meta = response.meta;
diff --git a/zero.Web.UI/App/pages/settings/application.vue b/zero.Web.UI/App/pages/settings/application.vue
index 77fa7ec9..8ec48068 100644
--- a/zero.Web.UI/App/pages/settings/application.vue
+++ b/zero.Web.UI/App/pages/settings/application.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="application" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@application.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="application" v-model="model" :meta="meta" />
+    <ui-editor config="application" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
 
diff --git a/zero.Web.UI/App/pages/settings/country.vue b/zero.Web.UI/App/pages/settings/country.vue
index a1548daf..47816f42 100644
--- a/zero.Web.UI/App/pages/settings/country.vue
+++ b/zero.Web.UI/App/pages/settings/country.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="country" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@country.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="country" v-model="model" :meta="meta" />
+    <ui-editor config="country" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
 
diff --git a/zero.Web.UI/App/pages/settings/language.vue b/zero.Web.UI/App/pages/settings/language.vue
index 05a5c964..21f87b9b 100644
--- a/zero.Web.UI/App/pages/settings/language.vue
+++ b/zero.Web.UI/App/pages/settings/language.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="language" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@language.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="language" v-model="model" :meta="meta" />
+    <ui-editor config="language" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
 
diff --git a/zero.Web.UI/App/pages/settings/role.vue b/zero.Web.UI/App/pages/settings/role.vue
index 80bb41c3..2e148849 100644
--- a/zero.Web.UI/App/pages/settings/role.vue
+++ b/zero.Web.UI/App/pages/settings/role.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="role" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@role.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor config="userRole" v-model="model" :meta="meta" :active-toggle="false" />
+    <ui-editor config="userRole" v-model="model" :meta="meta" :active-toggle="false" :disabled="disabled" />
   </ui-form>
 </template>
 
diff --git a/zero.Web.UI/App/pages/settings/translation.vue b/zero.Web.UI/App/pages/settings/translation.vue
index c23d7ed2..2b155118 100644
--- a/zero.Web.UI/App/pages/settings/translation.vue
+++ b/zero.Web.UI/App/pages/settings/translation.vue
@@ -9,7 +9,7 @@
       </div>
       <div class="ui-split">
         <ui-property label="@translation.fields.key" :required="true" :vertical="true" field="key">
-          <input v-model="item.key" type="text" class="ui-input" maxlength="300" :readonly="disabled" />
+          <input v-model="item.key" type="text" class="ui-input" maxlength="300" :disabled="disabled" />
         </ui-property>
         <ui-property label="@translation.fields.display" :vertical="true" field="display">
           <ui-state-button :disabled="disabled" :items="displayItems" v-model="item.display" />
@@ -17,7 +17,7 @@
       </div>
       <br />
       <ui-property label="@translation.fields.value" :required="true" :vertical="true" field="value">
-        <textarea v-if="item.display === 'text'" v-model="item.value" class="ui-input" :readonly="disabled"></textarea>
+        <textarea v-if="item.display === 'text'" v-model="item.value" class="ui-input" :disabled="disabled"></textarea>
         <ui-rte v-if="item.display === 'html'" v-model="item.value" :disabled="disabled" />
       </ui-property>
     </div>
diff --git a/zero.Web.UI/App/pages/settings/user.vue b/zero.Web.UI/App/pages/settings/user.vue
index 13ef9696..48a00bbb 100644
--- a/zero.Web.UI/App/pages/settings/user.vue
+++ b/zero.Web.UI/App/pages/settings/user.vue
@@ -7,10 +7,10 @@
         <ui-dropdown-button label="Change password" icon="fth-lock" :disabled="disabled" />
       </template>
     </ui-form-header>
-    <ui-editor config="user" v-model="model" :meta="meta">
+    <ui-editor config="user" v-model="model" :meta="meta" :disabled="disabled">
       <template v-slot:settings>
         <ui-property label="@user.fields.isLockedOut" :is-text="true" class="is-toggle">
-          <ui-toggle :value="isLockedOut" :negative="true" @input="onLockoutChange" />
+          <ui-toggle :value="isLockedOut" :negative="true" @input="onLockoutChange" :disabled="disabled" />
         </ui-property>
         <p v-if="isLockedOut" class="ui-message type-error block user-aside-error">
           <i class="ui-message-icon fth-alert-circle"></i>
diff --git a/zero.Web.UI/App/pages/spaces/views/editor.vue b/zero.Web.UI/App/pages/spaces/views/editor.vue
index eae03e91..d8dd1bb3 100644
--- a/zero.Web.UI/App/pages/spaces/views/editor.vue
+++ b/zero.Web.UI/App/pages/spaces/views/editor.vue
@@ -1,7 +1,7 @@
 <template>
   <ui-form ref="form" class="space-editor" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@space.name" :disabled="disabled" :is-create="!id" :state="form.state" :can-delete="meta.canDelete" @delete="onDelete" />
-    <ui-editor v-if="renderer" :config="renderer" v-model="model" :meta="meta" />
+    <ui-editor v-if="renderer" :config="renderer" v-model="model" :meta="meta" :disabled="disabled" />
   </ui-form>
 </template>
 
diff --git a/zero.Web.UI/Sass/Core/_forms.scss b/zero.Web.UI/Sass/Core/_forms.scss
index 4772ef44..207ae197 100644
--- a/zero.Web.UI/Sass/Core/_forms.scss
+++ b/zero.Web.UI/Sass/Core/_forms.scss
@@ -40,6 +40,7 @@ textarea, .ui-native-select
 
   &[disabled], &[readonly]
   {
+    background-color: transparent;
     border-color: transparent !important;
     padding: 0;
     height: auto;
@@ -110,6 +111,22 @@ textarea
     height: 42px;
     line-height: 40px;
   }
+
+  &[disabled], &[readonly]
+  {
+    min-height: 23px;
+
+    &:after
+    {
+      display: none;
+    }
+
+    select
+    {
+      text-indent: -2px;
+      padding-left: 0;
+    }
+  }
 }
 
 
@@ -138,6 +155,11 @@ textarea
     -webkit-appearance: none;
     border: none;
   }
+
+  .is-disabled &
+  {
+    cursor: default;
+  }
 }
 
 .ui-native-check-toggle