Integrate list and table widgets from Icinga DB Web (#183)

Icinga · Sep 8, 2023 · 911f741 · 911f741
2 parents c8825cb + 02d7583
commit 911f741
Show file tree

Hide file tree

Showing 14 changed files with 840 additions and 18 deletions.
diff --git a/asset/css/list/item-list.less b/asset/css/list/item-list.less
@@ -0,0 +1,92 @@
+// Style
+
+.item-list {
+  list-style-type: none;
+
+  > .empty-state {
+    .rounded-corners();
+    background-color: @empty-state-bg-in-lists;
+  }
+}
+
+// Layout
+
+.item-list {
+  margin: 0;
+  padding: 0;
+
+  .list-item {
+    display: flex;
+
+    .main {
+      flex: 1 1 auto;
+      padding: .5em 0;
+      width: 0;
+      margin-left: .5em;
+    }
+
+    .visual {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .caption {
+      height: 3em;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      .line-clamp();
+
+      img {
+        max-height: 1em;
+      }
+    }
+
+    header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    footer {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  > .empty-state {
+    margin: 0 1em;
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+.item-list.default-layout .list-item {
+  .title {
+    display: inline-flex;
+    align-items: baseline;
+    white-space: nowrap;
+    min-width: 0;
+
+    > * {
+      margin: 0 .28125em; // 0 calculated &nbsp; width
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .subject {
+      .text-ellipsis();
+    }
+  }
+}
+
+.controls .list-item:not(:last-child) {
+  margin-bottom: .5em;
+}
diff --git a/asset/css/list/item-table.less b/asset/css/list/item-table.less
@@ -0,0 +1,104 @@
+// Style
+
+ul.item-table {
+  list-style-type: none;
+}
+
+div.item-table {
+  > .empty-state {
+    .rounded-corners();
+    background-color: @empty-state-bg-in-lists;
+  }
+}
+
+.table-row {
+  color: @default-text-color-light;
+
+  .title {
+    .subject {
+      color: @default-text-color;
+    }
+
+    a {
+      font-weight: bold;
+
+      &:hover {
+        color: @list-item-title-hover-color;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+@media print {
+  .item-table li.page-break-follows:not(:last-of-type) {
+    .col {
+      border-bottom: none;
+    }
+
+    .visual {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Layout
+
+.table-row {
+  .title {
+    display: flex;
+
+    .visual {
+      width: 2.5em;
+      padding: .5em 0;
+      margin-top: -.5em;
+      margin-bottom: -.5em;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      width: 0;
+
+      > * {
+        .text-ellipsis();
+      }
+    }
+  }
+
+  .col {
+    white-space: nowrap;
+  }
+}
+
+ul.item-table {
+  display: grid;
+
+  > .table-row {
+    .col:not(.title) {
+      display: grid;
+      align-items: center;
+    }
+  }
+}
+
+ul.item-table {
+  padding: 0;
+  margin: 0;
+}
+
+div.item-table {
+  > .empty-state {
+    margin: 0 1em;
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+div.table-row {
+  display: flex;
+  column-gap: 1em;
+
+  .title {
+    flex: 1 1 auto;
+  }
+}
diff --git a/asset/css/list/list-item.less b/asset/css/list/list-item.less
@@ -0,0 +1,85 @@
+// Style
+
+.list-item {
+  color: @default-text-color-light;
+
+  &:not(:first-child) > .main {
+    border-top: 1px solid @list-item-separation-bg;
+  }
+
+  &:not(:first-child) .visual {
+    margin-top: 1px;
+  }
+
+  .caption {
+    i {
+      opacity: 0.8;
+    }
+
+    a {
+      color: @default-text-color;
+    }
+  }
+
+  .title {
+    .subject {
+      color: @default-text-color;
+    }
+
+    a {
+      color: @default-text-color;
+      font-weight: bold;
+
+      &:hover {
+        color: @list-item-title-hover-color;
+        text-decoration: none;
+      }
+    }
+  }
+
+  footer {
+    padding-top: .5em;
+  }
+}
+
+@media print {
+  .list-item.page-break-follows + .list-item {
+    .main {
+      border-top: 1px solid transparent;
+    }
+  }
+}
+
+// Layout
+
+.list-item {
+  .visual {
+    padding: .5em 0;
+    width: 2.5em;
+  }
+
+  .caption {
+    p {
+      display: inline-block;
+    }
+  }
+
+  .title {
+    margin-right: 1em;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  time {
+    white-space: nowrap;
+  }
+
+  footer {
+    > * {
+      font-size: .857em;
+      line-height: 1.5*.857em;
+    }
+  }
+}
diff --git a/asset/css/mixin/mixins.less b/asset/css/mixin/mixins.less
@@ -18,3 +18,20 @@
   -moz-box-shadow: @arguments;
   box-shadow: @arguments;
 }
+
+.line-clamp(@numOfLines: 2) when (@numOfLines > 1) {
+  display: -webkit-box;
+  -webkit-line-clamp: @numOfLines;
+  -webkit-box-orient: vertical;
+}
+.line-clamp(@numOfLines: 2) when (@numOfLines = "reset") {
+  display: revert;
+  -webkit-line-clamp: initial;
+  -webkit-box-orient: initial;
+}
+
+.text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/asset/css/variables.less b/asset/css/variables.less
@@ -121,6 +121,10 @@
 @schedule-element-fields-disabled-selected-bg: @base-gray-light;
 @schedule-element-keyboard-note-bg: @base-gray-light;
 
+@empty-state-bg-in-lists: @base-gray-lighter;
+@list-item-title-hover-color: @base-primary-color;
+@list-item-separation-bg: @base-gray-light;
+
 @iplWebLightRules: {
   :root {
     --base-gray: #819398;
@@ -199,5 +203,9 @@
     --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);
+
+    --empty-state-bg-in-lists: var(--base-gray-lighter);
+    --list-item-title-hover-color: var(--base-primary-color);
+    --list-item-separation-bg: var(--base-gray-light);
   }
 };
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
@@ -1505,11 +1505,6 @@ parameters:
 			count: 1
 			path: src/Widget/ActionBar.php
 
-		-
-			message: "#^Method ipl\\\\Web\\\\Widget\\\\ActionBar\\:\\:getBaseTarget\\(\\) should return string\\|null but returns array\\|bool\\|string\\|null\\.$#"
-			count: 1
-			path: src/Widget/ActionBar.php
-
 		-
 			message: "#^Parameter \\#1 \\$attribute of method ipl\\\\Html\\\\Attributes\\:\\:add\\(\\) expects array\\|ipl\\\\Html\\\\Attribute\\|ipl\\\\Html\\\\Attributes\\|string, array\\|ipl\\\\Html\\\\Attributes\\|null given\\.$#"
 			count: 1
@@ -1530,11 +1525,6 @@ parameters:
 			count: 1
 			path: src/Widget/ContinueWith.php
 
-		-
-			message: "#^Method ipl\\\\Web\\\\Widget\\\\ContinueWith\\:\\:getBaseTarget\\(\\) should return string\\|null but returns array\\|bool\\|string\\|null\\.$#"
-			count: 1
-			path: src/Widget/ContinueWith.php
-
 		-
 			message: "#^Method ipl\\\\Web\\\\Widget\\\\Dropdown\\:\\:__construct\\(\\) has parameter \\$attributes with no value type specified in iterable type array\\.$#"
 			count: 1
@@ -1615,11 +1605,6 @@ parameters:
 			count: 1
 			path: src/Widget/Link.php
 
-		-
-			message: "#^Method ipl\\\\Web\\\\Widget\\\\Link\\:\\:getBaseTarget\\(\\) should return string\\|null but returns array\\|bool\\|string\\|null\\.$#"
-			count: 1
-			path: src/Widget/Link.php
-
 		-
 			message: "#^Parameter \\#1 \\$attribute of method ipl\\\\Html\\\\Attributes\\:\\:add\\(\\) expects array\\|ipl\\\\Html\\\\Attribute\\|ipl\\\\Html\\\\Attributes\\|string, array\\|ipl\\\\Html\\\\Attributes\\|null given\\.$#"
 			count: 1