Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Calendar Dialog</title>
<style>
#test-container {
position: relative;
width: 1000px;
height: 1000px;
}
#trigger {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<template id="calendarDialogRowTemplate">
<div class="row">
<slot name="icon"></slot>
<slot name="label"></slot>
<slot name="content"></slot>
</div>
</template>
<template id="calendarDialogCategoriesTemplate">
<ul class="categories-list"></ul>
<span class="overflow-label" hidden="hidden"></span>
</template>
<template id="calendarDialogDateRowTemplate">
<calendar-dialog-row>
<img
src=""
slot="icon"
class="icon-date-time"
data-l10n-id="calendar-dialog-date-row-icon"
/>
<div slot="label">
<span class="date-label"></span>
<img
src=""
class="icon-recurrence repeats"
data-l10n-id="calendar-dialog-date-row-recurring-icon"
hidden="hidden"
/>
</div>
</calendar-dialog-row>
</template>
<template id="calendarDialogDescriptionRowTemplate">
<calendar-dialog-row>
<img
slot="icon"
class="icon-description"
src=""
data-l10n-id="calendar-dialog-description-row-icon"
/>
<span
slot="label"
class="row-label"
data-l10n-id="calendar-dialog-description-label"
></span>
<div slot="content"></div>
</calendar-dialog-row>
</template>
<template id="calendarDialogTemplate">
<div class="titlebar">
<button
class="button icon-button icon-only button-flat back-button"
data-l10n-id="calendar-dialog-back-button"
></button>
<h2 class="calendar-dialog-title"></h2>
<button class="button icon-button icon-only button-flat close-button"
data-l10n-id="calendar-dialog-close-button">
</button>
</div>
<div class="content">
<calendar-dialog-subview-manager
default-subview="calendarDialogMainSubview"
>
<div id="calendarDialogMainSubview" hidden="hidden">
<calendar-dialog-date-row></calendar-dialog-date-row>
<calendar-dialog-row id="locationRow">
<img
slot="icon"
class="icon-location"
src=""
data-l10n-id="calendar-dialog-location-row-icon"
/>
<div slot="label">
<a
id="locationLink"
class="text-link"
href=""
hidden="hidden"
></a>
<span id="locationText" hidden="hidden"></span>
</div>
</calendar-dialog-row>
<div id="descriptionRow" class="expanding-row">
<calendar-dialog-description-row id="expandingDescription">
</calendar-dialog-description-row>
<button
id="expandDescription"
class="button button-flat expand-button icon-button"
>
<img
src=""
class="icon-nav-right"
data-l10n-id="calendar-dialog-description-expand-icon"
/>
</button>
</div>
<calendar-dialog-categories></calendar-dialog-categories>
</div>
<div id="calendarDialogOtherSubview" hidden="hidden">Test only subview</div>
<div
id="calendarDescriptionSubview"
hidden="hidden"
>
<calendar-dialog-description-row
id="expandedDescription"
type="full"
>
</calendar-dialog-description-row>
</div>
</calendar-dialog-subview-manager>
</div>
<div class="footer"></div>
</template>
<div id="test-container">
<button id="trigger"></button>
<dialog is="calendar-dialog"></dialog>
</div>
</body>
</html>