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

Change add property flow + better styling of property settings dialog

Browse Source
This commit is contained in:
Mads Rasmussen
2015-05-28 16:34:37 +02:00
parent 4424f0a37b
commit 96d0c01217
4 changed files with 154 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -340,7 +340,7 @@
.editors-document-type-canvas.is-in-sorting-mode {
.edt-property {
height: 50px;
height: 40px;
margin-bottom: 10px;
background: #E9E9E9;
color: @grayDarker;
@@ -350,7 +350,7 @@
}
.edt-property-meta {
padding: 15px 0 0 10px;
padding: 10px 0 0 10px;
width: auto;
flex: 1;
.icon {
@@ -487,3 +487,95 @@
}
}
/* ---------- DIALOGS ---------- */
.content-type-editor-dialog.edit-property-settings {
.title-wrapper {
float: left;
width: 300px;
input.input-style-underline {
border: none;
//border-bottom: 1px solid #cccccc;
width: 100%;
box-sizing: border-box;
padding: 10px 0 0 0;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
&:focus {
outline: none;
}
}
.alias {
font-size: 13px;
color: @grayLight;
}
}
.editor-placeholder {
border: 2px dashed @grayLight;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
display: block;
border-radius: 5px;
color: @gray;
font-weight: bold;
font-size: 13px;
&:hover {
text-decoration: none;
}
}
.editor {
margin-bottom: 10px;
.editor-icon-wrapper {
border: 1px solid @grayLight;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border-radius: 5px;
float: left;
margin-right: 20px;
&:hover {
text-decoration: none;
border-color: @blueLight;
}
.icon {
font-size: 26px;
}
}
.editor-details {
float: left;
margin-top: 10px;
.editor-name {
font-weight: bold;
}
.editor-editor {
font-size: 12px;
}
}
}
textarea.description {
width: 100%;
box-sizing: border-box;
border: none;
}
.checkbox {
padding-left: 0;
margin-bottom: 20px;
}
.umb-editor {
width: 100%;
}
}

72
src/Umbraco.Web.UI.Client/src/views/documenttype/dialogs/editpropertysettings/editpropertysettings.html
View File

@@ -1,51 +1,63 @@
<div ng-controller="Umbraco.Editors.DocumentType.EditPropertySettingsController">
<div class="umb-overlay-body">
<div class="umb-overlay-body content-type-editor-dialog edit-property-settings">
<form>
<h5>Property settings</h5>
<div class="umb-control-group clearfix">
<label>Name</label>
<input type="text" class="input-full-width" ng-model="model.property.label" />
<div class="title-wrapper">
<input class="input-style-underline" ng-model="model.property.label" placeholder="Enter a name..." umb-auto-focus />
<a href="" class="alias">
<i class="icon icon-lock"></i>
<span>{{ model.property.alias }}</span>
</a>
</div>
<label>Alias</label>
<input type="text" class="input-full-width" ng-model="model.property.alias" />
</div>
<label>Description</label>
<textarea class="input-full-width" ng-model="model.property.description"></textarea>
<div class="umb-control-group clearfix">
<textarea class="description" ng-model="model.property.description" placeholder="Add your description here..."></textarea>
</div>
<h5>Validation</h5>
<div class="umb-control-group clearfix">
<label>Mandatory</label>
<input type="checkbox" ng-model="model.property.validation.mandatory">
<small>Lorem ipsum dolor</small>
<a href="" ng-if="!model.property.editor" class="editor-placeholder" ng-click="model.changePropertyEditor(model.property)">Add Editor</a>
<label>Validation</label>
<div>
<select class="umb-editor umb-dropdown">
<div class="editor clearfix" ng-if="model.property.editor">
<a href="" class="editor-icon-wrapper" ng-click="model.changePropertyEditor(model.property)">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataType.icon == null}"></i>
</a>
<div class="editor-details">
<div class="editor-name">{{ model.property.dataTypeName }}</div>
<div class="editor-editor">{{ model.property.editor }}</div>
</div>
</div>
<button class="btn" ng-click="model.editDataType(model.property)" ng-if="model.property.editor">Change editor settings</button>
</div>
<div class="umb-control-group clearfix">
<label class="checkbox">
<input type="checkbox"> Mandatory
</label>
<select class="umb-editor umb-dropdown" placeholder="Validation">
<option>Email</option>
<option>Number</option>
<option>Tekst</option>
<option>Etc...</option>
</select>
</div>
<h5>Property type</h5>
<label>Icon</label>
<i class="{{ model.property.dataType.icon }}" ng-class="{'icon-autofill': model.property.dataType.icon == null}"></i>
<label>Data type</label>
<div>{{ model.property.dataTypeName }}</div>
<label>Editor</label>
<div>{{ model.property.editor }}</div>
<button class="btn" ng-click="model.changePropertyEditor(model.property)">Change property editor</button>
<button class="btn" ng-click="model.editDataType(model.property)">Change editor settings</button>
<!--
<pre>{{ model | json }}</pre>
-->
</form>

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

