@progress/kendo-themes-html 14.4.1-dev.0 → 14.4.1-dev.2

package/src/scheduler/tests/scheduler-month-view.tsx

@@ -1,7 +1,14 @@
 import { SchedulerMonth, SchedulerFlexMonth } from "..";
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
+
 export default () => (
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>Scheduler Table Layout</span>
             <SchedulerMonth />

package/src/scheduler/tests/scheduler-new-event-dialog.tsx

@@ -0,0 +1,191 @@
+import { Button } from "../../button";
+import { Textbox } from "../../textbox";
+import { TimePicker } from "../../timepicker";
+import { Switch } from "../../switch";
+import { Dialog } from "../../dialog";
+import { Form, FormField } from "../../form";
+import { Icon } from "../../icon";
+import Textarea from "../../textarea/textarea.spec";
+import { DatePicker } from "../../datepicker";
+import { DropdownList } from "../../dropdownlist";
+
+const style = `
+    #test-area {
+        gap: 32px;
+    }
+    .k-dialog-wrapper {
+        position: relative;
+        align-items: start;
+    }
+
+    .k-window {
+      position: relative;
+    }
+
+    .k-animation-container {
+     position: relative;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid">
+      <section>
+        <span>Dialog - More options</span>
+        <Dialog
+          modal={false}
+          title="New event"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <Button>Cancel</Button>
+              <Button themeColor="primary">Save</Button>
+            </>
+          }
+          style={{ width: "650px" }}
+        >
+          <Form className="k-scheduler-edit-form" orientation="horizontal">
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="right-double-quotes" />} editor={<Textbox placeholder="New event" aria-label="Event title" />} />
+
+            <FormField
+              label={<Icon size="xlarge" icon="clock" />}
+              editor={
+                <div className="k-scheduler-datetime-section">
+                  <div className="k-scheduler-edit-form-row">
+                    <Switch checked={false} aria-label="All day" />
+                    <span>All day</span>
+                  </div>
+                  <div className="k-scheduler-datetime-grid">
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="Start date" />
+                      <span className="k-scheduler-datetime-label">from</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="Start time" />
+                    </div>
+                    <Button className="k-col-span-2" title="Set Timezone" fillMode="flat" themeColor="primary" icon="globe">
+                      Time zone
+                    </Button>
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="End date" />
+                      <span className="k-scheduler-datetime-label">to</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="End time" />
+                    </div>
+                  </div>
+                  <div className="k-scheduler-edit-form-row">
+                    <Button fillMode="flat" icon="arrow-rotate-cw" themeColor="primary">
+                      Make recurring
+                    </Button>
+                  </div>
+                </div>
+              }
+            />
+
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="comment" />} editor={<Textarea resize="y" placeholder="Add Description" aria-label="Description" />} />
+          </Form>
+        </Dialog>
+      </section>
+
+      <section>
+        <span>Dialog - More options, time zone</span>
+        <Dialog
+          modal={false}
+          title="New event"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <Button>Cancel</Button>
+              <Button themeColor="primary">Save</Button>
+            </>
+          }
+          style={{ width: "650px" }}
+        >
+          <Form className="k-scheduler-edit-form" orientation="horizontal">
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="right-double-quotes" />} editor={<Textbox placeholder="New event" aria-label="Event title" />} />
+
+            <FormField
+              label={<Icon size="xlarge" icon="clock" />}
+              editor={
+                <div className="k-scheduler-datetime-section">
+                  <div className="k-scheduler-edit-form-row">
+                    <Switch checked={false} aria-label="All day" />
+                    <span>All day</span>
+                  </div>
+                  <div className="k-scheduler-datetime-grid">
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="Start date" />
+                      <span className="k-scheduler-datetime-label">from</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="Start time" />
+                    </div>
+                    <DropdownList value="(UTC+02:00)" aria-label="Start timezone" />
+                    <Button fillMode="flat" title="Reset Timezone" themeColor="primary" icon="globe" aria-label="Reset timezone"></Button>
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="End date" />
+                      <span className="k-scheduler-datetime-label">to</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="End time" />
+                    </div>
+                    <DropdownList value="(UTC+02:00)" aria-label="End timezone" />
+                  </div>
+                  <div className="k-scheduler-edit-form-row">
+                    <Button fillMode="flat" icon="arrow-rotate-cw" themeColor="primary">
+                      Make recurring
+                    </Button>
+                  </div>
+                </div>
+              }
+            />
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="comment" />} editor={<Textarea resize="y" placeholder="Add description" aria-label="Description" />} />
+          </Form>
+        </Dialog>
+      </section>
+
+      <section>
+        <span>Dialog - More options, all day</span>
+        <Dialog
+          modal={false}
+          title="New event"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <Button>Cancel</Button>
+              <Button themeColor="primary">Save</Button>
+            </>
+          }
+          style={{ width: "650px" }}
+        >
+          <Form className="k-scheduler-edit-form" orientation="horizontal">
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="right-double-quotes" />} editor={<Textbox placeholder="New event" aria-label="Event title" />} />
+
+            <FormField
+              label={<Icon size="xlarge" icon="clock" />}
+              editor={
+                <div className="k-scheduler-datetime-section">
+                  <div className="k-scheduler-edit-form-row">
+                    <Switch checked={true} aria-label="All day" />
+                    <span>All day</span>
+                  </div>
+                  <div className="k-scheduler-datetime-grid">
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="Start date" />
+                      <span className="k-scheduler-datetime-label">to</span>
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="End date" />
+                    </div>
+                  </div>
+                  <div className="k-scheduler-edit-form-row">
+                    <Button fillMode="flat" icon="arrow-rotate-cw" themeColor="primary">
+                      Make recurring
+                    </Button>
+                  </div>
+                </div>
+              }
+            />
+
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="comment" />} editor={<Textarea resize="y" placeholder="Add description" aria-label="Description" />} />
+          </Form>
+        </Dialog>
+      </section>
+    </div>
+  </>
+);

package/src/scheduler/tests/scheduler-quick-actions-popover.tsx

@@ -0,0 +1,114 @@
+import { Button } from "../../button";
+import { Form, FormField } from "../../form";
+import { Icon } from "../../icon";
+import Popover from "../../popover/popover.spec";
+import ActionButtons from "../../action-buttons/action-buttons.spec";
+import { Textbox } from "../../textbox/textbox.spec";
+
+const style = `
+    #test-area {
+        gap: 32px;
+    }
+    .k-dialog-wrapper {
+        position: relative;
+        align-items: start;
+    }
+
+    .k-animation-container {
+      position: relative;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid">
+      <section>
+        <span>Popover - Quick create</span>
+        <div style={{ position: "relative" }}>
+          <Popover
+            callout="left"
+            title="New event"
+            body={
+              <Form className="k-scheduler-edit-form" orientation="horizontal">
+                <FormField orientation="horizontal" label={<Icon size="xlarge" icon="right-double-quotes" />} editor={<Textbox placeholder="New event" aria-label="Event title" />} />
+
+                <FormField orientation="horizontal" label={<Icon size="xlarge" icon="clock" />} editor={<div className="k-scheduler-edit-form-row k-color-subtle">20 October, 11:00 - 11:30</div>} />
+              </Form>
+            }
+            style={{ width: "380px" }}
+          >
+            <ActionButtons className="k-popover-actions" alignment="stretched">
+              <Button fillMode="flat" themeColor="primary" icon="arrows-resizing">
+                More options
+              </Button>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">Save</Button>
+            </ActionButtons>
+          </Popover>
+        </div>
+      </section>
+
+      <section>
+        <span>Popover Quick edit</span>
+        <div style={{ position: "relative" }}>
+          <Popover
+            callout="left"
+            title="Event Name"
+            body={
+              <Form className="k-scheduler-edit-form" orientation="horizontal">
+                <FormField orientation="horizontal" label={<Icon size="xlarge" icon="clock" />} editor={<div className="k-scheduler-edit-form-row k-color-subtle">20 October, 11:00 – 11:30</div>} />
+              </Form>
+            }
+            style={{ width: "380px" }}
+          >
+            <ActionButtons className="k-popover-actions" alignment="end">
+              <Button>Delete</Button>
+              <Button themeColor="primary">Edit</Button>
+            </ActionButtons>
+          </Popover>
+        </div>
+      </section>
+
+      <section>
+        <span>Popover Quick edit - with description</span>
+        <div style={{ position: "relative" }}>
+          <Popover
+            callout="left"
+            title="Event Name"
+            body={
+              <Form className="k-scheduler-edit-form" orientation="horizontal">
+                <FormField orientation="horizontal" label={<Icon size="xlarge" icon="clock" />} editor={<div className="k-scheduler-edit-form-row k-color-subtle">20 October, 11:00 – 11:30</div>} />
+
+                <FormField orientation="horizontal" label={<Icon size="xlarge" icon="comment" />} editor={<div className="k-scheduler-edit-form-row">This is a description of the event saying what the event will be about and other stuff.</div>} />
+              </Form>
+            }
+            style={{ width: "380px" }}
+          >
+            <ActionButtons className="k-popover-actions" alignment="end">
+              <Button>Delete</Button>
+              <Button themeColor="primary">Edit</Button>
+            </ActionButtons>
+          </Popover>
+        </div>
+      </section>
+
+      <section>
+        <span>Popover Quick Edit - readonly</span>
+        <div style={{ position: "relative" }}>
+          <Popover
+            callout="left"
+            title="Event Name"
+            body={
+              <Form className="k-scheduler-edit-form" orientation="horizontal">
+                <FormField orientation="horizontal" label={<Icon size="xlarge" icon="clock" />} editor={<div className="k-scheduler-edit-form-row k-color-subtle">20 October, 11:00 – 11:30</div>} />
+              </Form>
+            }
+            style={{ width: "380px" }}
+          />
+        </div>
+      </section>
+    </div>
+  </>
+);