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

restyled umb-overlay + added paste features in nested-content create-overlay

Browse Source
This commit is contained in:
Niels Lyngsø
2019-04-30 12:49:37 +02:00
parent 01116e21f4
commit 90912a4b2a
11 changed files with 129 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/less/belle.less
+1
View File
@@ -129,6 +129,7 @@
@import "components/tooltip/umb-tooltip.less";
@import "components/tooltip/umb-tooltip-list.less";
@import "components/overlays/umb-overlay-backdrop.less";
@import "components/overlays/umb-itempicker.less";
@import "components/umb-grid.less";
@import "components/umb-empty-state.less";
@import "components/umb-property-editor.less";
src/Umbraco.Web.UI.Client/src/less/components/card.less
+32 -21
View File
@@ -6,6 +6,7 @@
position: relative;
padding: 5px 10px 5px 10px;
background: white;
width: 100%;
.title{padding: 12px; color: @gray-3; border-bottom: 1px solid @gray-8; font-weight: 400; font-size: 16px; text-transform: none; margin: 0 -10px 10px -10px;}
@@ -84,20 +85,20 @@
padding: 0;
margin: 0 auto;
list-style: none;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.umb-card-grid li {
padding: 5px;
overflow: hidden;
font-size: 12px;
text-align: center;
width: 100px;
box-sizing: border-box;
position: relative;
width: 100px;
}
.umb-card-grid li.-four-in-row {
@@ -111,36 +112,46 @@
}
.umb-card-grid .umb-card-grid-item {
position: relative;
display: block;
width: 100%;
height: 100%;
//height: 100%;
padding-top: 100%;
border-radius: 3px;
padding-bottom: 5px;
transition: background-color 120ms;
> span {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: transparent;
}
}
.umb-card-grid .umb-card-grid-item:hover,
.umb-card-grid .umb-card-grid-item:focus,
.umb-card-grid .umb-card-grid-item:hover > *,
.umb-card-grid .umb-card-grid-item:focus > * {
background: @ui-option-hover;
.umb-card-grid .umb-card-grid-item:hover,
.umb-card-grid .umb-card-grid-item:focus {
background-color: @ui-option-hover;
color: @ui-option-type-hover;
cursor: pointer;
outline: none;
border-radius: 3px;
}
.umb-card-grid a {
color: @ui-option-type;
text-decoration: none;
}
color: @ui-option-type;
text-decoration: none;
}
.umb-card-grid i {
font-size: 30px;
line-height: 50px;
display: block;
color: @ui-option-type;
}
font-size: 30px;
line-height: 20px;
margin-bottom: 10px;
display: block;
}
.umb-card-grid .umb-card-grid-item__loading {
position: absolute;
src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+42 -37
View File
@@ -5,13 +5,13 @@
z-index: @zindexUmbOverlay;
animation: fadeIn 0.2s;
box-shadow: 0 10px 50px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.16);
text-align: left;
}
.umb-overlay__form {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
height: 100%;
}
.umb-overlay .umb-overlay-header {
@@ -19,37 +19,61 @@
border-bottom: 1px solid @purple-l3;
//background: @blueExtraDark;
//color:@u-white;
padding: 10px;
margin-top: 0;
flex-grow: 0;
flex-shrink: 0;
padding: 20px 30px 0;
}
.umb-overlay .umb-overlay__title {
.umb-overlay__section-header {
width: 100%;
margin-top:30px;
margin-bottom: 10px;
h5 {
display: inline;
}
button {
display: inline;
float: right;
background-color: transparent;
border:none;
&:hover {
color: @ui-option-type-hover;
}
}
}
.umb-overlay__title {
font-size: @fontSizeLarge;
color: @black;
font-weight: bold;
margin: 7px 0;
}
.umb-overlay .umb-overlay__subtitle {
.umb-overlay__subtitle {
font-size: @fontSizeSmall;
color: @gray-3;
margin: 0;
}
.umb-overlay .umb-overlay-container {
.umb-overlay-container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
overflow-y: auto;
overflow-x: hidden;
position: relative;
height: auto;
padding: 0px 30px;
margin-bottom: 10px;
max-height: calc(100vh - 170px);
overflow-y: auto;
}
.umb-overlay .umb-overlay-drawer {
.umb-overlay-drawer {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 31px;
@@ -60,16 +84,16 @@
border-top: 1px solid @purple-l3;
}
.umb-overlay .umb-overlay-drawer.-auto-height {
.umb-overlay-drawer.-auto-height {
flex-basis: auto;
}
.umb-overlay .umb-overlay-drawer .umb-overlay-drawer__align-right {
.umb-overlay-drawer .umb-overlay-drawer__align-right {
display: flex;
justify-content: flex-end;
}
.umb-overlay .umb-overlay-drawer .umb-overlay-drawer-content .dropdown-menu {
.umb-overlay-drawer .umb-overlay-drawer-content .dropdown-menu {
right: 0;
left: auto;
}
@@ -89,27 +113,23 @@
.umb-overlay.umb-overlay-center .umb-overlay-header {
border: none;
background: transparent;
padding: 20px 20px 0 20px;
padding: 30px 30px 0;
}
.umb-overlay.umb-overlay-center .umb-overlay__form {
max-height: 80vh;
}
.umb-overlay.umb-overlay-center .umb-overlay-container {
padding: 20px;
}
.umb-overlay.umb-overlay-center .umb-overlay-drawer {
border: none;
background: transparent;
padding: 0 20px 20px 20px;
padding: 0 30px 20px;
}
/* ---------- OVERLAY TARGET ---------- */
.umb-overlay.umb-overlay-target {
width: 400px;
height: 400px;
max-height: 100vh;
box-sizing: border-box;
border-radius: @baseBorderRadius;
}
@@ -117,18 +137,12 @@
.umb-overlay.umb-overlay-target .umb-overlay-header {
border: none;
background: transparent;
padding: 20px 20px 0 20px;
text-align: center;
}
.umb-overlay.umb-overlay-target .umb-overlay-container {
padding: 20px;
}
.umb-overlay.umb-overlay-target .umb-overlay-drawer {
border: none;
background: transparent;
padding: 0 20px 20px 20px;
padding: 0 30px 20px;
}
/* ---------- OVERLAY RIGHT ---------- */
@@ -143,14 +157,9 @@
.umb-overlay.umb-overlay-right .umb-overlay-header {
flex-basis: 100px;
padding: 20px;
box-sizing: border-box;
}
.umb-overlay.umb-overlay-right .umb-overlay-container {
padding: 20px;
}
// reset the top position to 0 because we are in a asbolute container and want to
// overlay to go all the way to the top
.umb-editors .umb-overlay.umb-overlay-right {
@@ -175,14 +184,10 @@
.umb-overlay.umb-overlay-left .umb-overlay-header {
flex-basis: 100px;
padding: 20px;
padding: 30px 30px 0;
box-sizing: border-box;
}
.umb-overlay.umb-overlay-left .umb-overlay-container {
padding: 20px;
}
@media (max-width: 767px) {
.umb-overlay.umb-overlay-left {
margin-left: 61px;
src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-itempicker.less
+3
View File
@@ -0,0 +1,3 @@
.umb-itempicker .form-search {
margin-top:10px;
}
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.html
+5 -3
View File
@@ -23,14 +23,16 @@
umb-auto-focus
no-dirty-check />
</div>
<ul class="umb-card-grid">
<li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'name' | filter:searchTerm"
ng-click="vm.selectItem(availableItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<i class="{{ availableItem.icon }}"></i>
{{ availableItem.name }}
<span>
<i class="{{ availableItem.icon }}"></i>
{{ availableItem.name }}
</span>
</a>
</li>
</ul>
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
+4 -2
View File
@@ -34,8 +34,10 @@
ng-click="selectMacro(availableItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<i class="icon-settings-alt"></i>
{{ availableItem.name }}
<span>
<i class="icon-settings-alt"></i>
{{ availableItem.name }}
</span>
</a>
</li>
</ul>
src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+29 -3
View File
@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Overlays.ItemPickerOverlay">
<div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
<div class="form-search" ng-hide="model.filter === false" style="margin-bottom: 15px;">
<i class="icon-search"></i>
@@ -11,13 +11,39 @@
no-dirty-check />
</div>
<div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:searchTerm).length > 0">
<h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
<button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)">
<i class="icon-trash"></i>
</button>
</div>
<ul class="umb-card-grid">
<li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm"
ng-click="pasteItem(pasteItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ pasteItem.name }}">
<span>
<i class="{{ pasteItem.icon }}"></i>
{{ pasteItem.name }}
</span>
</a>
</li>
</ul>
<div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:searchTerm).length > 0">
<h5><localize key="content_createEmpty">Create new</localize></h5>
</div>
<ul class="umb-card-grid">
<li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm"
ng-click="selectItem(availableItem)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
<i class="{{ availableItem.icon }}"></i>
{{ availableItem.name }}
<span>
<i class="{{ availableItem.icon }}"></i>
{{ availableItem.name }}
</span>
</a>
</li>
</ul>
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediatypepicker/mediatypepicker.html
+4 -2
View File
@@ -6,8 +6,10 @@
ng-click="select(mediatype)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{mediatype.name}}">
<i class="{{ mediatype.icon }}"></i>
{{ mediatype.name }}
<span>
<i class="{{ mediatype.icon }}"></i>
{{ mediatype.name }}
</span>
</a>
</li>
</ul>
src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+3 -1
View File
@@ -283,7 +283,9 @@
<key alias="readyToPublish">Klar til at udgive?</key>
<key alias="readyToSave">Klar til at gemme?</key>
<key alias="sendForApproval">Send til godkendelse</key>
<key alias="schedulePublishHelp">Vælg dato og klokkeslæt for at udgive og/eller afpublicere indholdet.</key>
<key alias="schedulePublishHelp">Vælg dato og klokkeslæt for at udgive og/eller afpublicere indholdet.</key>
<key alias="createEmpty">Opret ny</key>
<key alias="createFromClipboard">Indsæt fra udklipsmappen</key>
</area>
<area alias="blueprints">
<key alias="createBlueprintFrom">Opret en ny indholdsskabelon fra '%0%'</key>
src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+3 -1
View File
@@ -292,7 +292,9 @@
<key alias="readyToPublish">Ready to Publish?</key>
<key alias="readyToSave">Ready to Save?</key>
<key alias="sendForApproval">Send for approval</key>
<key alias="schedulePublishHelp">Select the date and time to publish and/or unpublish the content item.</key>
<key alias="schedulePublishHelp">Select the date and time to publish and/or unpublish the content item.</key>
<key alias="createEmpty">Create new</key>
<key alias="createFromClipboard">Paste from clipboard</key>
</area>
<area alias="blueprints">
<key alias="createBlueprintFrom">Create a new Content Template from '%0%'</key>
src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+3 -1
View File
@@ -49,7 +49,9 @@
<key alias="setPermissions">Set permissions</key>
<key alias="unlock">Unlock</key>
<key alias="createblueprint">Create Content Template</key>
<key alias="resendInvite">Resend Invitation</key>
<key alias="resendInvite">Resend Invitation</key>
<key alias="createEmpty">Create new</key>
<key alias="createFromClipboard">Paste from clipboard</key>
</area>
<area alias="actionCategories">
<key alias="content">Content</key>