Introduce ScheduleElement

asset/css/compat.less

@@ -0,0 +1,35 @@
+.icinga-form > .schedule-element,
+.icinga-form > .schedule-element > fieldset {
+  margin-top: 1em;
+
+  > .control-group:first-child {
+    margin-top: 0;
+  }
+}
+
+.icinga-form .schedule-element {
+  .control-group > fieldset > .weekly,
+  .control-group > .ordinal,
+  .control-group > .monthly,
+  .control-group > .annually {
+    flex: 1 1 auto;
+  }
+
+  // TODO: This effectively restricts the weekly fields to always be aligned to the right,
+  //  regardless of the using an icinga-form or not. So this should be removed once we
+  //  have re-implemented the decorators.
+  .control-group > fieldset > .weekly {
+    margin-left: 14em;
+  }
+}
+
+form.icinga-form .control-group {
+  > .monthly,
+  > .ordinal {
+    margin-right: 2em;
+  }
+
+  > .ordinal.annually {
+    margin-right: 1em;
+  }
+}

asset/css/schedule-element.less

@@ -0,0 +1,210 @@
+// Schedule form element
+
+.schedule-element {
+  @input-border-radius: .25em;
+
+  .ordinal {
+    display: flex;
+    flex-wrap: wrap;
+
+    .radio-label {
+      flex: 1 1 auto;
+    }
+
+    select {
+      flex: 1 1 auto;
+
+      &:first-of-type {
+        margin-right: 1em;
+      }
+
+      &:disabled {
+        color: @schedule-element-fields-disabled-color;
+      }
+    }
+  }
+
+  .radio-label {
+    width: 100%;
+    margin-bottom: .5em;
+    display: flex;
+    align-items: center; // To center the radio element on safari
+  }
+
+  .number-specifier > input[type="number"] {
+    width: 5em;
+    margin: 0 1em;
+  }
+
+  .monthly, .ordinal:not(.annually) {
+    padding: .5em;
+    margin-left: -.5em;
+    border: 1px solid @schedule-element-fields-border-color;
+    .rounded-corners(.75em);
+  }
+
+  .schedule-element-fields {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    .rounded-corners(.25em);
+    overflow: hidden;
+    display:flex;
+    flex-wrap: wrap;
+
+    &.disabled { // When the "On the" radio button is checked
+      pointer-events: none;
+
+      label {
+        color: @schedule-element-fields-disabled-color;
+        background-color: @schedule-element-fields-disabled-bg;
+      }
+
+      input:checked + label {
+        background: @schedule-element-fields-disabled-selected-bg;
+        color: @schedule-element-fields-disabled-color;
+      }
+    }
+
+    li {
+      width: calc(100% / 7); /* default for week based cols makes sense */
+
+      label {
+        display: block;
+        width: 100%;
+        cursor: pointer;
+        text-align: center;
+        padding: .75em 0;
+        background: @schedule-element-fields-bg;
+        color: @schedule-element-fields-color;
+
+        &:hover {
+          background-color: @schedule-element-fields-hover-bg;
+        }
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      input:checked + label {
+        background-color: @schedule-element-fields-selected-bg;
+        color: @schedule-element-fields-selected-color;
+      }
+
+      input:checked + label:hover {
+        background-color: @schedule-element-fields-selected-hover-bg;
+        border-color: @schedule-element-fields-selected-hover-bg;
+      }
+    }
+
+    &.multiple-fields {
+      li:not(:last-child) label {
+        border-right: 1px solid @schedule-element-fields-border-color;
+      }
+
+      input:focus + label {
+        box-shadow: inset 0 0 0 3px @schedule-element-fields-outline-color;
+      }
+
+      input:checked:focus + label {
+        box-shadow: inset 0 0 0 3px @schedule-element-fields-selected-outline-color;
+      }
+    }
+
+    &.single-fields {
+      li {
+        padding-right: 1px;
+      }
+
+      li label {
+        .rounded-corners(.25em);
+        margin-right: 1px;
+        margin-bottom: 1px;
+      }
+
+      li label {
+        border-right: none;
+      }
+
+      &:focus-within {
+        outline: 3px solid @schedule-element-fields-outline-color;
+        outline-offset: 2px;
+      }
+
+      &:focus-within + .note {
+        display: block;
+      }
+
+      input:checked + label:hover {
+        background-color: @schedule-element-fields-selected-bg;
+      }
+    }
+  }
+
+  .note {
+    display: none;
+    padding: .5em;
+    background: @schedule-element-keyboard-note-bg;
+    .rounded-corners(.25em);
+    text-align: center;
+    margin-top: 1em;
+    line-height: 1.25;
+  }
+
+  /* .weekly */
+  .weekly {  }
+
+  /* .monthly styles */
+  .monthly {
+    li label {
+      border-top: 1px solid @schedule-element-fields-border-color;
+    }
+
+    li:first-child,
+    li:nth-child(2),
+    li:nth-child(3),
+    li:nth-child(4),
+    li:nth-child(5),
+    li:nth-child(6),
+    li:nth-child(7) {
+      label {
+        border-top: none;
+      }
+    }
+
+    /* last of row should not have a border */
+    .schedule-element-fields li:nth-child(7n) label {
+      border-right: none;
+    }
+  }
+
+
+  /* .annually styles */
+  .annually {
+    li {
+      width: 25%; // 100% / 4 elements
+    }
+
+    li:nth-child(4n) label {
+      margin-right: 0;
+    }
+
+    .toggle-slider-controls {
+      display: flex;
+      column-gap: 1em;
+      align-items: center;
+      margin-top: 1em;
+      margin-bottom: -.6em;
+    }
+  }
+}
+
+.schedule-recurrences {
+  line-height: 1.1em;
+  padding-top: 0.5625em;
+
+  p {
+    color: @schedule-element-fields-disabled-color;
+  }
+}

asset/css/variables.less

@@ -33,10 +33,13 @@
 
 @base-primary-color: #00C3ED;
 @base-primary-bg: #00C3ED;
+@base-primary-dark: #0081a6;
+@base-primary-light: fade(@base-primary-bg, 50%);
 
 @default-text-color: #fff;
 @default-text-color-light: fade(@default-text-color, 75%);
 @default-text-color-inverted: @default-bg;
+@default-input-bg: #404d72;
 
 @state-ok: #44bb77;
 @state-up: @state-ok;
@@ -48,7 +51,7 @@
 
 @primary-button-color: @default-text-color-inverted;
 @primary-button-bg: @base-primary-bg;
-@primary-button-hover-bg: #0081a6;
+@primary-button-hover-bg: @base-primary-dark;
 
 @search-term-bg: @base-gray;
 @search-term-color: @default-text-color-inverted;
@@ -66,7 +69,7 @@
 @search-logical-operator-bg: @base-gray-light;
 @search-logical-operator-color: @default-text-color-light;
 
-@searchbar-bg: #404d72;
+@searchbar-bg: @default-input-bg;
 @searchbar-scrollbar-bg: @base-gray-light;
 
 @search-editor-control-color: @base-gray-light;
@@ -100,6 +103,20 @@
 
 @card-border-color: @base-gray-light;
 
+@schedule-element-fields-bg: @default-input-bg;
+@schedule-element-fields-color: @base-primary-color;
+@schedule-element-fields-border-color: @base-gray-light;
+@schedule-element-fields-selected-bg: @primary-button-bg;
+@schedule-element-fields-selected-color: @default-text-color-inverted;
+@schedule-element-fields-hover-bg: @base-primary-light;
+@schedule-element-fields-outline-color: fade(@base-primary-bg, 50%);
+@schedule-element-fields-selected-outline-color: fade(#fff, 50%);
+@schedule-element-fields-selected-hover-bg: @primary-button-hover-bg;
+@schedule-element-fields-disabled-color: @base-gray;
+@schedule-element-fields-disabled-bg: @base-gray-lighter;
+@schedule-element-fields-disabled-selected-bg: @base-gray-light;
+@schedule-element-keyboard-note-bg: @base-gray-light;
+
 @iplWebLightRules: {
   :root {
     --base-gray: #819398;
@@ -112,12 +129,13 @@
     --default-text-color: #535353;
     --default-text-color-light: fade(#535353, 75%); // --default-text-color
     --default-text-color-inverted: #F5F9FA;
+    --default-input-bg: #DEECF1;
 
     --primary-button-color: var(--default-text-color-inverted);
     --primary-button-bg: @primary-button-bg;
     --primary-button-hover-bg: @primary-button-hover-bg;
 
-    --searchbar-bg: #DEECF1;
+    --searchbar-bg: var(--default-input-bg);
     --searchbar-scrollbar-bg: var(--base-gray-light);
 
     --search-term-bg: var(--base-gray-light);
@@ -162,5 +180,19 @@
     --suggestions-relation-path-focus-bg: var(--base-gray);
 
     --card-border-color: var(--base-gray-light);
+
+    --schedule-element-fields-bg: var(--default-input-bg);
+    --schedule-element-fields-color: var(--base-primary-color);
+    --schedule-element-fields-border-color: var(--base-gray-light);
+    --schedule-element-fields-selected-bg: var(--primary-button-bg);
+    --schedule-element-fields-selected-color: var(--default-text-color-inverted);
+    --schedule-element-fields-hover-bg: @base-primary-light;
+    --schedule-element-fields-outline-color: fade(@base-primary-bg, 50%);
+    --schedule-element-fields-selected-outline-color: fade(#fff, 50%);
+    --schedule-element-fields-selected-hover-bg: var(--primary-button-hover-bg);
+    --schedule-element-fields-disabled-color: var(--base-gray);
+    --schedule-element-fields-disabled-bg: var(--base-gray-lighter);
+    --schedule-element-fields-disabled-selected-bg: var(--base-gray-light);
+    --schedule-element-keyboard-note-bg: var(--base-gray-light);
   }
 };

composer.json

@@ -18,8 +18,11 @@
   "require": {
     "php": ">=7.2",
     "ext-json": "*",
-    "ipl/html": ">=0.6.0",
+    "psr/http-message": "^1.0",
+    "ipl/html": "dev-master",
+    "ipl/validator": "@dev",
     "ipl/i18n": ">=0.2.0",
+    "ipl/scheduler": "dev-main",
     "ipl/stdlib": ">=0.12.0",
     "fortawesome/font-awesome": "^6"
   }

src/FormDecorator/IcingaFormDecorator.php

@@ -10,6 +10,7 @@
 use ipl\Html\FormElement\FieldsetElement;
 use ipl\Html\HtmlDocument;
 use ipl\Html\HtmlElement;
+use ipl\Html\HtmlString;
 use ipl\Html\Text;
 use ipl\Web\Widget\Icon;
 
@@ -72,8 +73,16 @@ protected function createCheckbox(CheckboxElement $checkbox)
     protected function assembleLabel()
     {
         $label = parent::assembleLabel();
-        if ($label !== null && ! $this->formElement instanceof FieldsetElement) {
-            $label->addWrapper(new HtmlElement('div', Attributes::create(['class' => 'control-label-group'])));
+        if (! $this->formElement instanceof FieldsetElement) {
+            if ($label !== null) {
+                $label->addWrapper(new HtmlElement('div', Attributes::create(['class' => 'control-label-group'])));
+            } else {
+                $label = new HtmlElement(
+                    'div',
+                    Attributes::create(['class' => 'control-label-group']),
+                    HtmlString::create('&nbsp')
+                );
+            }
         }
 
         return $label;