ui.apps/src/main/content/jcr_root/apps/acs-commons/components/utilities/system-notifications/system-notifications.html
<!--
~ ACS AEM Commons
~
~ Copyright (C) 2013 - 2023 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!DOCTYPE html>
<html class="coral-App">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>${'System Notification' @ i18n}</title>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories= 'acs-commons.system-notifications.page' }"/>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css @ categories= 'acs-commons.system-notifications.notification' }"/>
</head>
<body id="acsCommons-System-Notifications-Page" class="coral--light">
<form id="fn-acsCommons-Notifications-form"
onsubmit="return false;"
action="${resource.path}"
method="post"
class="coral-Wizard"
data-init="flexwizard">
<input type="hidden" name="_charset_" value="utf-8">
<input type="hidden" name="./enabled@TypeHint" value="Boolean"/>
<input type="hidden" name="./enabled@DefaultValue" value="false"/>
<input type="hidden" name="./enabled@UseDefaultWhenMissing" value="true"/>
<input type="hidden" name="./dismissible@TypeHint" value="Boolean"/>
<input type="hidden" name="./dismissible@DefaultValue" value="false"/>
<input type="hidden" name="./dismissible@UseDefaultWhenMissing" value="true"/>
<input type="hidden" name="./onTime@TypeHint" value="Date"/>
<input type="hidden" name="./offTime@TypeHint" value="Date"/>
<nav class="js-coral-Wizard-nav coral-Wizard-nav coral--dark">
<ol class="coral-Wizard-steplist">
<li class="js-coral-Wizard-steplist-item coral-Wizard-steplist-item">${'System Notification' @ i18n}
</li>
</ol>
</nav>
<div class="acsCommons-System-Notifications-Page-form">
<div class="js-coral-Wizard-step coral-Wizard-step">
<a class="js-coral-Wizard-step-control coral-Button" href="/acs-commons.html/etc/acs-commons/notifications"
data-action="cancel">Back</a>
<button class="fn-acsCommons-Notifications-save js-coral-Wizard-step-control coral-Button" type="button"
data-action="next">Save
</button>
<h2 class="coral-Heading coral-Heading--2">${'System Notification' @ i18n}</h2>
<div id="acsCommons-System-Notifications">
<div data-sly-include="notification/notification.jsp"></div>
</div>
<section class="coral-Form-fieldset">
<div class="acsCommons-System-Notifications-Form-row">
<label class="coral-Checkbox">
<input class="coral-Checkbox-input" type="checkbox" name="./enabled" value="true"
data-sly-attribute.checked="${pageProperties.enabled}"/>
<span class="coral-Checkbox-checkmark"></span>
<span class="coral-Checkbox-description">Enabled</span>
</label>
</div>
<div class="acsCommons-System-Notifications-Form-row">
<label class="coral-Form-fieldlabel">Style</label>
<div>
<span class="coral-Select" data-init="select">
<button type="button" class="coral-Select-button coral-MinimalButton">
<span class="coral-Select-button-text">Select a style</span>
</button>
<select class="coral-Select-select" name="./style">
<option data-sly-attribute.selected="${pageProperties.style == 'green' }"
value="green">Green</option>
<option data-sly-attribute.selected="${pageProperties.style == 'blue' }"
value="blue">Blue</option>
<option data-sly-attribute.selected="${pageProperties.style == 'yellow'}" value="yellow">Yellow</option>
<option data-sly-attribute.selected="${pageProperties.style == 'red' }"
value="red">Red</option>
</select>
</span>
</div>
</div>
<div class="acsCommons-System-Notifications-Form-row">
<label class="coral-Form-fieldlabel">Title</label>
<input type="text"
class="coral-Textfield acsCommons-System-Notifications-Page-input--text"
name="./jcr:title"
value="${properties.jcr:title}"/>
</div>
<div class="acsCommons-System-Notifications-Form-row">
<label class="coral-Form-fieldlabel">Message</label>
<textarea
class="coral-Textfield coral-Textfield--multiline acsCommons-System-Notifications-Page-input--textarea"
rows="6"
name="./jcr:description">${properties.jcr:description}</textarea>
</div>
<div class="acsCommons-System-Notifications-Form-row">
<label class="coral-Checkbox">
<input class="coral-Checkbox-input" type="checkbox" name="./dismissible" value="true"
data-sly-attribute.checked="${pageProperties.dismissible}"/>
<span class="coral-Checkbox-checkmark"></span>
<span class="coral-Checkbox-description">Dismissible</span>
</label>
</div>
<div class="acsCommons-System-Notifications-Form-row">
<div style="width:50%; float: left;">
<label class="coral-Form-fieldlabel">On Time</label>
<div>
<div class="coral-Datepicker coral-InputGroup acsCommons-System-Notifications-Page-input--datepicker"
data-displayed-format="llll"
data-stored-format="YYYY-MM-DD[T]HH:mm:ss.SSSZ"
data-init="datepicker">
<input class="coral-InputGroup-input coral-Textfield"
value="${'YYYY-MM-dd\'T\'HH:mm:ss.SSSZ' @ format=pageProperties.onTime}"
type="datetime"
name="./onTime"/>
<span class="coral-InputGroup-button">
<button class="coral-Button coral-Button--secondary coral-Button--square" type="button"
title="Datetime Picker">
<i class="coral-Icon coral-Icon--sizeS coral-Icon--calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div style="width:50%; float: left;">
<label class="coral-Form-fieldlabel">Off Time</label>
<div>
<div class="coral-Datepicker coral-InputGroup acsCommons-System-Notifications-Page-input--datepicker"
data-displayed-format="llll"
data-stored-format="YYYY-MM-DD[T]HH:mm:ss.SSSZ"
data-init="datepicker">
<input class="coral-InputGroup-input coral-Textfield"
value="${'YYYY-MM-dd\'T\'HH:mm:ss.SSSZ' @ format=pageProperties.offTime}"
type="datetime"
name="./offTime"/>
<span class="coral-InputGroup-button">
<button class="coral-Button coral-Button--secondary coral-Button--square" type="button"
title="Datetime Picker">
<i class="coral-Icon coral-Icon--sizeS coral-Icon--calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</section>
</div>
</div>
</form>
</body>
</html>