Merge pull request #436 from kgiszewski/feature/slow-the-updates-roll

Feature/slow the updates roll
Merge logic
2017-10-07 07:10:36 -04:00 · 2017-10-03 13:31:43 -04:00 · 2017-10-03 13:28:25 -04:00 · 2017-10-03 13:27:03 -04:00 · 2017-10-03 11:07:10 -04:00 · 2017-10-03 08:56:52 -04:00
8 changed files with 201 additions and 76 deletions
@@ -20,6 +20,9 @@ namespace Archetype.Api
    [PluginController("ArchetypeApi")]
    public class ArchetypeDataTypeController : UmbracoAuthorizedJsonController
    {
+        private static DateTime _lastVersionCheck;
+        private const int IntervalInDaysBetweenVersionChecks = 7;
+
        public IEnumerable<object> GetAllPropertyEditors()
        {
            return
@@ -30,7 +33,7 @@ namespace Archetype.Api
        /// <summary>
        /// Gets all datatypes.
        /// </summary>
-        /// <returns></returns>
+        /// <returns>System.Object.</returns>
        public object GetAll()
        {
            var dataTypes = Services.DataTypeService.GetAllDataTypeDefinitions();
@@ -139,7 +142,7 @@ namespace Archetype.Api
        [HttpPost]
        public object CheckForUpdates()
        {
-            if (!ArchetypeGlobalSettings.Instance.CheckForUpdates)
+            if (!ArchetypeGlobalSettings.Instance.CheckForUpdates || !IsItTimeToCheck())
            {
                return new
                {
@@ -148,6 +151,7 @@ namespace Archetype.Api
            }

            var updateNotificationModel = ArchetypeHelper.Instance.CheckForUpdates();
+            _lastVersionCheck = DateTime.UtcNow;

            return new
            {
@@ -158,5 +162,10 @@ namespace Archetype.Api
                url = updateNotificationModel.Url
            };
        }
+
+        internal bool IsItTimeToCheck()
+        {
+            return _lastVersionCheck.AddDays(IntervalInDaysBetweenVersionChecks) < DateTime.UtcNow;
+        }
    }
 }
@@ -1,4 +1,4 @@
 using System.Reflection;

-[assembly: AssemblyVersion("1.17.0")]
-[assembly: AssemblyFileVersion("1.17.0")]
+[assembly: AssemblyVersion("1.17.1")]
+[assembly: AssemblyFileVersion("1.17.1")]
@@ -114,6 +114,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc

        },
        start: function(ev, ui) {
+            archetypeService.getEditors().addClass('archetypeDragging');
            archetypeService.storeEditors(ui.item.parent());
            $scope.$apply(function() {
                draggedParent = ui.item.parent();
@@ -175,7 +176,6 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc

        },
        stop: function (ev, ui) {
-
            // Done sorting.
            draggedParent.scope().doingSort = false;

@@ -190,6 +190,7 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
            }
            archetypeService.restoreEditors(parent);

+            archetypeService.getEditors().removeClass('archetypeDragging');
        }
    };

@@ -488,6 +489,13 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc

    //helpers for determining if the add button should be shown
    $scope.showAddButton = function () {
+        var visible = countVisible();
+        return (visible === 0 && $scope.model.config.startWithAddButton) 
+            || (visible > 0 && $scope.canAdd());
+    }
+
+    //helper for determining if no content is available yet
+    $scope.showEmptyContentHint = function () {
        return $scope.model.config.startWithAddButton
            && countVisible() === 0;
            ///&& $scope.model.config.fieldsets.length == 1;
@@ -35,8 +35,7 @@

    .fieldsetIcon {
        float: left;
-        padding: 0 4px 0 0;
-        color: #333;
+        padding: 0 10px 0 0;
        vertical-align: text-bottom;
    }

@@ -54,7 +53,6 @@
    fieldset {
        border-bottom: 1px dashed #dddddd;
        padding: 0;
-        margin-bottom: 5px;
        clear: both;
        display: inline-block;
        width: 100%;
@@ -93,10 +91,10 @@
        .archetypeFieldsetLabel {
            position: relative;
            width: 100%;
-            min-height: 42px;
+            background: white;

            .label-sub {
-                padding: 8px 0 8px 0;
+                padding: 18px 0;
                display: inline-block;
                min-height: 20px; /* this makes the header clickable when there's no icon and no text */
                &.module-label {
@@ -106,9 +104,9 @@
                    cursor: pointer;
    
                    label  {
-                        span {
-                            text-decoration: underline;
-                        }
+                        // span {
+                        //     text-decoration: underline;
+                        // }
                        &:hover {
                            cursor: pointer;
                        }
@@ -129,7 +127,7 @@
            }

            span {
-                font-weight: bold;
+                // font-weight: bold;

                &.menu-label { font-weight: normal; }
            }
@@ -145,57 +143,99 @@
            label {
                margin-bottom: 0;
                margin-left: 18px;
-                white-space: nowrap;
                padding: 0;
-                width: ~"calc(100% - 144px)";
-                position: absolute;
+                display: block;
                span {
                    display: block;
                    overflow: hidden;
                    text-overflow: ellipsis;
+                    max-height: 40px;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    display: -webkit-box;
                }
-                &.dimmed {
-                    i, span {
-                        color: #d9d9d9 !important;
-                    }
+            }
+
+            &.dimmed {
+                label {
+                    color: #d9d9d9 !important;
                }
            }

            .archetypeEditorControls {
                float: none;
                position: absolute;
-                right: 15px;
+                right: 0;
                top: 0;
+                height: 100%; 
+                padding: 0;
+                display: flex;
+                align-items: center;
+                opacity: 0;
+                transition: opacity .15s ease-in-out;
+                -moz-transition: opacity .15s ease-in-out;
+                -webkit-transition: opacity .15s ease-in-out;
+                background: white;
+
+                &:before {
+                    content: ' ';
+                    position: absolute;
+                    display: block; 
+                    left: -40px;
+                    width: 40px;
+                    top: 0;
+                    bottom: 0;
+                    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0), white);
+                    background: -moz-linear-gradient(90deg, rgba(255,255,255,0), white);
+                    background: linear-gradient(90deg, rgba(255,255,255,0), white);
+                }

                .icon {
-                    color: #ddd;
-                    padding: 2px;
+                    display: inline-block;
+                    height: 28px;
+                    width: 28px;
+                    line-height: 28px;
+                    border-radius: 14px;
+                    border: 1px solid #d6d6d6;
+                    color: #5f5f5f;
+                    background: white;
                    font-size: 16px;
+                    text-align: center;
+                    margin-left: 8px;
+
                    &:hover {
-                        color: #333;
+                        background: #f3f3f5;
                    }
-                    &.icon-delete:hover {
-                        color: #b94a48;
+                    &.icon-trash:hover {
+                        background: #fe5b57;
+                        border-color: #fe5b57;
+                        color: white;
                    }
                    &.icon-disabled {
                        cursor: default;
                        &:hover {
                            color: #ddd;
+                            background: white;
                        }
                    }
                    &.icon-active {
-                        color: #333;
+                        color: #bbb;
                        &:hover {
-                            color: #333;
+                            color: white;
                        }
                    }
                }
            }
-            
-            &:hover {
+
+            &:hover .archetypeEditorControls {
+                opacity: 1;
            }
        }

+        &.is-open > .archetypeFieldsetLabel .archetypeEditorControls {
+            opacity: 1;
+        }
+
        .archetypePropertyError {
            margin-bottom: 5px;
            padding-top: 3px;
@@ -213,9 +253,24 @@
        .archetypeCollapser {
            clear: both;
            height: 100%;
-            padding: 12px 0 0 20px;
-            background-color: #fff;
-            border-radius: 0 0 0 5px;
+            padding: 24px 20px 0 20px;
+            background-color: #fafafa;
+            border-top: 1px dashed #e0e0e0;
+            line-height: 20px;
+
+            .archetypeFieldsetLabel {
+                background: #fafafa;
+            }
+
+            .archetypeEditorControls {
+                background: #fafafa;
+
+                &:before {
+                    background: -webkit-linear-gradient(90deg, rgba(250,250,250,0), #fafafa);
+                    background: -moz-linear-gradient(90deg, rgba(250,250,250,0), #fafafa);
+                    background: linear-gradient(90deg, rgba(250,250,250,0), #fafafa);
+                }
+            }

            form {
                margin-left:20px;
@@ -246,25 +301,69 @@
        border: 1px solid #b94a48;
    }

+    .archetypeFooter {
+        text-align: center;
+        margin-top: 20px;
+    }
+
    .archetypeAddButton {
-        color: #ddd;
-        .icon {
-            vertical-align: middle;
-        }
+        display: inline-block;
+        height: 28px;
+        width: 28px;
+        line-height: 28px;
+        border-radius: 14px;
+        border: 1px solid #b6b6b6;
+        color: #5f5f5f;
+        background: white;
+        font-size: 16px;
+        text-align: center;
+        text-decoration: none;
+        cursor: pointer;
+
        &:hover {
-            color: #333;
-            text-decoration: none;
-            cursor: pointer;
-
-            .archetypeAddButtonText {
-                text-decoration: underline;
-            }
-
-            .icon {
-                color: #333;
-            }
+            background: #00aea2;
+            border-color: #00aea2;
+            color: white;
        }
+    }

+    .archetypeEmptyContent {
+        text-align: center;
+        margin-bottom: 20px;
+
+        span {
+            display: inline-block;
+            padding: 10px 20px;
+            clear: both;
+            font-size: 14px;
+            color: #555;
+            background: #f8f8f8;
+            border-radius: 15px;
+        }
+    }
+
+    .archetypeCrossDraggable + .archetypeEmptyContent {
+        margin-top: -42px;
+    }
+
+    &.archetypeDragging .archetypeCrossDraggable + .archetypeEmptyContent {
+        display: none;
+    }
+
+    // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets.
+    .archetypeSortable.archetypeEmpty.archetypeCrossDraggable {
+        min-height: 40px;
+        border: 1px dashed transparent;
+    }
+
+    &.archetypeDragging .archetypeSortable.archetypeEmpty.archetypeCrossDraggable {
+        min-height: 56px;
+        border-color: #dddddd;
+    }
+
+
+    .archetypeCollapser .archetypeEmptyContent span {
+        background: #f2f2f2;
    }

    .multiPropertyTextbox {
@@ -275,6 +374,9 @@
        list-style: none;
        margin-left: 0;
    }
+    li {
+        line-height: 20px;
+    }

    .show-validation.ng-invalid .control-group.error .control-label {
        span {
@@ -377,15 +479,6 @@
            }
        }
    }
-
-    // Necessary to ensure empty lists can be dropped onto when sorting nested fieldsets.
-    .archetypeSortable.archetypeEmpty {
-        &.archetypeCrossDraggable {
-            min-height: 42px;
-            border: 1px dashed #dddddd;
-            margin-top: 5px;
-        }
-    }
 }

 .archetypeEditor, .archetypeConfig {
@@ -443,7 +443,7 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar

    function coreTinyMce(value, scope, args) {
        if(!args.contentLength) {
-            args = {contentLength: 50}
+            args = {contentLength: 160}
        }

        var suffix = "";
@@ -547,10 +547,11 @@ angular.module('umbraco.services').factory('archetypeLabelService', function (ar

                            if(datatype) {
                                //try to get built-in label
-                                var templateLabelValue = getNativeLabel(datatype, rawValue, scope);
+                                var label = getNativeLabel(datatype, rawValue, scope);
                                
-                                //console.log("Native label...");
-                                //console.log(templateLabelValue);
+                                if (label) {
+                                    templateLabelValue = label;
+                                }
                            }
                        }
                    }
@@ -2,6 +2,7 @@ angular.module('umbraco.services').factory('archetypeService', function () {

    // Variables.
    var draggedRteArchetype;
+    var archetypeEditors;
    var rteClass = ".archetypeEditor .umb-rte textarea";
    var editorSettings = {};
    var disabledSortables = [];
@@ -215,6 +216,13 @@ angular.module('umbraco.services').factory('archetypeService', function () {
                sortable.enable();
            });
            disabledSortables = [];
+        },
+        // Get all active archetype editors on the current page
+        getEditors: function() {
+            if (archetypeEditors == null) {
+                archetypeEditors = $('.archetypeEditor');
+            }
+            return archetypeEditors;
        }
    }
 });
@@ -2,14 +2,6 @@
 <div class="archetypeEditor ng-class:model.config.customCssClass">
    <textarea class="archetypeDeveloperModel" ng-show="model.config.developerMode" ng-model="model.value"></textarea>

-    <!-- "Add" button. -->
-    <div ng-show="showAddButton()">
-        <a class="archetypeAddButton" ng-click="openFieldsetPicker(0, $event)" prevent-default>
-            <i class="icon icon-add"></i>
-            <archetype-localize key="addFieldset">Add an item</archetype-localize>
-        </a>
-    </div>
-
    <!-- Mandatory validation. -->
    <input type="hidden" name="archetypeMandatory" ng-model="model.mandatoryValidation" ng-required="model.validation.mandatory" />
    <div><span class="help-inline" val-msg-for="archetypeMandatory" val-toggle-msg="required"><archetype-localize key="required">Required</archetype-localize></span></div>
@@ -21,11 +13,11 @@
    <!-- Fieldsets. -->
    <ul ui-sortable="sortableOptions" class="archetypeSortable" ng-class="{archetypeEmpty: model.value.fieldsets.length === 0 || sortingLastItem(), archetypeCrossDraggable: model.config.enableCrossDragging}" ng-model="model.value.fieldsets">
        <li ng-repeat="fieldset in model.value.fieldsets">
-            <fieldset ng-class="['archetype-fieldset-' + fieldset.alias, (getFieldsetValidity(fieldset) == false ? 'archetypeFieldsetError' : '')]" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
-                <div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing}">
+            <fieldset ng-class="['archetype-fieldset-' + fieldset.alias, (getFieldsetValidity(fieldset) == false ? 'archetypeFieldsetError' : ''), (isCollapsed(fieldset) ? '' : 'is-open')]" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">
+                <div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing, dimmed: isDisabled(fieldset)}">
                    <div ng-click="focusFieldset(fieldset)" class="label-sub module-label">
                        <span class="caret" ng-class="{'caret-right': isCollapsed(fieldset)}" ng-show="model.config.enableCollapsing"></span>
-                        <label ng-class="{dimmed: isDisabled(fieldset)}">
+                        <label>
                            <i class="fieldsetIcon icon ng-class:fieldsetConfigModel.icon"></i>
                            <span ng-bind="getFieldsetTitle(fieldsetConfigModel, $index)"></span>
                        </label>
@@ -34,9 +26,9 @@
                        <i class="icon icon-add" ng-show="canAdd()" ng-click="openFieldsetPicker($index, $event)"></i>
                        <i class="icon icon-navigation handle" ng-show="canSort()"></i>
                        <i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
-                        <i class="icon icon-power" ng-class="{'icon-active': fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="showDisableIcon(fieldset)"></i>
+                        <i class="icon icon-eye" ng-class="{'icon-active': fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="showDisableIcon(fieldset)"></i>
                        <i class="icon icon-time icon-disabled" ng-class="{'icon-active': isDisabledByPublishing(fieldset)}" ng-show="showPublishingIcon(fieldset)"></i>
-                        <i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
+                        <i class="icon icon-trash" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                    </div>
                </div>
                <div class="archetypeCollapser animate-hide" ng-hide="model.config.enableCollapsing && isCollapsed(fieldset)" ng-if="isLoaded(fieldset)">
@@ -109,6 +101,20 @@
        </li>
    </ul>

+    <!-- Empty content display. -->
+    <div class="archetypeEmptyContent" ng-show="showEmptyContentHint()">
+        <span>
+            <archetype-localize key="addFieldset">Add an item</archetype-localize>
+        </span>
+    </div>
+
+    <!-- "Add" button. -->
+    <div class="archetypeFooter" ng-show="showAddButton()">
+        <a class="archetypeAddButton" ng-click="openFieldsetPicker(model.value.fieldsets.length, $event)" prevent-default> 
+            <i class="icon icon-add"></i>
+        </a>
+    </div>
+
    <!-- Fieldset picker. -->
    <div class="usky-grid fieldsetPicker" ng-class="{withGroups: overlayMenu.fieldsetGroups.length > 1}" ng-if="overlayMenu.show">
        <div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()" archetype-click-outside="closeFieldsetPicker()">
@@ -1,6 +1,6 @@
 {
 	"name": "Archetype",
-	"version": "1.17.0",
+	"version": "1.17.1",
 	"url": "http://github.com/kgiszewski/archetype/",
 	"author": "Kevin Giszewski - Tom Fulton - Lee Kelleher - Matt Brailsford - Kenn Jacobsen - Nicholas Westby - Et. Al.",
 	"authorUrl": "http://github.com/kgiszewski/archetype/",
Author	SHA1	Message	Date
Kevin Giszewski	a4c1a59e23	Merge pull request #436 from kgiszewski/feature/slow-the-updates-roll Feature/slow the updates roll	2017-10-07 07:10:36 -04:00
Kevin Giszewski	e164be1823	Merge logic	2017-10-03 13:31:43 -04:00
Kevin Giszewski	f32451fffa	Clean up private var	2017-10-03 13:28:25 -04:00
Kevin Giszewski	a541dbd038	Limit the version check to once every 7 days (unless the app is reloaded)	2017-10-03 13:27:03 -04:00
Kevin Giszewski	69e0bb70e5	Fix scrunchy fieldset picker titles	2017-10-03 11:07:10 -04:00
Kevin Giszewski	c22a2623c2	Merge pull request #434 from ceee/ui-refactor Update UI to better match Grid & Nested Content	2017-10-03 08:56:52 -04:00
swcs	c229cc9953	correct layout for cross dragging between archetype instances	2017-10-03 14:32:34 +02:00
swcs	7d155ee176	force visibility of editor controls if a fieldset collapser is open	2017-10-02 15:49:37 +02:00
swcs	93659e5a22	increase char limit for RTE label generator from 50 to 160	2017-10-02 15:40:04 +02:00
swcs	46bbf24edf	limit fieldset label to 2 lines	2017-09-29 10:34:34 +02:00
swcs	da1057c681	fix style for nested archetype fieldsets	2017-09-28 14:14:16 +02:00
swcs	81881a5734	allow 100% width for fieldset labels and add background for controls on the right	2017-09-28 14:05:09 +02:00
swcs	25678a812c	new empty content display and add button	2017-09-26 11:25:51 +02:00
Kevin Giszewski	ec2edce74c	Bump version	2017-09-25 13:31:52 -04:00
Kevin Giszewski	4756551518	Merge pull request #433 from Nicholas-Westby/fix/432-resolve-label-templates Fix for label templates sometimes not resolving: https://github.com/k…	2017-09-25 08:28:23 -04:00
Nicholas-Westby	e053b42950	Fix for label templates sometimes not resolving: https://github.com/kgiszewski/Archetype/issues/432	2017-09-23 17:16:50 -07:00
swcs	ff21951ea1	make the container/boundaries for the fieldset collapser more visible	2017-09-21 14:22:21 +02:00
swcs	18935b4a69	update control icons and do only show them on fieldset hover	2017-09-21 13:41:47 +02:00
swcs	cd93e17494	improve fieldset list layout and spacing	2017-09-21 13:15:58 +02:00