Untitled
unknown
plain_text
a year ago
31 kB
2
Indexable
<div ng-controller="CssStylesPicker.EditorDialog.Controller as vm">
<form novalidate name="htmlOptionForm" val-form-manager>
<umb-editor-view>
<umb-editor-header
name="model.title"
name-locked="true"
hide-alias="true"
hide-icon="true"
hide-description="true"
>
</umb-editor-header>
<umb-editor-container>
<umb-box class="whiteboard">
<umb-box-content class="block-form">
<!-- Additional Styling content start -->
<!-- DropDown Section Picker start -->
<div
style="position: relative"
class="dropdown-picker"
ng-if="vm.stylingProperties.alias"
>
<span class="dropdown-label"
>{{vm.stylingProperties.alias.name}}</span
>
<umb-button
type="button"
ng-init="vm.getSectionDropDownValue(vm.stylingProperties.alias)"
label="{{vm.stylingProperties.alias.value}}"
action="vm.handleDropDownOpen(vm.stylingProperties.alias)"
icon="icon-navigation-down"
class="dropdown-button"
>
</umb-button>
<umb-dropdown
ng-if="vm.stylingProperties.alias.dropdownOpen"
on-close="vm.handleDropDownClose(vm.stylingProperties.alias)"
umb-keyboard-list
>
<umb-dropdown-item
ng-repeat="item in vm.stylingProperties.alias.items"
>
<button
type="button"
class="btn-reset"
ng-click="vm.selectSection(item, vm.stylingProperties.alias)"
>
{{ item.label }}
</button>
</umb-dropdown-item>
</umb-dropdown>
</div>
<!-- DropDown Section Picker End -->
<!-- Tabs component start -->
<div
ng-init="vm.tabselector"
class="tabs-wrapper"
ng-if="vm.stylingProperties.alias.value !== 'Select value'"
>
<div class="tabs">
<a
class="tab"
ng-repeat="tab in vm.tabs"
ng-click="vm.selectTab(tab.selector)"
ng-class="vm.addActiveClass(tab.selector)"
ng-if="tab.show"
>{{tab.label}}</a
>
</div>
<div class="tab-buttons">
<a
class="tab-button"
ng-repeat="($tabIndex, tab) in vm.tabs"
ng-if="tab.isRemovable"
ng-click="vm.toggleTabShow(tab, $tabIndex)"
>{{vm.getButtonLabel(!tab.show, tab)}}</a
>
</div>
<!-- Tabs Component Children start -->
<div>
<div
ng-repeat="tab in vm.tabs"
ng-if="vm.tabselector === tab.selector"
class="section"
>
<div class="section__settings">
<div
ng-repeat="($settingIndex, setting) in tab.settings"
class="section-setting"
>
<!-- Toggle Picker start -->
<div
class="toggle-picker"
ng-if="setting.type === 'toggle' && setting.show"
>
<umb-toggle
checked="setting.value"
on-click="vm.toggle(tab.settings[$settingIndex])"
>
</umb-toggle>
<span
class="toggle-picker__label"
>{{setting.name}}</span
>
<div class="positioned">
<umb-icon
icon="icon-info"
class="toggle-picker__icon"
ng-mouseover="vm.mouseOver(setting)"
ng-mouseleave="vm.mouseLeave(setting)"
ng-if="setting.tooltipMessage"
>
</umb-icon>
<umb-tooltip
ng-if="setting.showTooltip"
class="toggle-picker__tooltip"
>
{{setting.tooltipMessage}}
</umb-tooltip>
</div>
</div>
<!-- Toggle Picker End -->
<!-- DropDown Add Subsection Picker start -->
<div
style="position: relative"
class="dropdown-picker"
ng-if="setting.type === 'dropdown-add' && setting.items.length && setting.show"
>
<umb-button
type="button"
label="Select section"
action="vm.handleDropDownOpen(setting)"
icon="icon-navigation-down"
class="dropdown-button"
>
</umb-button>
<umb-dropdown
ng-if="setting.dropdownOpen"
on-close="vm.handleDropDownClose(setting)"
umb-keyboard-list
>
<umb-dropdown-item
ng-repeat="item in setting.items"
>
<button
type="button"
class="btn-reset"
ng-click="vm.addSubsection(item, tab, $settingIndex)"
>
{{ item.title }}
</button>
</umb-dropdown-item>
</umb-dropdown>
</div>
<!-- DropDown Add Subsection Picker End -->
</div>
</div>
<!-- Subsection styling settins start -->
<div
ng-repeat="($styledSectionIndex, styledSection) in tab.styledSectionsSettings"
class="styled-sections"
>
<hr class="divider" />
<div class="styled-sections__wrapper">
<div
class="styled-sections__header"
>
<div
class="styled-sections__title"
>
{{styledSection.title}}
</div>
<umb-icon
icon="icon-trash"
class="remove-section__icon"
>
</umb-icon>
</div>
<div
ng-repeat="($subSectionIndex, subSection) in styledSection.subSections"
ng-if="tab.selector === 'mobile' || (tab.selector === 'tablet' && !subSection.isOnlyMobile) || (tab.selector === 'desktop' && !subSection.isOnlyMobile)"
>
<div class="subsection__title">
{{subSection.title}}
</div>
<section
class="subsection__settings"
>
<div
ng-repeat="($subSectionSettingIndex, subSectionSetting) in subSection.settings"
ng-if="tab.selector === 'mobile' || (tab.selector === 'tablet' && !subSectionSetting.isOnlyMobile) || (tab.selector === 'desktop' && !subSectionSetting.isOnlyMobile)"
ng-class="{'subsection__setting--full': subSectionSetting.variants.length}"
class="subsection__setting"
>
<!-- Toggle Picker start -->
<div
class="toggle-picker"
ng-if="subSectionSetting.type === 'toggle' && subSectionSetting.show"
>
<umb-toggle
checked="subSectionSetting.value"
on-click="vm.toggle(subSection.settings[$subSectionSettingIndex])"
>
</umb-toggle>
<span
class="toggle-picker__label"
>{{subSectionSetting.name}}</span
>
<div
class="positioned"
>
<umb-icon
icon="icon-info"
class="toggle-picker__icon"
ng-mouseover="vm.mouseOver($settingIndex, tab)"
ng-mouseleave="vm.mouseLeave($settingIndex, tab)"
ng-if="subSectionSetting.tooltipMessage"
>
</umb-icon>
<umb-tooltip
ng-if="subSectionSetting.showTooltip"
class="toggle-picker__tooltip"
>
{{subSectionSetting.tooltipMessage}}
</umb-tooltip>
</div>
</div>
<!-- Toggle Picker End -->
<!-- DropDown Picker start -->
<div
style="
position: relative;
"
class="dropdown-picker"
ng-if="subSectionSetting.type === 'dropdown' && subSectionSetting.items.length"
>
<span
class="dropdown-label"
>{{subSectionSetting.name}}</span
>
<umb-button
type="button"
ng-init="vm.getDropDownValue(subSectionSetting)"
label="{{subSectionSetting.value}}"
action="vm.handleDropDownOpen(subSectionSetting)"
icon="icon-navigation-down"
class="dropdown-button"
>
</umb-button>
<umb-dropdown
ng-if="subSectionSetting.dropdownOpen"
on-close="vm.handleDropDownClose(subSectionSetting)"
umb-keyboard-list
>
<umb-dropdown-item
ng-repeat=" item in subSectionSetting.items"
>
<button
type="button"
class="btn-reset"
ng-click="vm.selectDropDownValue(item, subSection.settings, $subSectionSettingIndex)"
>
{{ item
}}
</button>
</umb-dropdown-item>
</umb-dropdown>
</div>
<!-- DropDown Picker End -->
<!-- Color Picker start -->
<div
ng-if="subSectionSetting.type === 'colorPicker'"
class="color-picker"
>
<span
class="color-picker__label"
>{{subSectionSetting.name}}</span
>
<umb-color-picker
options="{color: subSectionSetting.value}"
class="umb-color-picker color-picker"
on-change="vm.changeColor(color, subSectionSetting)"
>
</umb-color-picker>
</div>
<!-- Color Picker End -->
<div class="variants">
<div
ng-repeat="($variantIndex, variant) in subSectionSetting.variants[+subSectionSetting.value]"
class="variant__wrapper"
>
<!-- DropDown Picker start -->
<div
style="
position: relative;
"
class="dropdown-picker"
ng-if="variant.type === 'dropdown' && variant.items.length"
>
<span
class="dropdown-label"
>{{variant.name}}
</span>
<umb-button
type="button"
ng-init="vm.getDropDownValue(subSectionSetting.variants[+subSectionSetting.value][$variantIndex])"
label="{{subSectionSetting.variants[+subSectionSetting.value][$variantIndex].value}}"
action="vm.handleDropDownOpen(subSectionSetting.variants[+subSectionSetting.value][$variantIndex])"
icon="icon-navigation-down"
class="dropdown-button"
>
</umb-button>
<umb-dropdown
ng-if="variant.dropdownOpen"
on-close="vm.handleDropDownClose(subSectionSetting.variants[+subSectionSetting.value][$variantIndex])"
umb-keyboard-list
>
<umb-dropdown-item
ng-repeat="item in variant.items"
>
<button
type="button"
class="btn-reset"
ng-click="vm.selectDropDownValue(item, subSectionSetting.variants[+subSectionSetting.value], $variantIndex)"
>
{{
item
}}
</button>
</umb-dropdown-item>
</umb-dropdown>
</div>
<!-- DropDown Picker End -->
<!-- Color Picker start -->
<div
ng-if="variant.type === 'colorPicker'"
class="color-picker"
>
<span
class="color-picker__label"
>{{variant.name}}</span
>
<umb-color-picker
options="{color: variant.value}"
class="umb-color-picker color-picker"
on-change="vm.changeColor(color, subSectionSetting.variants[+subSectionSetting.value][$variantIndex])"
>
</umb-color-picker>
</div>
<!-- Color Picker End -->
<!-- Toggle Picker start -->
<div
class="toggle-picker"
ng-if="variant.type === 'toggle' && variant.show"
>
<umb-toggle
checked="variant.value"
on-click="vm.toggle(subSectionSetting.variants[+subSectionSetting.value][$variantIndex])"
>
</umb-toggle>
<span
class="toggle-picker__label"
>{{variant.name}}</span
>
<div
class="positioned"
>
<umb-icon
icon="icon-info"
class="toggle-picker__icon"
ng-mouseover="vm.mouseOver($settingIndex, tab.selector)"
ng-mouseleave="vm.mouseLeave($settingIndex, tab.selector)"
ng-if="variant.tooltipMessage"
>
</umb-icon>
<umb-tooltip
ng-if="variant.showTooltip"
class="toggle-picker__tooltip"
>
{{variant.tooltipMessage}}
</umb-tooltip>
</div>
</div>
<!-- Toggle Picker End -->
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- Subsection styling settins end -->
</div>
</div>
<!-- Tabs Component Children end -->
</div>
<!-- Tabs component end -->
<!-- Additional Styling content end -->
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="vm.close()"
>
</umb-button>
<umb-button
type="button"
alias="submit"
button-style="success"
label-key="general_submit"
state="vm.saveButtonState"
action="vm.submit(vm.item)"
>
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</umb-editor-view>
</form>
</div>