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

first take on umb-property-info-button

Browse Source
This commit is contained in:
Niels Lyngsø
2020-08-21 10:09:15 +02:00
parent 268eca922f
commit 6a5bfcaa9c
5 changed files with 143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -202,6 +202,7 @@
// Property Editors
@import "../views/components/blockcard/umb-block-card-grid.less";
@import "../views/components/blockcard/umb-block-card.less";
@import "../views/components/umb-property-info-button/umb-property-info-button.less";
@import "../views/propertyeditors/blocklist/umb-block-list-property-editor.less";
@import "../views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.less";
@import "../views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.less";

5
src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.html Normal file
View File

@@ -0,0 +1,5 @@
<button type="button"
title="{{ vm.show ? '' : vm.buttonTitle}}"
class="btn-reset umb-outline umb-outline--surrounding __button"
ng-click="vm.onMouseClick($event)" ng-bind="vm.symbol"></button>
<div class="__tooltip" ng-if="vm.show" on-outside-click="vm.onMouseClickOutside($event)"><ng-transclude></ng-transclude></div>

101
src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umb-property-info-button.less Normal file
View File

@@ -0,0 +1,101 @@
umb-property-info-button {
position: relative;
display: inline-block;
vertical-align: text-bottom;
.control-label + & {
margin-left: -8px;
}
> .__button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding-left: 1px;
font-size: 12px;
font-weight: 700;
border-radius: 50%;
border: 1px solid @ui-option-type;
box-shadow: 0 0 2px @ui-option-type;
color: @ui-option-type;
&:hover {
border-color: @ui-option-type-hover;
color: @ui-option-type-hover;
}
}
> .__tooltip {
position: absolute;
z-index: 1000;
top: 26px;
left: -6px;
font-size: @fontSizeSmall;
border-radius: 6px;
min-width: 240px;
max-width: 320px;
padding: 5px 10px;
background-color: @blueExtraDark;
color: white;
box-shadow: 0 3px 6px rgba(@blueDark, .24);
a {
color: white;
text-decoration: underline;
&:hover {
color: @blueMidLight;
}
}
&::before {
content:'';
position: absolute;
color: @blueExtraDark;
top: -4px;
left: 10px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid;
}
}
}
// hide umb-info-button if inside umb-property
.umb-property umb-property-info-button {
opacity: 0;
}
.umb-property:focus-within umb-property-info-button,
.umb-property:hover umb-property-info-button,
.umb-property umb-property-info-button:focus {
opacity: 1;
}
// Revert-style-hack that ensures that we only show property-actions on properties that are directly begin hovered.
.umb-property:hover .umb-property:not(:hover) umb-property-info-button {
opacity: 0;
}
// hide umb-info-button if inside
.umb-control-group umb-property-info-button {
opacity: 0;
}
.umb-control-group:focus-within umb-property-info-button,
.umb-control-group:hover umb-property-info-button,
.umb-control-group umb-property-info-button:focus {
opacity: 1;
}
// Revert-style-hack that ensures that we only show property-actions on properties that are directly begin hovered.
.umb-control-group:hover .umb-control-group:not(:hover) umb-property-info-button {
opacity: 0;
}

35
src/Umbraco.Web.UI.Client/src/views/components/umb-property-info-button/umbpropertyinfobutton.component.js Normal file
View File

@@ -0,0 +1,35 @@
(function () {
'use strict';
angular
.module('umbraco')
.component('umbPropertyInfoButton', {
templateUrl: 'views/components/umb-property-info-button/umb-property-info-button.html',
controller: UmbPropertyInfoButtonController,
controllerAs: 'vm',
transclude: true,
bindings: {
buttonTitle: "@?",
symbol: "@?"
}
});
function UmbPropertyInfoButtonController() {
var vm = this;
vm.show = false;
vm.onMouseClick = function ($event) {
vm.show = !vm.show;
};
vm.onMouseClickOutside = function ($event) {
vm.show = false;
};
vm.$onInit = function() {
vm.symbol = vm.symbol || "i";
};
}
})();

1
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
View File

@@ -37,6 +37,7 @@
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomView">Custom view</localize></label>
<umb-property-info-button button-title="Description for Custom view">Overwrite how this block appears in the BackOffice UI. Pick a .html file containing your presentation. <a href="#" target="_blank">Read more on Our</a></umb-property-info-button>
<div class="controls">
<div class="__settings-input --hasValue" ng-if="vm.block.view !== null" >