Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<meta charset="utf-8" />
<title>Calendar Dialog</title>
<link rel="stylesheet" href="chrome://messenger/skin/variables.css"/>
<link rel="stylesheet" href="chrome://messenger/skin/icons.css"/>
<link rel="stylesheet" href="chrome://messenger/skin/widgets.css"/>
<link rel="stylesheet" href="chrome://messenger/skin/calendar/calendarDialog.css"/>
<script src="chrome://messenger/content/calendar-dialog.mjs" type="module"></script>
<style>
body {
position: relative;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#calendarDisplayBox {
position: absolute;
width: 1000px;
height: 1000px;
background: blue;
}
.multiday-event-listitem {
position: absolute;
width: 100px;
height: 100px;
padding: 0;
border: 0;
bottom: 0;
}
dialog {
position: absolute;
padding: 0;
border: none;
margin: 0;
background: #ccc;
}
</style>
</head>
<body>
<template id="calendarDialogAcceptanceTemplate">
<div id="attendance-widget">
<input id="going" type="radio" name="attendance" value="ACCEPTED"/>
<label for="going" class="option">
<span class="icon"></span><span data-l10n-id="calendar-dialog-accept"></span>
</label>
<input id="maybe" type="radio" name="attendance" value="TENTATIVE" checked="checked"/>
<label for="maybe" class="option">
<span class="icon"></span><span data-l10n-id="calendar-dialog-accept-tentative"></span>
</label>
<input id="not-going" type="radio" name="attendance" value="DECLINED"/>
<label for="not-going" class="option">
<span class="icon"></span><span data-l10n-id="calendar-dialog-decline"></span>
</label>
<div class="toggle"></div>
</div>
</template>
<template id="calendarDialogAttendeesRowTemplate">
<calendar-dialog-row>
<img
src=""
slot="icon"
class="icon-attendees"
data-l10n-id="calendar-dialog-attendees-row-icon"
/>
<div slot="label">
<span id="attendeesCount" class="row-label"></span>
</div>
<div slot="content">
<span class="attendees-summary"></span>
<ul class="attendees-list"></ul>
</div>
</calendar-dialog-row>
</template>
<template id="calendarDialogAttendeeTemplate">
<span class="attendee-name"></span>
<span class="attendee-email"></span>
<span class="attendee-label"></span>
<img src="" class="attendee-icon"/>
</template>
<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
src=""
slot="icon"
class="icon-description"
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">
<span class="plain-text-description"></span>
<xul:browser
class="rich-description"
type="content"
messagemanagergroup="single-page"
tooltip="aHTMLTooltip"
context="browserContext"
constrainpopups="false"
nodefaultsrc="true"
></xul:browser>
</div>
</calendar-dialog-row>
</template>
<template id="calendarDialogRemindersRowTemplate">
<calendar-dialog-row>
<img
slot="icon"
class="icon-reminder"
src=""
data-l10n-id="calendar-dialog-reminders-row-icon"
/>
<div slot="label">
<span id="reminderCount" class="row-label"></span>
</div>
<div id="reminders" slot="content">
<ul id="reminderList"></ul>
</div>
</calendar-dialog-row>
</template>
<template id="calendarDialogAttachmentTemplate">
<img
class="attachment-icon"
src=""
srcset=""
data-l10n-id="calendar-dialog-attachment-link-icon"
/>
<a class="attachment-label" href=""></a>
</template>
<template id="calendarDialogAttachmentsListTemplate">
<calendar-dialog-row>
<img
src=""
slot="icon"
class="icon-attachment"
data-l10n-id="calendar-dialog-attachments-row-icon"
/>
<span
slot="label"
class="row-label"
data-l10n-id="calendar-dialog-attachments-label"
></span>
<ul slot="content" class="attachments-list"></ul>
</calendar-dialog-row>
</template>
<template id="calendarDialogTemplate">
<div class="titlebar">
<div class="titlebar-row">
<button
class="button icon-button icon-only button-flat back-button"
data-l10n-id="calendar-dialog-back-button"
type="button"
></button>
<span class="calendar-name"></span>
<div class="title-button-container">
<button
class="button icon-button icon-only button-flat menu-button"
type="menu"
data-l10n-id="calendar-dialog-menu">
<xul:menupopup id="event-read-menu" native="false" class="no-icon-menupopup">
<xul:menuitem data-l10n-id="calendar-dialog-menu-duplicate"/>
<xul:menuitem data-l10n-id="calendar-dialog-menu-delete"/>
<xul:menuitem data-l10n-id="calendar-dialog-menu-print"/>
</xul:menupopup>
</button>
<button
class="button icon-button icon-only button-flat close-button"
data-l10n-id="calendar-dialog-close-button"
type="button">
</button>
</div>
</div>
<div class="titlebar-row">
<h2 class="calendar-dialog-title">
</h2>
</div>
</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="joinMeetingRow">
<img
src=""
slot="icon"
class="icon-video"
data-l10n-id="calendar-dialog-join-meeting-row-icon" />
<div slot="label">
<button
id="joinMeeting"
class="button button-primary join-button"
type="button"
data-l10n-id="calendar-dialog-join-meeting-button"
></button>
</div>
</calendar-dialog-row>
<calendar-dialog-row id="locationRow">
<img
src=""
slot="icon"
class="icon-location"
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="attendeesRow" class="expanding-row hideable-row">
<calendar-dialog-attendees-row></calendar-dialog-attendees-row>
<button
id="expandAttendees"
class="button button-flat expand-button icon-button"
type="button"
>
<img
src=""
class="icon-nav-right"
data-l10n-id="calendar-dialog-attendees-expand-icon"
/>
</button>
</div>
<div id="descriptionRow" class="expanding-row hideable-row">
<calendar-dialog-description-row
id="expandingDescription"
></calendar-dialog-description-row>
<button
id="expandDescription"
class="button button-flat expand-button icon-button"
type="button"
>
<img
src=""
class="icon-nav-right"
data-l10n-id="calendar-dialog-description-expand-icon"
/>
</button>
</div>
<div id="attachmentsRow" class="expanding-row" hidden="hidden">
<calendar-dialog-row>
<img
src=""
slot="icon"
class="icon-attachment"
data-l10n-id="calendar-dialog-attachments-row-icon"
/>
<div slot="label">
<span class="row-label"></span>
</div>
</calendar-dialog-row>
<button
id="expandAttachments"
class="button button-flat expand-button icon-button"
type="button"
>
<img
src=""
class="icon-nav-right"
data-l10n-id="calendar-dialog-attachments-expand-icon"
/>
</button>
</div>
<calendar-dialog-reminders-row></calendar-dialog-reminders-row>
<calendar-dialog-categories class="hideable-row"></calendar-dialog-categories>
</div>
<div
id="calendarDescriptionSubview"
hidden="hidden"
>
<calendar-dialog-description-row
id="expandedDescription"
type="full"
></calendar-dialog-description-row>
</div>
<div
id="calendarAttachmentsSubview"
hidden="hidden"
>
<calendar-dialog-attachments-list
id="calendarAttachmentsList"
></calendar-dialog-attachments-list>
</div>
<div
id="calendarAttendeesSubview"
hidden="hidden"
>
<calendar-dialog-attendees-row
id="expandedAttendees"
type="full"
></calendar-dialog-attendees-row>
</div>
</calendar-dialog-subview-manager>
</div>
<div class="footer">
<calendar-dialog-acceptance></calendar-dialog-acceptance>
</div>
</template>
<div id="calendarDisplayBox">
<button class="multiday-event-listitem"></button>
</div>
<dialog is="calendar-dialog"></dialog>
</body>
</html>