swcs/Archetype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fieldtype picker

Browse Source 
...and removed old dropdowns. Plus a bit more styling.
This commit is contained in:
kjac
2015-08-18 17:59:20 +02:00
parent f366305583
commit 451f2773a4
3 changed files with 80 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/controllers/controller.js
+53
View File
@@ -15,6 +15,11 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
// store the umbraco property alias to help generate unique IDs. Hopefully there's a better way to get this in the future :)
$scope.umbracoHostPropertyAlias = $scope.$parent.$parent.model.alias;
$scope.overlayMenu = {
show: false,
style: {}
};
init();
//hold references to helper resources
@@ -74,6 +79,54 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
};
//handles a fieldset add
$scope.openFieldsetPicker = function ($index, event) {
if ($scope.canAdd() == false) {
return;
}
$scope.overlayMenu.fieldsets = [];
_.each($scope.model.config.fieldsets, function (fieldset) {
var icon = fieldset.icon;
$scope.overlayMenu.fieldsets.push({
alias: fieldset.alias,
label: fieldset.label,
icon: (fieldset.icon || "icon-document-dashed-line") // default icon if none is chosen
});
$scope.overlayMenu.index = $index;
});
// sanity check
if ($scope.overlayMenu.fieldsets.length == 0) {
return;
}
if ($scope.overlayMenu.fieldsets.length == 1) {
// only one fieldset type - no need to display the picker
$scope.addRow($scope.overlayMenu.fieldsets[0].alias, $index);
return;
}
// calculate overlay position
// - yeah... it's jQuery (ungh!) but that's how the Grid does it.
var offset = $(event.target).offset();
var scrollTop = $(event.target).closest(".umb-panel-body").scrollTop();
if (offset.top < 400) {
$scope.overlayMenu.style.top = 300 + scrollTop;
}
else {
$scope.overlayMenu.style.top = offset.top - 150 + scrollTop;
}
$scope.overlayMenu.show = true;
};
$scope.closeFieldsetPicker = function () {
$scope.overlayMenu.show = false;
};
$scope.pickFieldset = function (fieldsetAlias, $index) {
$scope.closeFieldsetPicker();
$scope.addRow(fieldsetAlias, $index);
};
$scope.addRow = function (fieldsetAlias, $index) {
if ($scope.canAdd()) {
if ($scope.model.config.fieldsets) {
app/less/archetype.less
+8 -2
View File
@@ -70,7 +70,7 @@
min-height: 42px;
.label-sub {
padding: 8px 0 4px 0;
padding: 10px 0 4px 0;
display: inline-block;
&.module-label {
width: 100%;
@@ -134,7 +134,9 @@
text-overflow: ellipsis;
}
&.dimmed {
color: #d9d9d9;
i, span {
color: #d9d9d9 !important;
}
}
}
@@ -225,6 +227,10 @@
color: #343434;
}
}
.fieldsetPicker .icon {
color: #333;
}
}
.archetypeEditor, .archetypeConfig {
app/views/archetype.default.html
+19 -20
View File
@@ -13,18 +13,10 @@
</label>
</div>
<div class="archetypeEditorControls label-sub" ng-hide="model.config.hideFieldsetControls">
<i class="icon icon-add dropdown-toggle" ng-show="canAdd()" data-toggle="{{ model.config.fieldsets.length > 1 ? 'dropdown' : ''}}" ng-click="model.config.fieldsets.length == 1 ? addRow(fieldset.alias, $index) : return"></i>
<ul class="dropdown-menu umb-actions">
<li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias, $parent.$index)">
<a>
<i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
<span class="menu-label">{{fieldsetModel.label}}</span>
</a>
</li>
</ul>
<i class="icon icon-add dropdown-toggle" 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="{dimmed: fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
<i class="icon icon-power" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
<i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
</div>
</div>
@@ -49,17 +41,24 @@
</li>
</ul>
<div ng-show="showAddButton()">
<a class="archetypeAddButton" data-toggle="{{ model.config.fieldsets.length > 1 ? 'dropdown' : ''}}" ng-click="model.config.fieldsets.length == 1 ? addRow(model.config.fieldsets[0].alias, 0) : return" prevent-default>
<a class="archetypeAddButton" ng-click="openFieldsetPicker(0, $event)" prevent-default>
<i class="icon icon-add dropdown-toggle"></i>
<localize key="general_add" class="archetypeAddButtonText">Add</localize>
<archetype-localize key="addFieldset">Add an item</archetype-localize>
</a>
<ul class="dropdown-menu umb-actions">
<li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias, 0)">
<a>
<i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
<span class="menu-label">{{fieldsetModel.label}}</span>
</a>
</li>
</ul>
</div>
<div class="usky-grid fieldsetPicker" ng-if="overlayMenu.show">
<div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()">
<h5>
<archetype-localize key="addFieldset">Add an item</archetype-localize>
</h5>
<ul class="elements">
<li ng-repeat="fieldset in overlayMenu.fieldsets">
<a ng-click="pickFieldset(fieldset.alias, overlayMenu.index)" href>
<i class="icon {{fieldset.icon}}"></i>
{{fieldset.label}}
</a>
</li>
</ul>
</div>
</div>
</div>