yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sorting: disable properties/tabs when inherited. Remove sorting animation.

Browse Source
This commit is contained in:
Mads Rasmussen
2015-06-23 09:25:29 +02:00
parent a1498b6242
commit ea9604c260
3 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/Umbraco.Web.UI.Client/src/less/pages/document-type-editor.less
View File

@@ -336,7 +336,7 @@
.edt-property-inherited-from {
font-size: 11px;
background-color: #d9d9d9;
background-color: #E9E9E9;
margin-left: 5px;
position: absolute;
right: 0;
@@ -371,17 +371,18 @@
.edt-property {
height: 40px;
margin-bottom: 10px;
background: #E9E9E9;
color: @grayDarker;
border-radius: @baseBorderRadius;
padding: 0;
cursor: move;
border: none;
display: flex;
align-items: center;
}
.edt-property-meta {
padding: 10px 0 0 10px;
padding: 0 0 0 10px;
width: auto;
flex: 1;
.icon {
@@ -399,6 +400,17 @@
}
}
.property-name {
font-size: 12px;
font-weight: bold;
margin-right: 2px;
}
.item-alias {
font-size: 12px;
color: #cccccc;
}
.edt-property-preview {
display: none;
}
@@ -412,6 +424,7 @@
}
.edt-property.property-is-inherited {
background: @grayLighter;
cursor: auto;
.icon-navigation {
visibility: hidden;
@@ -427,15 +440,15 @@
// sorting placeholders
.ui-sortable-tabs-placeholder {
background: transparent;
border: 2px solid #E9E9E9;
border: 1px dashed @grayLight;
margin: 0 0 70px 0;
border-radius: 10px;
}
.ui-sortable-properties-placeholder {
background: transparent;
border: 2px solid #E9E9E9;
margin-bottom: 10px;
border: 1px dashed @grayLight;
margin-bottom: 5px;
}

4
src/Umbraco.Web.UI.Client/src/views/documenttype/edit.controller.js
View File

@@ -610,7 +610,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
$scope.sortableOptionsTab = {
distance: 10,
revert: true,
tolerance: "pointer",
opacity: 0.7,
scroll: true,
@@ -618,6 +617,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
placeholder: "ui-sortable-tabs-placeholder",
zIndex: 6000,
handle: ".edt-tab-handle",
items: ".edt-tab-sortable",
start: function (e, ui) {
ui.placeholder.height(ui.item.height());
},
@@ -628,7 +628,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
$scope.sortableOptionsEditor = {
distance: 10,
revert: true,
tolerance: "pointer",
connectWith: ".edt-property-list",
opacity: 0.7,
@@ -637,6 +636,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
placeholder: "ui-sortable-properties-placeholder",
zIndex: 6000,
handle: ".edt-property-handle",
items: ".edt-property-sortable",
start: function (e, ui) {
ui.placeholder.height(ui.item.height());
},

14
src/Umbraco.Web.UI.Client/src/views/documenttype/views/design/design.html
View File

@@ -1,7 +1,7 @@
<!-- TABS -->
<ul ui-sortable="sortableOptionsTab" ng-model="contentType.groups" class="content-type-groups-list no-style-list">
<li ng-repeat="tab in contentType.groups">
<li ng-repeat="tab in contentType.groups" ng-class="{'edt-tab-sortable': sortingMode && !tab.inherited}">
<!-- TAB INIT STATE -->
<div class="edt-tab umb-card edt-tab-placeholder" ng-click="addTab(tab)" ng-show="tab.tabState=='init' && !sortingMode" ng-class="{'tab-state-init animated fadeIn': tab.tabState=='init'}">
@@ -20,7 +20,7 @@
</div>
<!-- TAB ACTIVE OR INACTIVE STATE -->
<div class="edt-tab umb-card" ng-class="{'tab-state-active':tab.tabState=='active', 'tab-state-inactive': tab.tabState=='inActive', 'tab-is-inherited': tab.inherited, 'edt-tab-handle': sortingMode}" ng-click="activateTab(tab)" ng-if="tab.tabState !== 'init'">
<div class="edt-tab umb-card" ng-class="{'tab-state-active':tab.tabState=='active', 'tab-state-inactive': tab.tabState=='inActive', 'tab-is-inherited': tab.inherited, 'edt-tab-handle': sortingMode && !tab.inherited}" ng-click="activateTab(tab)" ng-if="tab.tabState !== 'init'">
<div class="tab-remove" ng-if="!sortingMode && tab.properties.length <= 1">
<i class="icon icon-trash" ng-click="removeTab($index)"></i>
@@ -29,7 +29,7 @@
<div class="tab-title-wrapper">
<div class="tab-title">
<i class="icon icon-navigation" ng-if="sortingMode"></i>
<i class="icon icon-navigation" ng-if="sortingMode && !tab.inherited"></i>
<input class="tab-title-input" type="text" placeholder="Enter name..." ng-model="tab.name" ng-class="{'tab-title-placeholder': tab.name == ''}" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" ng-disabled="tab.inherited" umb-auto-focus umb-auto-resize />
</div>
@@ -46,7 +46,7 @@
<div class="edt-property-group">
<ul class="edt-property-list no-style-list" ui-sortable="sortableOptionsEditor"
ng-model="tab.properties" class="no-style-list">
<li ng-repeat="property in tab.properties">
<li ng-class="{'edt-property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
<!-- Init property / Property placeholder / add new property -->
<div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="editPropertyTypeSettings(property)">
@@ -69,7 +69,7 @@
</div>
<div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active', 'property-is-inherited': property.inherited, 'edt-property-handle': sortingMode}">
<div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active', 'property-is-inherited': property.inherited, 'edt-property-handle': sortingMode && !property.inherited}">
<!-- property meta text -->
<div class="edt-property-meta">
@@ -92,8 +92,8 @@
<div ng-if="sortingMode">
<i class="icon icon-navigation"></i>
<span>{{ property.label }}</span>:
<span class="item-alias">{{ property.alias }}</span>
<span class="property-name">{{ property.label }}</span>
<span class="item-alias">({{ property.alias }})</span>
</div>
</div>