@@ -295,6 +295,9 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
// set indicator on property to tell the dialog is open - is used to set focus on the element
property.dialogIsOpen = true;
// set property to active
property.propertyState = "active";
$scope.dialogModel.changePropertyEditor = function(property) {
$scope.choosePropertyType(property);
};
@@ -304,24 +307,33 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
};
$scope.dialogModel.submit = function(model){
property.dialogIsOpen = false;
$scope.showDialog = false;
$scope.dialogModel = null;
// push new init property to scope
addInitPropertyOnActiveTab();
};
$scope.dialogModel.close = function(model){
$scope.showDialog = false;
$scope.dialogModel = null;
// push new init property to scope
addInitPropertyOnActiveTab();
};
};
$scope.choosePropertyType = function(property) {
$scope.showDialog = true;
$scope.dialogModel = {};
$scope.dialogModel.title = "Choose property type";
$scope.dialogModel.view = "views/documentType/dialogs/property.html";
$scope.showDialog = true;
property.dialogIsOpen = true;
@@ -341,7 +353,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
console.log(property);
// open data type configuration
$scope.configDataType(property);
$scope.editPropertyTypeSettings(property);
// push new init tab to scope
addInitTab();
@@ -351,8 +363,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
};
$scope.dialogModel.close = function(model){
$scope.dialogModel = null;
$scope.showDialog = false;
$scope.editPropertyTypeSettings(property);
};
};
@@ -386,9 +397,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
// open settings dialog
$scope.editPropertyTypeSettings(property);
// push new init property to scope
addInitPropertyOnActiveTab();
});
});
@@ -396,8 +404,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
};
$scope.dialogModel.close = function(model){
$scope.showDialog = false;
$scope.dialogModel = null;
$scope.editPropertyTypeSettings(property);
};
};

23
src/Umbraco.Web.UI.Client/src/views/documenttype/edit.html
View File

@@ -65,32 +65,13 @@
<input class="tab-title-input" type="text" 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>
<!--
<div tabindex="-1" class="edt-tab-actions">
<div class="tab-action">
<div href="" class="umb-btn-round umb-btn-round-small" ng-click="deleteTab($index)">
<i class="icon icon-trash"></i>
</div>
</div>
<div class="tab-action edt-tab-handle" ng-if="contentType.groups.length > 1">
<div href="" class="umb-btn-round umb-btn-round-small">
<i class="icon icon-navigation"></i>
</div>
</div>
</div>
-->
<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">
<!-- 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="choosePropertyType(property, tab)">
<div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="editPropertyTypeSettings(property)">
<div class="edt-property-meta">
<div class="placeholder-input-small"></div>
@@ -142,7 +123,7 @@
<!-- property preview -->
<!-- ng-if="tab.tabState=='active'" -->
<div tabindex="-1" class="edt-property-preview" ng-click="choosePropertyType(property)">
<div tabindex="-1" class="edt-property-preview" ng-click="editPropertyTypeSettings(property)">
<span class="edt-property-preview-overlay">
<span class="overlay-text">Choose property type</span>