correcting presentation and styling of picked data type

This commit is contained in:
Niels Lyngsø
2020-01-10 14:57:43 +01:00
parent fadc161ac9
commit a6fcaecd9c
6 changed files with 55 additions and 27 deletions

View File

@@ -501,27 +501,41 @@ input.umb-group-builder__group-sort-value {
}
}
.editor {
.editor-wrapper {
margin-bottom: 10px;
.editor {
display: flex;
align-items: center;
border: 1px solid @gray-10;
color: @ui-action-discreet-type;
border-radius: @baseBorderRadius;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.12);
}
.editor-info {
flex: 1 0 auto;
text-align: left;
display: flex;
align-items: center;
}
.editor-icon-wrapper {
border: 1px solid @gray-8;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border-radius: 5px;
float: left;
margin-right: 20px;
flex: 0 0 60px;
.icon {
font-size: 26px;
font-size: 32px;
}
}
.editor-details {
float: left;
margin-top: 10px;
flex: 0 0 auto;
.editor-name {
display: block;
@@ -534,9 +548,15 @@ input.umb-group-builder__group-sort-value {
}
}
.editor-settings-icon {
.editor-remove-icon {
flex: 0 0 48px;
width: 48px;
height: 100%;
font-size: 18px;
margin-top: 8px;
color: @ui-action-type;
&:hover {
color: @ui-action-type-hover;
}
}
}

View File

@@ -24,7 +24,7 @@
ng-model="vm.searchTerm"
class="umb-search-field search-query search-input input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
placeholder="@placeholders_search"
umb-auto-focus
no-dirty-check />
</div>

View File

@@ -41,7 +41,7 @@
</div>
</div>
<div class="umb-control-group control-group">
<div class="umb-control-group control-group -no-border">
<textarea data-element="property-description"
class="editor-description"
ng-model="model.property.description"
@@ -63,21 +63,26 @@
<div class="editor clearfix" ng-if="model.property.editor">
<a href="" class="editor-icon-wrapper" ng-click="vm.openDataTypePicker(model.property)">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
</a>
<button class="btn-reset editor-info" ng-click="vm.openDataTypeSettings(model.property)">
<div class="editor-icon-wrapper">
<i class="icon {{ model.property.dataTypeIcon }}" ng-class="{'icon-autofill': model.property.dataTypeIcon == null}"></i>
</div>
<div class="editor-details">
<a href="" class="editor-name" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.dataTypeName }}</a>
<a href="" class="editor-editor" ng-click="vm.openDataTypePicker(model.property)">{{ model.property.editor }}</a>
</div>
<div class="editor-details">
<span class="editor-name">{{ model.property.dataTypeName }}</span>
<span class="editor-editor">{{ model.property.editor }}</span>
</div>
<a href class="editor-settings-icon pull-right"
ng-click="vm.openDataTypeSettings(model.property)"
hotkey="alt+shift+d"
ng-if="model.property.editor">
<i class="icon icon-settings"></i>
</a>
</button>
<button class="editor-remove-icon btn-reset pull-right"
ng-click="vm.openDataTypePicker(model.property)"
hotkey="alt+shift+d"
localize="title"
title="@actions_changeDataType"
>
<i class="icon icon-wrong"></i>
</button>
</div>