282 lines
13 KiB
HTML
282 lines
13 KiB
HTML
<link rel="stylesheet" type="text/css" href="scripts/ckeditor/skins/moono/editor_gecko.css">
|
|
|
|
<div class="create-ka" auto-focus tabindex="-1">
|
|
<div loading-spinner if="state.dataIsLoading" centered="true" overlay="true"></div>
|
|
|
|
<div class="create-ka__header">
|
|
<h3 id="modalLabel" class="create-ka__page-title">{{'config.kaStyle.header' | i18n}}</h3>
|
|
<span class="create-ka__page-action-description">{{ 'config.kaStyle.sub.header' | i18n }}</span>
|
|
</div>
|
|
|
|
<div class="ka-config__content">
|
|
<div class="ka-config__list">
|
|
<div class="ka-config__section-header">{{'config.kaStyle.list.label' | i18n}}</div>
|
|
<div class="ka-config__list-item"
|
|
ng-repeat="template in templates | orderBy: 'name'"
|
|
ng-click="selectTemplate(template)"
|
|
ng-enter="selectTemplate(template)"
|
|
ng-class="{'ka-config__list-item-selected' : template.id == selectedTemplate.id}"
|
|
aria-label="{{template.templateObject.label}}" role="link" tabindex="0">
|
|
<div class="ka-config__list-item-icon"><i class="icon-lightbulb_o"></i></div>
|
|
<div class="ka-config__list-item-content">
|
|
<div class="ka-config__list-item-content-label">{{template.templateObject.label}}</div>
|
|
<div>{{'config.kaStyle.styleCount' | i18n : template.templateObject.styles.length}}</div>
|
|
</div>
|
|
<div class="ka-config__list-item-pointer"><i class="icon-angle_right"></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
<form name="stylesForm" class="ka-config__edit" novalidate>
|
|
<div ng-if="selectedTemplate.templateObject">
|
|
<div class="ka-config__section-header">{{'config.kaStyle.edit.label' | i18n}}</div>
|
|
<div ng-repeat="style in selectedTemplate.templateObject.styles">
|
|
<div class="ka-config__edit-item"
|
|
ng-click="selectStyle(style)"
|
|
ng-enter="selectStyle(style)"
|
|
aria-label="{{style.type}}" role="link" tabindex="0">
|
|
|
|
<div class="ka-config__edit-item-container" >
|
|
<div ng-if="style.type" class="ka-config__edit-item-label" ng-attr-style="{{style.styles}}">{{style.type}}</div>
|
|
<div ng-if="!style.type" class="ka-config__edit-item-label ka-config__edit-required-field">
|
|
<i class="icon-exclamation_triangle"></i> {{'config.kaStyle.nameMissingWarning.label' | i18n}}
|
|
</div>
|
|
<div class="ka-config__edit-item-summary"> ({{style.text || 'config.kaStyle.useDefault.label' | i18n}})</div>
|
|
</div>
|
|
<div class="ka-config__edit-item-container2" >
|
|
<div class="ka-config__edit-item-delete-btn" ng-if="style.userStyle">
|
|
<button type="button" class="btn_no-fill ka-config__delete-btn" ng-click="deleteStyle($index, $event)" ng-enter="deleteStyle($index, $event)"
|
|
aria-label="{{'config.kaStyle.button.deleteStyle' | i18n}}">
|
|
<i class="icon-cross"></i>
|
|
<span>{{'config.kaStyle.button.deleteStyle' | i18n}}</span>
|
|
</button>
|
|
</div>
|
|
<div class="ka-config__edit-item-pointer">
|
|
<i class="icon-angle_down" ng-if="selectedStyle.type != style.type"></i>
|
|
<i class="icon-angle_up" ng-if="selectedStyle.type == style.type"></i>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div collapse="!style.isExpanded">
|
|
<div class="ka-config__edit-content">
|
|
|
|
<div class="col-sm-12"></div>
|
|
|
|
<div class="col-sm-4">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text_required">
|
|
{{ 'config.kaStyle.name.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item">
|
|
<input type="text"
|
|
aria-required="true"
|
|
title="{{ 'config.kaStyle.name.label' | i18n }}"
|
|
class="custom-input"
|
|
ng-model="style.type"
|
|
ng-disabled="!style.userStyle"
|
|
placeholder="{{ 'config.kaStyle.name.label.placeholder' | i18n }}"
|
|
required>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-2">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{'config.kaStyle.element.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item">
|
|
<selection selection-items="styleMetadata.element"
|
|
selected-item="style.element"
|
|
selection-callback="updateElement(item)"
|
|
title-text="{{'config.kaStyle.element.label' | i18n}}"
|
|
disabled-selection="!style.userStyle"
|
|
first-item-empty="true">
|
|
</selection>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text ka-config__edit-content-padding-label">.</span>
|
|
<div class="create-ticket__item">
|
|
<div class="btn-group ka-config__edit-btn-group">
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.bold' | i18n}}" aria-label="{{'config.kaStyle.button.bold' | i18n}}" ng-model="selected_css.fontWeight.bold" ng-change="updateFontWeight()" btn-checkbox tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__bold_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.italic' | i18n}}" aria-label="{{'config.kaStyle.button.italic' | i18n}}" ng-model="selected_css.fontStyle.italic" ng-change="updateFontStyle()" btn-checkbox tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__italic_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.underline' | i18n}}" aria-label="{{'config.kaStyle.button.underline' | i18n}}" ng-model="selected_css.textDecoration.underline" ng-change="updateTextDecoration()" btn-checkbox tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__underline_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.lineThrough' | i18n}}" aria-label="{{'config.kaStyle.button.lineThrough' | i18n}}" ng-model="selected_css.textDecoration.lineThrough" ng-change="updateTextDecoration()" btn-checkbox tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__strike_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="btn-group ka-config__edit-btn-group">
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.left' | i18n}}" aria-label="{{'config.kaStyle.button.left' | i18n}}" ng-model="selected_css.textAlign.value" ng-change="update_css()" ng-enter="update_css()" btn-radio="'left'" uncheckable tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__justifyleft_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.center' | i18n}}" aria-label="{{'config.kaStyle.button.center' | i18n}}" ng-model="selected_css.textAlign.value" ng-change="update_css()" btn-radio="'center'" uncheckable tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__justifycenter_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.right' | i18n}}" aria-label="{{'config.kaStyle.button.right' | i18n}}" ng-model="selected_css.textAlign.value" ng-change="update_css()" btn-radio="'right'" uncheckable tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__justifyright_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
<label class="btn btn-default" title="{{'config.kaStyle.button.justify' | i18n}}" aria-label="{{'config.kaStyle.button.justify' | i18n}}" ng-model="selected_css.textAlign.value" ng-change="update_css()" btn-radio="'justify'" uncheckable tabindex=0 role="link">
|
|
<div class="cke_button_icon cke_button__justifyblock_icon ka-config__edit-btn"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12"></div>
|
|
|
|
<div class="col-sm-4">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{'config.kaStyle.font.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item">
|
|
<selection selection-items="styleMetadata.font"
|
|
selected-item="selected_css.fontFamily"
|
|
selection-callback="updateFont(item)"
|
|
title-text="{{'config.kaStyle.font.label' | i18n | uppercase}}"
|
|
first-item-empty="true"
|
|
label="label"
|
|
value="value">
|
|
</selection>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-2">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{'config.kaStyle.fontSize.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item">
|
|
<selection selection-items="styleMetadata.fontSize"
|
|
selected-item="selected_css.fontSize"
|
|
selection-callback="updateFontSize(item)"
|
|
title-text="{{'config.kaStyle.fontSize.label' | i18n | uppercase}}"
|
|
first-item-empty="true"
|
|
label="label"
|
|
value="value">
|
|
</selection>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-3">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{ 'config.kaStyle.textColor.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item ka-config__edit-colorpicker">
|
|
<input type="text"
|
|
colorpicker colorpicker-parent="true"
|
|
title="{{ 'config.kaStyle.textColor.label' | i18n }}"
|
|
class="custom-input"
|
|
ng-model="selected_css.color.value"
|
|
ng-change="update_css()"
|
|
placeholder="{{ 'config.kaStyle.color.label.placeholder' | i18n }}">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-3">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{ 'config.kaStyle.backgroundColor.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item ka-config__edit-colorpicker">
|
|
<input type="text"
|
|
colorpicker colorpicker-parent="true"
|
|
title="{{ 'config.kaStyle.backgroundColor.label' | i18n }}"
|
|
class="custom-input"
|
|
ng-model="selected_css.backgroundColor.value"
|
|
ng-change="update_css()"
|
|
placeholder="{{ 'config.kaStyle.color.label.placeholder' | i18n }}">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12"></div>
|
|
|
|
<div class="col-sm-6">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{ 'config.kaStyle.preview.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item ka-config__edit-content-preview">
|
|
<div ng-attr-style="{{selectedStyle.styles}}">{{ 'config.kaStyle.preview.content' | i18n }}</div>
|
|
<!-- uncomment for debugging
|
|
<div>{{selectedStyle.styles}}</div>
|
|
-->
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<div class="create-ticket__section clearfix">
|
|
<label class="label_control-wrap">
|
|
<span class="label__text">
|
|
{{ 'config.kaStyle.cssStyle.label' | i18n }}
|
|
</span>
|
|
<div class="create-ticket__item">
|
|
<textarea type="text" class="ka-config__edit-additionalcss"
|
|
ng-model="additional.style"
|
|
placeholder="{{ 'config.kaStyle.none.label.placeholder' | i18n }}" aria-label="{{'config.kaStyle.cssStyle.label' | i18n}} {{additionalStyle}} "
|
|
ng-change="update_css()">
|
|
</textarea>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn_no-fill ka-config__add-btn" ng-click="addStyle()"
|
|
aria-label="{{'config.kaStyle.button.addNewStyle' | i18n}}">
|
|
<i class="icon-plus"></i>
|
|
<span>{{'config.kaStyle.button.addNewStyle' | i18n}}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="create-ka__action-panel clearfix">
|
|
<div class="pull-right">
|
|
<button type="submit" class="btn_primary create-ticket__action-btn" ng-disabled="state.dataIsLoading || !isDirtyState || stylesForm.$invalid" ng-click="saveStyles()">
|
|
{{ 'config.kaStyle.button.saveStyles' | i18n }}
|
|
</button>
|
|
<button type="button" class="btn_secondary action-panel__cancel-btn" ng-disabled="state.dataIsLoading || !isDirtyState" ng-click="discard()">
|
|
{{ 'common.button.discard' | i18n }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|