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

wip clean up doc type editor

Browse Source
This commit is contained in:
Mads Rasmussen
2018-08-30 19:42:30 +02:00
parent 748fc3310b
commit f450abb5c2
3 changed files with 62 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
View File

@@ -8,13 +8,12 @@
.umb-group-builder__group {
min-height: 86px;
margin: 50px 0 0 0;
border: 2px solid @gray-7;
border-radius: 0 10px 10px 10px;
padding: 10px 10px 5px 10px;
border: 1px solid transparent;
border-radius: @baseBorderRadius;
box-sizing: border-box;
background-color: @white;
position:relative;
position: relative;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
}
.umb-group-builder__group.-active {
@@ -24,6 +23,7 @@
.umb-group-builder__group.-inherited {
border-color: @gray-9;
animation: fadeIn 0.5s;
box-shadow: none;
}
.umb-group-builder__group.-placeholder {
@@ -32,10 +32,11 @@
justify-content: center;
align-items: center;
cursor: pointer;
border: 1px dashed @gray-8;
border: 1px dashed @gray-7;
color: @turquoise-d1;
font-weight: bold;
position: relative;
box-shadow: none;
}
.umb-group-builder__group.-sortable {
@@ -57,9 +58,8 @@
}
.umb-group-builder__group-remove {
position: absolute;
top: -30px;
right: 20px;
position: relative;
margin-left: auto;
font-size: 18px;
}
@@ -71,28 +71,15 @@
.umb-group-builder__group-title-wrapper {
display: flex;
align-items: center;
margin-left: -12px;
margin-top: -55px;
}
.umb-group-builder__group-title-wrapper.-placeholder {
position: absolute;
left: -1px;
top: -44px;
margin-left: 0;
margin-top: 0;
border-bottom: 1px solid @gray-9;
padding: 10px 15px;
}
.umb-group-builder__group-title {
padding: 5px 9px 0 9px;
height: 38px;
background: @white;
border: 2px solid @gray-7;
border-bottom: none;
border-radius: 10px 10px 0 0;
font-weight: bold;
display: flex;
align-items: center;
color: @black;
}
.umb-group-builder__group-title-icon {
@@ -117,10 +104,14 @@ input.umb-group-builder__group-title-input {
border-color: transparent;
background: transparent;
font-weight: bold;
color: @gray-3;
color: @black;
margin-bottom: 0;
}
input.umb-group-builder__group-title-input:disabled:hover {
border: none;
}
.umb-group-builder__group-title-input:hover {
border-color: @inputBorder;
}
@@ -131,17 +122,16 @@ input.umb-group-builder__group-title-input {
.umb-group-builder__group-inherited-label {
font-size: 13px;
color: @gray-8;
display: inline-block;
position: relative;
top: 2px;
margin-left: 10px;
}
.umb-group-builder__group-sort-order {
display: flex;
align-items: center;
margin-left: 10px;
margin-left: auto;
}
/* ---------- PROPERTIES ---------- */
@@ -149,7 +139,7 @@ input.umb-group-builder__group-title-input {
.umb-group-builder__properties {
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
min-height: 35px; // the height of a sortable property
}
@@ -157,35 +147,23 @@ input.umb-group-builder__group-title-input {
position: relative;
display: flex;
flex-flow: row;
margin-bottom: 5px;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
box-sizing: border-box;
border-bottom: 1px solid @gray-10;
padding: 10px 0;
}
.umb-group-builder__property:hover {
border: 1px dashed @inputBorder;
.umb-group-builder__property:first-of-type {
padding-top: 0;
}
.umb-group-builder__property.-placeholder {
background: @white;
border: 1px dashed @gray-8;
border-radius: 5px;
cursor: pointer;
align-items: center;
animation: fadeIn 0.5s;
.umb-group-builder__property:last-of-type {
margin-bottom: 15px;
}
.umb-group-builder__property.-inherited {
border: transparent;
animation: fadeIn 0.5s;
}
.umb-group-builder__property.-inherited:hover {
border: transparent;
}
.umb-group-builder__property.-locked {
border: transparent;
animation: fadeIn 0.5s;
@@ -198,14 +176,16 @@ input.umb-group-builder__group-title-input {
.umb-group-builder__property.-sortable,
.umb-group-builder__property.-sortable-locked {
min-height: 35px;
border-radius: 5px;
border-radius: @baseBorderRadius;
border: none;
animation: none;
align-items: center;
padding: 5px 10px;
margin-bottom: 5px;
}
.umb-group-builder__property.-sortable {
background: @gray-9;
background: @gray-10;
color: @gray-1;
cursor: move;
}
@@ -217,16 +197,17 @@ input.umb-group-builder__group-title-input {
.umb-group-builder__property-meta {
flex: 0 0 175px;
flex: 0 0 250px;
margin-right: 20px;
}
.umb-group-builder__property-meta.-full-width {
flex: 1;
margin-right: 0;
}
.umb-group-builder__property-meta-alias {
font-size: 10px;
font-size: 12px;
color: @gray-3;
word-break: break-word;
line-height: 1.5;
@@ -273,7 +254,7 @@ input.umb-group-builder__group-title-input {
overflow: hidden;
position: relative;
padding: 35px 10px 25px 10px;
background: url("../img/checkered-background-20.png");
background-color: @gray-10;
}
.umb-group-builder__property-preview:hover {
@@ -357,42 +338,6 @@ input.umb-group-builder__group-title-input {
margin-right: 3px;
}
/* ---------- PLACEHOLDER BOX ---------- */
.umb-group-builder__placeholder-box {
background: @gray-9;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: bold;
color: @turquoise-d1;
}
.umb-group-builder__placeholder-box.-input {
height: 10px;
margin-bottom: 5px;
}
.umb-group-builder__placeholder-box.-input-small {
height: 5px;
margin-bottom: 5px;
width: 25%;
}
.umb-group-builder__placeholder-box.-text-full-width {
height: 3px;
margin-bottom: 3px;
}
.umb-group-builder__placeholder-box.-text-short {
height: 3px;
margin-bottom: 3px;
width: 75%;
}
/* ---------- SORTABLE ---------- */
.umb-group-builder__group-sortable-placeholder {
@@ -418,6 +363,11 @@ input.umb-group-builder__group-title-input {
text-align: center;
}
input.umb-group-builder__group-sort-value {
margin-bottom: 0;
margin-left: auto;
}
/* ---------- DIALOGS ---------- */

71
src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
View File

@@ -38,29 +38,12 @@
<!-- TAB INIT STATE -->
<a href="" class="umb-group-builder__group -placeholder" hotkey="alt+shift+t" ng-click="addGroup(tab)" ng-if="tab.tabState=='init' && !sortingMode" data-element="group-add">
<div class="umb-group-builder__group-title-wrapper -placeholder">
<div class="umb-group-builder__group-title -placeholder"></div>
</div>
<localize ng-if="model.groups.length === 1" key="contentTypeEditor_addNewTab"></localize>
<localize ng-if="model.groups.length > 1" key="contentTypeEditor_addAnotherTab"></localize>
<localize key="contentTypeEditor_addGroup"></localize>
</a>
<!-- TAB ACTIVE OR INACTIVE STATE -->
<div class="umb-group-builder__group" ng-if="tab.tabState !== 'init'" ng-class="{'-active':tab.tabState=='active', '-inherited': tab.inherited, 'umb-group-builder__group-handle -sortable': sortingMode && !tab.inherited}" ng-click="activateGroup(tab)">
<div class="umb-group-builder__group-remove" ng-if="!sortingMode && tab.properties.length <= 1">
<i class="icon-trash" ng-click="togglePrompt(tab)"></i>
<umb-confirm-action
ng-if="tab.deletePrompt"
direction="left"
on-confirm="removeGroup($index)"
on-cancel="hidePrompt(tab)">
</umb-confirm-action>
</div>
<div class="umb-group-builder__group-title-wrapper">
<ng-form name="groupNameForm" data-element="group-name">
@@ -89,6 +72,15 @@
</div>
</ng-form>
<div class="umb-group-builder__group-inherited-label" ng-if="tab.inherited">
<i class="icon icon-merge"></i>
<localize key="contentTypeEditor_inheritedFrom"></localize>: {{ tab.inheritedFromName }}
<span ng-repeat="contentTypeName in tab.parentTabContentTypeNames">
<a href="#/settings/documentTypes/edit/{{tab.contentTypeId}}">{{ contentTypeName }}</a>
<span ng-if="!$last">, </span>
</span>
</div>
<ng-form name="groupSortOrderForm">
<div class="umb-group-builder__group-sort-order" ng-if="sortingMode">
<input name="groupSortOrder" type="number" class="umb-property-editor-tiny" style="margin-bottom: 0;" ng-model="tab.sortOrder" ng-disabled="tab.inherited" on-blur="changeSortOrderValue(tab)" required />
@@ -101,14 +93,14 @@
</div>
</ng-form>
<div class="umb-group-builder__group-inherited-label" ng-if="tab.inherited">
<i class="icon icon-merge"></i>
<localize key="contentTypeEditor_inheritedFrom"></localize> {{ tab.inheritedFromName }}
<span ng-repeat="contentTypeName in tab.parentTabContentTypeNames">
<a href="#/settings/documentTypes/edit/{{tab.contentTypeId}}">{{ contentTypeName }}</a>
<span ng-if="!$last">, </span>
</span>
<div class="umb-group-builder__group-remove" ng-if="!sortingMode">
<i class="icon-trash" ng-click="togglePrompt(tab)"></i>
<umb-confirm-action
ng-if="tab.deletePrompt"
direction="left"
on-confirm="removeGroup($index)"
on-cancel="hidePrompt(tab)">
</umb-confirm-action>
</div>
</div>
@@ -117,34 +109,17 @@
<li data-element="property-{{property.alias}}" ng-class="{'umb-group-builder__property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
<!-- Init property / Property placeholder / add new property -->
<!-- Add new property -->
<a href=""
data-element="property-add"
class="umb-group-builder__property -placeholder"
class="btn btn-info"
ng-if="property.propertyState=='init' && !sortingMode"
ng-class="{'-placeholder': property.propertyState=='init'}"
hotkey="alt+shift+p"
hotkey-when="{{tab.tabState === 'active' && property.propertyState=='init'}}"
ng-click="addProperty(property, tab)"
on-focus="activateGroup(tab)"
focus-when="{{property.focus}}">
<div class="umb-group-builder__property-meta">
<div class="umb-group-builder__placeholder-box -input-small"></div>
<div class="umb-group-builder__placeholder-box -input"></div>
<div class="umb-group-builder__placeholder-box-group">
<div class="umb-group-builder__placeholder-box -text-full-width"></div>
<div class="umb-group-builder__placeholder-box -text-full-width"></div>
<div class="umb-group-builder__placeholder-box -text-short"></div>
</div>
</div>
<div class="umb-group-builder__property-preview umb-group-builder__placeholder-box">
<localize key="contentTypeEditor_addProperty"></localize>
</div>
<div class="umb-group-builder__property-actions"></div>
<localize key="contentTypeEditor_addProperty"></localize>
</a>
<div class="umb-group-builder__property" ng-if="property.propertyState!=='init'" ng-class="{'-active': property.dialogIsOpen, '-active': property.propertyState=='active', '-inherited': property.inherited, '-locked': property.locked, 'umb-group-builder__property-handle -sortable': sortingMode && !property.inherited, '-sortable-locked': sortingMode && property.inherited}">
@@ -194,11 +169,11 @@
</div>
</ng-form>
<div ng-if="sortingMode">
<div ng-if="sortingMode" class="flex items-center">
<i class="icon icon-navigation" ng-if="!property.inherited"></i>
<span class="umb-group-builder__property-meta-label">{{ property.label }}</span>
<span class="umb-group-builder__property-meta-alias">({{ property.alias }})</span>
<span ng-show="sortingMode"><input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="property.sortOrder" ng-disabled="property.inherited" /></span>
<input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="property.sortOrder" ng-disabled="property.inherited" />
</div>
</div>

3
src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View File

@@ -1634,8 +1634,7 @@ To manage your website, simply open the Umbraco back office and start adding con
<area alias="contentTypeEditor">
<key alias="compositions">Compositions</key>
<key alias="noTabs">You have not added any tabs</key>
<key alias="addNewTab">Add new tab</key>
<key alias="addAnotherTab">Add another tab</key>
<key alias="addGroup">Add Group</key>
<key alias="inheritedFrom">Inherited from</key>
<key alias="addProperty">Add property</key>
<key alias="requiredLabel">Required label</key>