Updated the prevalue editor

skybrud · Apr 5, 2017 · d475a93 · d475a93
1 parent a8a8433
commit d475a93
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 88 deletions.
diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Controllers/LinkPickerPreValues.js b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Controllers/LinkPickerPreValues.js
@@ -1,5 +1,16 @@
 angular.module("umbraco").controller("Skybrud.LinkPickerPreValues.Controller", function ($scope) {
 
+    var v = Umbraco.Sys.ServerVariables.application.version.split('.');
+    $scope.umbVersion = parseFloat(v[0] + '.' + v[1]);
+
+    $scope.views = [
+        { alias: 'preview', name: 'Preview' },
+        { alias: 'table', name: 'Table' },
+        { alias: 'list', name: 'List' }
+    ];
+
+    $scope.view = $scope.views[0];
+
     if (!$scope.model.value) {
         $scope.model.value = {
             limit: 0,
@@ -8,7 +19,7 @@
                 content: true,
                 media: true
             },
-            showTable: false,
+            view: 'preview',
             columns: {
                 type: true,
                 id: true,
@@ -19,10 +30,25 @@
         };
     }
 
-    $scope.update = function () {
+    // Make sure we still support the old "showTable" option
+    if ($scope.model.value.showTable === true) {
+        delete $scope.model.value.showTable;
+        $scope.model.value.view = 'table';
+    } else if ($scope.model.value.showTable === false) {
+        delete $scope.model.value.showTable;
+        $scope.model.value.view = 'list';
+    }
 
-        $scope.model.value.limit = parseInt($scope.model.value.limit) | 0;
+    // Make sure the selected view is reflected in the UI
+    angular.forEach($scope.views, function (view) {
+        if ($scope.model.value.view == view.alias) {
+            $scope.view = view;
+        }
+    });
 
+    $scope.update = function () {
+        $scope.model.value.limit = parseInt($scope.model.value.limit) | 0;
+        $scope.model.value.view = $scope.view.alias;
     };
 
 });
diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Directives/LinkPicker.js b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Directives/LinkPicker.js
@@ -48,7 +48,7 @@
                 if (scope.cfg.types.url === undefined) scope.cfg.types.url = true;
                 if (scope.cfg.types.content === undefined) scope.cfg.types.content = true;
                 if (scope.cfg.types.media === undefined) scope.cfg.types.media = true;
-                if (scope.cfg.view == undefined) scope.cfg.view = 'details';
+                if (scope.cfg.view == undefined) scope.cfg.view = 'preview';
                 if (scope.cfg.showTable === true) scope.cfg.view = 'table';
                 if (scope.cfg.showTable === false) scope.cfg.view = 'list';
                 if (!scope.cfg.columns) scope.cfg.columns = {};

diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/LinkPicker.css b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/LinkPicker.css
@@ -148,18 +148,31 @@
 .SkybrudPropertyEditors.LinkPicker .linkpicker-preview--sortable {
   cursor: move;
 }
-.SkybrudPropertyEditors.LinkPicker.umbraco-gte76 .linkpicker-preview-add {
+.SkybrudPropertyEditors.LinkPicker .umbraco-gte76 .linkpicker-preview-add {
   color: #00aea2;
 }
-.SkybrudPropertyEditors.LinkPicker.umbraco-gte76 .linkpicker-preview {
+.SkybrudPropertyEditors.LinkPicker .umbraco-gte76 .linkpicker-preview {
   background: #f3f3f5;
 }
-.SkybrudPropertyEditors.LinkPicker.umbraco-gte76 .linkpicker-preview__action:hover {
+.SkybrudPropertyEditors.LinkPicker .umbraco-gte76 .linkpicker-preview__action:hover {
   color: #03bfb3;
 }
-.SkybrudPropertyEditors.LinkPicker.umbraco-gte76 .linkpicker-preview__action--red:hover {
+.SkybrudPropertyEditors.LinkPicker .umbraco-gte76 .linkpicker-preview__action--red:hover {
   color: #fe3e39;
 }
+.SkybrudPropertyEditors.LinkPickerOptions .optionGroup .optionGroupTitle {
+  margin-bottom: 20px;
+  background: #f8f8f8;
+  padding: 5px 10px;
+  font-weight: bold;
+  border-bottom: 1px solid #D9D9D9;
+}
+.SkybrudPropertyEditors.LinkPickerOptions .optionGroup .option {
+  margin-left: 20px;
+}
+.SkybrudPropertyEditors.LinkPickerOptions .optionGroup + .optionGroup {
+  margin-top: 40px;
+}
 .SkybrudPropertyEditors.LinkPickerOptions .option {
   display: flex;
 }
@@ -179,6 +192,7 @@
   width: 350px;
 }
 .SkybrudPropertyEditors.LinkPickerOptions label {
+  display: block;
   width: 400px;
   padding-left: 0;
 }
@@ -192,6 +206,20 @@
 .SkybrudPropertyEditors.LinkPickerOptions .value label + label {
   margin-left: 10px;
 }
+.umb-editor-sub-views .SkybrudPropertyEditors.LinkPickerOptions .option {
+  display: block;
+}
+.umb-editor-sub-views .SkybrudPropertyEditors.LinkPickerOptions .option label {
+  margin-bottom: 10px;
+  width: auto;
+}
+.SkybrudPropertyEditors.LinkPickerOptions.umbraco-gte76 .optionGroup .optionGroupTitle {
+  margin-bottom: 20px;
+  background: #F3F3F5;
+  padding: 5px 10px;
+  font-weight: bold;
+  border-bottom: 1px solid #B3AFBD;
+}
 .SkybrudPropertyEditors .linkpicker-sortable-placeholder {
   border: inherit;
   background-color: #d0e7f1 !important;

diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/LinkPicker.less b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/LinkPicker.less
@@ -23,6 +23,23 @@
     }
 
     &.LinkPickerOptions {
+
+        .optionGroup {
+            .optionGroupTitle {
+                margin-bottom: 20px;
+                background: #f8f8f8;
+                padding: 5px 10px;
+                font-weight: bold;
+                border-bottom: 1px solid #D9D9D9;
+            }
+            .option {
+                margin-left: 20px;
+            }
+            & + .optionGroup {
+                margin-top: 40px;
+            }
+        }
+
         .option {
             display: flex;
             &.limit {
@@ -44,10 +61,13 @@
                 }
             }
         }
+
         label {
+            display: block;
             width: 400px;
             padding-left: 0;
         }
+
         .value {
             display: inline-block;
             label {
@@ -58,6 +78,29 @@
                 }
             }
         }
+
+        .umb-editor-sub-views & {
+            .option {
+                display: block;
+                label {
+                    margin-bottom: 10px;
+                    width: auto;
+                }
+            }
+        }
+
+        &.umbraco-gte76 {
+            .optionGroup {
+                .optionGroupTitle {
+                    margin-bottom: 20px;
+                    background: #F3F3F5;
+                    padding: 5px 10px;
+                    font-weight: bold;
+                    border-bottom: 1px solid #B3AFBD;
+                }
+            }
+        }
+
     }
 
     .linkpicker-sortable-placeholder {
@@ -137,4 +180,14 @@
             }
         }
     }
-}
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/LinkPicker.min.css b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/LinkPicker.min.css
diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/_preview.less b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Styles/_preview.less
@@ -96,7 +96,7 @@
     cursor: move;
 }
 
-&.umbraco-gte76 {
+.umbraco-gte76 {
 
     @{PreviewPrefix}-add {
         color: #00aea2;

diff --git a/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Views/LinkPickerDirective.html b/src/Skybrud.LinkPicker/App_Plugins/Skybrud.LinkPicker/Views/LinkPickerDirective.html
@@ -62,7 +62,7 @@
             </a>
         </div>
     </div>
-    <div ng-show="config.view == 'details'">
+    <div ng-show="config.view == 'preview'">
         <div ui-sortable="sortableOptionsPreview" ng-model="value.items">
             <div class="linkpicker-preview linkpicker-preview--sortable" ng-clggass="{'linkpicker-preview--sortable': sortable, 'linkpicker-preview--unpublished': published === false }" ng-repeat="link in value.items">
                 <i class="linkpicker-preview__icon icon-document" ng-if="link.mode == 'content'"></i>