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

Accessibility: Fixes for "insert code snippet" view in macro pickers (#8711)

Browse Source
This commit is contained in:
Jan Skovgaard
2020-08-26 20:23:08 +02:00
committed by GitHub
parent 824d2fd46d
commit 52e40d41d2
2 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
View File

@@ -8,20 +8,20 @@
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 3px;
cursor: pointer;
text-align: left;
}
.umb-insert-code-box:hover,
.umb-insert-code-box.-selected {
background-color: @ui-option-hover;
color: @ui-action-type-hover;
//border-color: @ui-action-border-hover;
}
.umb-insert-code-box__title {
font-size: 15px;
margin-bottom: 5px;
font-weight: bold;
line-height: 1;
}
.umb-insert-code-box__description {

44
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
View File

@@ -9,32 +9,32 @@
hide-icon="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<div class="umb-insert-code-boxes">
<div ng-if="model.allowedTypes.umbracoField" class="umb-insert-code-box" ng-click="vm.openPageFieldOverlay()">
<div class="umb-insert-code-box__title"><localize key="template_insertPageField" />...</div>
<div class="umb-insert-code-box__description"><localize key="template_insertPageFieldDesc" /></div>
</div>
<div ng-if="model.allowedTypes.partial" class="umb-insert-code-box" ng-click="vm.openPartialOverlay()">
<div class="umb-insert-code-box__title"><localize key="template_insertPartialView" />...</div>
<div class="umb-insert-code-box__description">
<localize key="template_insertPartialViewDesc" />
</div>
</div>
<div ng-if="model.allowedTypes.macro" class="umb-insert-code-box" ng-click="vm.openMacroPicker()">
<div class="umb-insert-code-box__title"><localize key="template_insertMacro" />...</div>
<div class="umb-insert-code-box__description">
<localize key="template_insertMacroDesc" />
</div>
</div>
<div ng-if="model.allowedTypes.dictionary" class="umb-insert-code-box" ng-click="vm.openDictionaryItemOverlay()">
<div class="umb-insert-code-box__title"><localize key="template_insertDictionaryItem" />...</div>
<div class="umb-insert-code-box__description"><localize key="template_insertDictionaryItemDesc" /></div>
</div>
<button type="button" ng-if="model.allowedTypes.umbracoField" class="btn-reset umb-insert-code-box" ng-click="vm.openPageFieldOverlay()">
<h2 class="umb-insert-code-box__title"><localize key="template_insertPageField">Value</localize></h2>
<p class="umb-insert-code-box__description"><localize key="template_insertPageFieldDesc">Displays the value of a named field from the current page, with options to modify the value or fallback to alternative values.</localize></p>
</button>
<button type="button" ng-if="model.allowedTypes.partial" class="btn-reset umb-insert-code-box" ng-click="vm.openPartialOverlay()">
<h2 class="umb-insert-code-box__title"><localize key="template_insertPartialView">Partial view</localize></h2>
<p class="umb-insert-code-box__description">
<localize key="template_insertPartialViewDesc">A partial view is a separate template file which can be rendered inside another template, it's great for reusing markup or for separating complex templates into separate files.</localize>
</p>
</button>
<button type="button" ng-if="model.allowedTypes.macro" class="btn-reset umb-insert-code-box" ng-click="vm.openMacroPicker()">
<h2 class="umb-insert-code-box__title"><localize key="template_insertMacro">Macro</localize></h2>
<p class="umb-insert-code-box__description">
<localize key="template_insertMacroDesc">A Macro is a configurable component which is great for reusable parts of your design, where you need the option to provide parameters, such as galleries, forms and lists.</localize>
</p>
</button>
<button type="button" ng-if="model.allowedTypes.dictionary" class="btn-reset umb-insert-code-box" ng-click="vm.openDictionaryItemOverlay()">
<h2 class="umb-insert-code-box__title"><localize key="template_insertDictionaryItem">Dictionary item</localize></h2>
<p class="umb-insert-code-box__description"><localize key="template_insertDictionaryItemDesc">A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create designs for multilingual websites.</localize></p>
</button>
</div>
</umb-box-content>
</umb-box>
@@ -54,5 +54,5 @@
</umb-editor-footer>
</umb-editor-view>
</div>