@cerema/cadriciel 0.5.0

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_dataview.scss

@@ -0,0 +1,55 @@
+.p-dataview {
+  .p-paginator-top {
+    border-width: $tableTopPaginatorBorderWidth;
+    border-radius: 0;
+  }
+
+  .p-paginator-bottom {
+    border-width: $tableBottomPaginatorBorderWidth;
+    border-radius: 0;
+  }
+
+  .p-dataview-header {
+    background: $tableHeaderBg;
+    color: $tableHeaderTextColor;
+    border: $tableHeaderBorder;
+    border-width: $tableHeaderBorderWidth;
+    padding: $tableHeaderPadding;
+    font-weight: $tableHeaderFontWeight;
+  }
+
+  .p-dataview-content {
+    background: $tableBodyRowBg;
+    color: $tableBodyRowTextColor;
+    border: $dataViewContentBorder;
+    padding: $dataViewContentPadding;
+  }
+
+  &.p-dataview-list {
+    .p-dataview-content {
+      > .p-grid > div {
+        border: $dataViewListItemBorder;
+        border-width: $dataViewListItemBorderWidth;
+      }
+    }
+  }
+
+  .p-dataview-footer {
+    background: $tableFooterBg;
+    color: $tableFooterTextColor;
+    border: $tableFooterBorder;
+    border-width: $tableFooterBorderWidth;
+    padding: $tableFooterPadding;
+    font-weight: $tableFooterFontWeight;
+    border-bottom-left-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+  }
+
+  .p-dataview-loading-icon {
+    font-size: $loadingIconFontSize;
+  }
+
+  .p-dataview-emptymessage {
+    padding: $panelContentPadding;
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_filter.scss

@@ -0,0 +1,138 @@
+.p-column-filter-row {
+  .p-column-filter-menu-button,
+  .p-column-filter-clear-button {
+    margin-left: $inlineSpacing;
+  }
+}
+
+.p-column-filter-menu-button {
+  width: $actionIconWidth;
+  height: $actionIconHeight;
+  color: $actionIconColor;
+  border: $actionIconBorder;
+  background: $actionIconBg;
+  border-radius: $actionIconBorderRadius;
+  transition: $actionIconTransition;
+
+  &:hover {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+  }
+
+  &.p-column-filter-menu-button-open,
+  &.p-column-filter-menu-button-open:hover {
+    background: $actionIconHoverBg;
+    color: $actionIconHoverColor;
+  }
+
+  &.p-column-filter-menu-button-active,
+  &.p-column-filter-menu-button-active:hover {
+    background: $highlightBg;
+    color: $highlightTextColor;
+  }
+
+  &:focus {
+    @include focused();
+  }
+
+}
+
+.p-column-filter-clear-button {
+  width: $actionIconWidth;
+  height: $actionIconHeight;
+  color: $actionIconColor;
+  border: $actionIconBorder;
+  background: $actionIconBg;
+  border-radius: $actionIconBorderRadius;
+  transition: $actionIconTransition;
+
+  &:hover {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+  }
+
+  &:focus {
+    @include focused();
+  }
+}
+
+.p-column-filter-overlay {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+  min-width: $menuWidth;
+
+  .p-column-filter-row-items {
+    padding: $inputListPadding;
+
+    .p-column-filter-row-item {
+      margin: $inputListItemMargin;
+      padding: $inputListItemPadding;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+
+      &:not(.p-highlight):not(.p-disabled):hover {
+        color: $inputListItemTextHoverColor;
+        background: $inputListItemHoverBg;
+      }
+
+      &:focus {
+        @include focused-listitem();
+      }
+    }
+
+    .p-column-filter-separator {
+      border-top: $divider;
+      margin: $menuSeparatorMargin;
+    }
+  }
+}
+
+.p-column-filter-overlay-menu {
+  .p-column-filter-operator {
+    padding: $inputListHeaderPadding;
+    border-bottom: $inputListHeaderBorder;
+    color: $inputListHeaderTextColor;
+    background: $inputOverlayHeaderBg;
+    margin: $inputListHeaderMargin;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+  }
+
+  .p-column-filter-constraint {
+    padding: $panelContentPadding;
+    border-bottom: $divider;
+
+    .p-column-filter-matchmode-dropdown {
+      margin-bottom: $inlineSpacing;
+    }
+
+    .p-column-filter-remove-button {
+      margin-top: $inlineSpacing;
+    }
+
+    &:last-child {
+      border-bottom: 0 none;
+    }
+  }
+
+  .p-column-filter-add-rule {
+    padding: $panelFooterPadding;
+  }
+
+  .p-column-filter-buttonbar {
+    padding: $panelContentPadding;
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_fullcalendar.scss

@@ -0,0 +1,329 @@
+.fc {
+  /* FullCalendar 4 */
+  &.fc-unthemed {
+    .fc-view-container {
+      th {
+        background: $panelHeaderBg;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+      }
+
+      td {
+        &.fc-widget-content {
+          background: $panelContentBg;
+          border: $panelContentBorder;
+          color: $panelContentTextColor;
+        }
+
+        &.fc-head-container {
+          border: $panelHeaderBorder;
+        }
+      }
+
+      .fc-row {
+        border-right: $panelHeaderBorder;
+      }
+
+      .fc-event {
+        background: $fullCalendarEventBg;
+        border: $fullCalendarEventBorder;
+        color: $fullCalendarEventTextColor;
+      }
+
+      .fc-divider {
+        background: $panelHeaderBg;
+        border: $panelHeaderBorder;
+      }
+    }
+
+    .fc-toolbar {
+      .fc-button {
+        color: $buttonTextColor;
+        background: $buttonBg;
+        border: $buttonBorder;
+        font-size: $fontSize;
+        transition: $formElementTransition;
+        border-radius: $borderRadius;
+        display: flex;
+        align-items: center;
+
+        &:enabled:hover {
+          background: $buttonHoverBg;
+          color: $buttonTextHoverColor;
+          border-color: $buttonHoverBorderColor;
+        }
+
+        &:enabled:active {
+          background: $buttonActiveBg;
+          color: $buttonTextActiveColor;
+          border-color: $buttonActiveBorderColor;
+
+          &:focus {
+            @include focused();
+          }
+        }
+
+        .fc-icon-chevron-left {
+          font-family: "PrimeIcons" !important;
+          text-indent: 0;
+          @include icon_override("\e900");
+          font-size: $primeIconFontSize;
+        }
+
+        .fc-icon-chevron-right {
+          font-family: "PrimeIcons" !important;
+          text-indent: 0;
+          @include icon_override("\e901");
+          font-size: $primeIconFontSize;
+        }
+
+        &:focus {
+          @include focused();
+        }
+
+        &.fc-dayGridMonth-button,
+        &.fc-timeGridWeek-button,
+        &.fc-timeGridDay-button {
+          background: $toggleButtonBg;
+          border: $toggleButtonBorder;
+          color: $toggleButtonTextColor;
+          transition: $formElementTransition;
+
+          &:hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+          }
+
+          &.fc-button-active {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            &:hover {
+              background: $toggleButtonActiveHoverBg;
+              border-color: $toggleButtonActiveHoverBorderColor;
+              color: $toggleButtonTextActiveHoverColor;
+            }
+          }
+
+          &:focus {
+            @include focused();
+            z-index: 1;
+          }
+        }
+      }
+
+      .fc-button-group {
+        .fc-button {
+          border-radius: 0;
+
+          &:first-child {
+            border-top-left-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+          }
+
+          &:last-child {
+            border-top-right-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+          }
+        }
+      }
+    }
+  }
+
+  /* FullCalendar 5 */
+  &.fc-theme-standard {
+    .fc-view-harness {
+      .fc-scrollgrid {
+        border-color: $panelContentBorderColor;
+      }
+
+      th {
+        background: $panelHeaderBg;
+        border-color: $panelHeaderBorderColor;
+        color: $panelHeaderTextColor;
+      }
+
+      td {
+        color: $panelContentTextColor;
+        border-color: $panelContentBorderColor;
+      }
+
+      .fc-view {
+        background: $panelContentBg;
+      }
+
+      .fc-popover {
+        background: none;
+        border: 0 none;
+
+        .fc-popover-header {
+          border: $panelHeaderBorder;
+          padding: $panelHeaderPadding;
+          background: $panelHeaderBg;
+          color: $panelHeaderTextColor;
+
+          .fc-popover-close {
+            opacity: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            font-family: "PrimeIcons" !important;
+            @include icon_override("\e90b");
+            font-size: $primeIconFontSize;
+            @include action-icon(false);
+          }
+        }
+
+        .fc-popover-body {
+          padding: $panelContentPadding;
+          border: $panelContentBorder;
+          background: $panelContentBg;
+          color: $panelContentTextColor;
+          border-top: 0 none;
+        }
+      }
+
+      .fc-event {
+        &.fc-daygrid-block-event {
+          color: $fullCalendarEventTextColor;
+          background: $fullCalendarEventBg;
+          border-color: $fullCalendarEventBorderColor;
+
+          .fc-event-main {
+            color: $fullCalendarEventTextColor;
+          }
+        }
+
+        &.fc-daygrid-dot-event {
+          .fc-daygrid-event-dot {
+            background: $fullCalendarEventBg;
+            border-color: $fullCalendarEventBorderColor;
+          }
+
+          &:hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+          }
+        }
+      }
+
+      .fc-cell-shaded {
+        background: $panelHeaderBg;
+      }
+    }
+
+    .fc-toolbar {
+      .fc-button {
+        color: $buttonTextColor;
+        background: $buttonBg;
+        border: $buttonBorder;
+        font-size: $fontSize;
+        transition: $formElementTransition;
+        border-radius: $borderRadius;
+
+        &:enabled:hover {
+          background: $buttonHoverBg;
+          color: $buttonTextHoverColor;
+          border-color: $buttonHoverBorderColor;
+        }
+
+        &:enabled:active {
+          background: $buttonActiveBg;
+          color: $buttonTextActiveColor;
+          border-color: $buttonActiveBorderColor;
+
+          &:focus {
+            @include focused();
+          }
+        }
+
+        &:disabled {
+          opacity: $disabledOpacity;
+          color: $buttonTextColor;
+          background: $buttonBg;
+          border: $buttonBorder;
+        }
+
+        .fc-icon-chevron-left {
+          font-family: "PrimeIcons" !important;
+          text-indent: 0;
+          @include icon_override("\e900");
+          font-size: $primeIconFontSize;
+        }
+
+        .fc-icon-chevron-right {
+          font-family: "PrimeIcons" !important;
+          text-indent: 0;
+          @include icon_override("\e901");
+          font-size: $primeIconFontSize;
+        }
+
+        &:focus {
+          @include focused();
+        }
+
+        &.fc-dayGridMonth-button,
+        &.fc-timeGridWeek-button,
+        &.fc-timeGridDay-button {
+          background: $toggleButtonBg;
+          border: $toggleButtonBorder;
+          color: $toggleButtonTextColor;
+          transition: $formElementTransition;
+
+          &:hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+          }
+
+          &.fc-button-active {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            &:hover {
+              background: $toggleButtonActiveHoverBg;
+              border-color: $toggleButtonActiveHoverBorderColor;
+              color: $toggleButtonTextActiveHoverColor;
+            }
+          }
+
+          &:not(:disabled) {
+            &:focus {
+              @include focused();
+              z-index: 1;
+            }
+          }
+        }
+      }
+
+      .fc-button-group {
+        .fc-button {
+          border-radius: 0;
+
+          &:first-child {
+            border-top-left-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+          }
+
+          &:last-child {
+            border-top-right-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+          }
+        }
+      }
+    }
+
+    a {
+      color: $textColor;
+    }
+
+    .fc-highlight {
+      color: $highlightTextColor;
+      background: $highlightBg;
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_orderlist.scss

@@ -0,0 +1,103 @@
+.p-orderlist {
+  .p-orderlist-controls {
+    padding: $panelContentPadding;
+
+    .p-button {
+      margin-bottom: $inlineSpacing;
+    }
+  }
+
+  .p-orderlist-header {
+    background: $panelHeaderBg;
+    color: $panelHeaderTextColor;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-bottom: 0 none;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-orderlist-title {
+      font-weight: $panelHeaderFontWeight;
+    }
+  }
+
+  .p-orderlist-filter-container {
+    padding: $panelHeaderPadding;
+    background: $panelContentBg;
+    border: $panelHeaderBorder;
+    border-bottom: 0 none;
+
+    .p-orderlist-filter-input {
+      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-orderlist-filter-icon {
+      right: nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
+
+  .p-orderlist-list {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $inputListPadding;
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+
+    .p-orderlist-item {
+      padding: $inputListItemPadding;
+      margin: $inputListItemMargin;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+
+      &:focus {
+        @include focused-listitem();
+      }
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+    }
+
+    .p-orderlist-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+    }
+
+    &:not(.cdk-drop-list-dragging) {
+      .p-orderlist-item {
+        &:not(.p-highlight):hover {
+          background: $inputListItemHoverBg;
+          color: $inputListItemTextHoverColor;
+        }
+      }
+    }
+  }
+
+  &.p-orderlist-striped {
+    .p-orderlist-list {
+      .p-orderlist-item:nth-child(even) {
+        background: $panelContentEvenRowBg;
+
+        &:hover {
+          background: $inputListItemHoverBg;
+        }
+      }
+    }
+  }
+}
+
+.p-orderlist-item {
+  &.cdk-drag-preview {
+    padding: $inputListItemPadding;
+    box-shadow: $inputOverlayShadow;
+    border: $inputListItemBorder;
+    color: $inputListItemTextColor;
+    background: $panelContentBg;
+    margin: 0;
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/data/_organizationchart.scss

@@ -0,0 +1,50 @@
+.p-organizationchart {
+  .p-organizationchart-node-content {
+    &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+      background: $inputListItemHoverBg;
+      color: $inputListItemTextHoverColor;
+    }
+
+    &.p-highlight {
+      background: $highlightBg;
+      color: $highlightTextColor;
+
+      .p-node-toggler {
+        i {
+          color: darken($highlightBg, 25%);
+        }
+      }
+    }
+  }
+
+  .p-organizationchart-line-down {
+    background: $organizationChartConnectorColor;
+  }
+
+  .p-organizationchart-line-left {
+    border-right: $panelContentBorder;
+    border-color: $organizationChartConnectorColor;
+  }
+
+  .p-organizationchart-line-top {
+    border-top: $panelContentBorder;
+    border-color: $organizationChartConnectorColor;
+  }
+
+  .p-organizationchart-node-content {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $panelContentPadding;
+  }
+
+  .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+
+    &:focus {
+      @include focused();
+    }
+  }
+}