Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Aug 26, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
322cdfb
Add button elements and fix styling
BatJan Aug 22, 2020
024322c
Fix semantics and styling
BatJan Aug 22, 2020
9c37f6d
Add proper fallback texts in case the translations don't exist in cer…
BatJan Aug 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Umbraco.Web.UI.Client/src/less/components/umb-insert-code-box.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
44 changes: 22 additions & 22 deletions ...o.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -54,5 +54,5 @@
</umb-editor-footer>

</umb-editor-view>

</div>