Adding upstream version 1.0.2.upstream/1.0.2upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

9 files changed, 813 insertions, 0 deletions

diff --git a/public/css/list/action-list.less b/public/css/list/action-list.less
new file mode 100644
index 0000000..5bb08f4
--- /dev/null
+++ b/public/css/list/action-list.less
@@ -0,0 +1,14 @@
+.action-list {
+  [data-action-item]:hover {
+    background-color: @tr-hover-color;
+    cursor: pointer;
+  }
+
+  [data-action-item].active {
+    background-color: @tr-active-color;
+  }
+
+  &[data-icinga-multiselect-url] * {
+    user-select: none;
+  }
+}
diff --git a/public/css/list/comment-list.less b/public/css/list/comment-list.less
new file mode 100644
index 0000000..46b194d
--- /dev/null
+++ b/public/css/list/comment-list.less
@@ -0,0 +1,50 @@
+// Style
+
+// Layout
+
+.comment-list:not(.detailed) .list-item {
+  .title > i:first-child {
+    margin-right: 0;
+  }
+
+  .title > .subject + .badge,
+  .title > .badge + .subject,
+  .title > .badge:last-of-type {
+    margin-left: 0;
+  }
+
+  .title a {
+    &:not(.subject) {
+      .text-ellipsis();
+    }
+  }
+
+  .title .subject:not(:last-child) {
+    margin-left: 0;
+  }
+
+  .title .subject:nth-child(3):last-child {
+    margin-left: 0;
+  }
+}
+
+.comment-list.minimal .list-item {
+  .user-ball {
+    font-size: .857em;
+    height: 1.75em;
+    line-height: 1.5em;
+    width: 1.75em;
+  }
+}
+
+.comment-list.detailed .list-item {
+  .title > .subject:nth-child(3),
+  .title > .badge + .subject:last-child {
+    margin-left: .3em;
+  }
+
+  .caption {
+    max-height: 4.5em;
+    white-space: normal;
+  }
+}
diff --git a/public/css/list/downtime-list.less b/public/css/list/downtime-list.less
new file mode 100644
index 0000000..222bc7e
--- /dev/null
+++ b/public/css/list/downtime-list.less
@@ -0,0 +1,93 @@
+// Style
+
+.downtime-list .list-item,
+.downtime-detail .list-item {
+  .progress {
+    .progress-bar {
+      background-color: @color-ok;
+    }
+  }
+
+  .visual {
+    background-color: @gray-lighter;
+  }
+
+  .main {
+    border-top: 1px solid @gray-light;
+  }
+
+  &:first-child .main {
+    border-top: none;
+
+    .progress-bar {
+      border-top: 1px solid @gray-light;
+    }
+  }
+
+  &.in-effect {
+    .visual {
+      background-color: @color-ok;
+      color: @text-color-on-icinga-blue;
+    }
+
+    .main {
+      padding-top: 0; // If active the progress bar represents the padding top
+    }
+  }
+}
+
+// Layout
+
+.downtime-list .list-item {
+  .caption > * {
+    display: inline;
+  }
+}
+
+.downtime-list .list-item,
+.downtime-detail .list-item {
+  .progress {
+    height: 2px;
+    margin-bottom: ~"calc(.5em - 2px)";
+    min-width: 100%;
+    position: relative;
+
+    .progress-bar {
+      height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  &:first-child .main .progress-bar {
+    height: ~"calc(100% + 1px)"; // +1px due to the border added exclusively for the first item
+  }
+
+  .visual {
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1em;
+    margin-right: .5em;
+    padding: .5em .25em;
+    text-align: center;
+    width: 6em;
+
+    strong {
+      font-size: 1.5em;
+      line-height: 1em;
+    }
+  }
+}
+
+.item-list.downtime-list.minimal .list-item {
+  .visual {
+    display: block;
+    line-height: 1.5;
+    width: 8em;
+    white-space: nowrap;
+
+    strong {
+      display: inline-block;
+      font-size: 1em;
+    }
+  }
+}
diff --git a/public/css/list/item-list.less b/public/css/list/item-list.less
new file mode 100644
index 0000000..cd39aac
--- /dev/null
+++ b/public/css/list/item-list.less
@@ -0,0 +1,239 @@
+// Style
+
+.item-list {
+  list-style-type: none;
+
+  > .empty-state {
+    .rounded-corners();
+    background-color: @gray-lighter;
+  }
+
+  .show-more:hover,
+  .page-separator:hover {
+    background: none;
+  }
+
+  > .show-more a {
+    .rounded-corners(.25em);
+    background: @low-sat-blue;
+    text-align: center;
+
+    &:hover {
+      opacity: .8;
+      text-decoration: none;
+    }
+  }
+
+  > .page-separator:after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: @gray;
+    align-self: center;
+    margin-left: .25em;
+  }
+
+  > .page-separator a {
+    color: @gray;
+    font-weight: bold;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  > .page-separator + .list-item .main {
+    border-top: none;
+  }
+}
+
+// Layout
+
+.item-list {
+  margin: 0;
+  padding: 0;
+
+  .list-item {
+    display: flex;
+
+    &.show-more a {
+      flex: 1;
+      margin: 1.5em 0;
+      padding: .5em 0;
+    }
+
+    .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.minimal {
+  > .empty-state {
+    padding: .25em;
+  }
+
+  .list-item {
+    header {
+      max-width: 100%;
+    }
+
+    .visual {
+      width: 2.2em;
+    }
+
+    .check-attempt {
+      display: none;
+    }
+
+    .title {
+      p {
+        display: inline;
+
+        & + p {
+          margin-left: .417em;
+        }
+      }
+    }
+
+    .caption {
+      flex: 1 1 auto;
+      height: 1.5em;
+      margin-right: 1em;
+      width: 0;
+
+      .line-clamp("reset");
+    }
+
+    .caption,
+    .caption .plugin-output {
+      .text-ellipsis();
+    }
+  }
+}
+
+.item-list:not(.detailed) .list-item {
+  .title {
+    display: inline-flex;
+    align-items: baseline;
+    white-space: nowrap;
+    min-width: 0;
+
+    > * {
+      margin: 0 .28125em; // 0 calculated   width
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .subject {
+      .text-ellipsis();
+    }
+  }
+}
+
+.item-list.detailed .list-item {
+  .title {
+    word-break: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+  }
+
+  .caption {
+    display: block;
+    height: auto;
+    max-height: 7.5em; /* 5 lines */
+    position: relative;
+
+    .line-clamp(4)
+  }
+}
+
+.item-list {
+  .icon-image {
+    width:  3em;
+    height: 3em;
+    text-align: center;
+    margin-top: .5em;
+    margin-left: .5em;
+    overflow: hidden;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
+  }
+
+  &.minimal {
+    .icon-image {
+      height: 2em;
+      width: 2em;
+      line-height: 2;
+    }
+  }
+}
+
+.controls .list-item:not(:last-child) {
+  margin-bottom: .5em;
+}
+
+.controls .item-list:not(.detailed):not(.minimal) .list-item {
+  .plugin-output {
+    line-height: 1.5
+  }
+
+  .caption {
+    height: 2.5em;
+  }
+}
+
+.controls .item-list.minimal .icon-image {
+  margin-top: 0;
+}
diff --git a/public/css/list/item-table.less b/public/css/list/item-table.less
new file mode 100644
index 0000000..c307416
--- /dev/null
+++ b/public/css/list/item-table.less
@@ -0,0 +1,176 @@
+// Style
+
+.item-table {
+  padding: 0;
+
+  thead {
+    th {
+      font-weight: normal;
+
+      // Border styles start
+      form {
+        padding: 0 0 0 1px;
+        border-bottom: 1px solid @gray-light;
+        background: linear-gradient(to top, @gray-light, @body-bg-color);
+
+        button {
+          background: @body-bg-color;
+        }
+      }
+      &:first-child form {
+        padding-left: 0;
+      }
+      // Border styles end
+    }
+
+    button {
+      .appearance(none);
+      border: none;
+      background: none;
+      padding: .1em .5em;
+
+      text-align: left;
+      color: @text-color-light;
+
+      > .icon {
+        opacity: 0;
+        width: 0;
+        transition: opacity .25s linear, width .25s ease;
+      }
+      &:hover .icon,
+      &:focus .icon,
+      &.active .icon {
+        opacity: 1;
+        width: 1em;
+      }
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
+
+  > .empty-state,
+  > tbody > tr:first-child .empty-state {
+    .rounded-corners();
+    background-color: @gray-lightest;
+  }
+
+  .list-item:not(:last-child) > *:not(.visual),
+  .row-item:not(:last-child) {
+    border-bottom: 1px solid @gray-light;
+  }
+}
+
+@media print {
+  .list-item.page-break-follows {
+    &:not(:last-child) > *:not(.visual) {
+      border-bottom: none;
+    }
+  }
+}
+
+// Layout
+
+table.item-table {
+  table-layout: fixed;
+}
+
+.item-table {
+  display: table;
+  width: 100%;
+  margin: 0;
+
+  thead {
+    position: sticky;
+    top: 0;
+
+    th {
+      // That's layout, yes, controls overflow when scrolling
+      padding: 1em 0 0 0;
+      background: @body-bg-color;
+    }
+
+    th button {
+      width: 100%;
+      display: inline-flex;
+      align-items: baseline;
+      justify-content: space-between;
+
+      span {
+        .text-ellipsis();
+      }
+    }
+  }
+
+  th.has-visual {
+    width: 3em;
+  }
+
+  tbody td {
+    .text-ellipsis();
+    vertical-align: top;
+  }
+
+  .list-item {
+    display: table-row;
+  }
+
+  .list-item > .col {
+    display: table-cell;
+    vertical-align: middle;
+    white-space: nowrap;
+
+    &:not(:last-child) {
+      padding-right: 1em;
+    }
+
+    &.title {
+      .text-ellipsis();
+      width: 100%;
+    }
+
+    > * {
+      display: inline-block;
+
+      &:not(:last-child) {
+        margin-right: .5em;
+      }
+    }
+  }
+
+  .list-item > *:not(.visual) {
+    padding: .5em 0;
+  }
+
+  .list-item > .visual {
+    display: table-cell;
+    padding: .5em 1em 0 0;
+  }
+
+  > .empty-state,
+  > tbody > tr:first-child .empty-state {
+    margin: 0 1em;
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+.content.full-width .item-table .list-item {
+  // The .list-item itself can't have padding because of `display:table-row`
+  &:before, &:after {
+    display: inline-block;
+    content: '\00a0';
+    width: 1em;
+  }
+}
+
+#layout.twocols table.item-table {
+  > thead > tr > th,
+  > tbody > tr > td {
+    &:nth-child(n+6) {
+      display: none;
+      width: 0;
+    }
+  }
+}
diff --git a/public/css/list/list-item.less b/public/css/list/list-item.less
new file mode 100644
index 0000000..2370b59
--- /dev/null
+++ b/public/css/list/list-item.less
@@ -0,0 +1,139 @@
+// Style
+
+.list-item {
+  color: @text-color-light;
+
+  &.overdue {
+    background-color: @gray-lighter;
+  }
+
+  &.overdue header > *:not(time),
+  &.overdue .caption {
+    opacity: 0.6;
+  }
+
+  &.overdue time {
+    .rounded-corners();
+    background-color: @color-critical;
+    color: @text-color-on-icinga-blue;
+  }
+
+  &:not(:first-child) > .main {
+    border-top: 1px solid @gray-light;
+  }
+
+  &:not(:first-child) .visual {
+    margin-top: 1px;
+  }
+
+  .caption {
+    i {
+      opacity: 0.8;
+    }
+
+    a {
+      color: @text-color;
+    }
+  }
+
+  .title {
+    span.subject,
+    .state-text {
+      color: @text-color;
+    }
+
+    .state-text {
+      text-transform: uppercase;
+    }
+
+    a {
+      color: @text-color;
+      font-weight: bold;
+
+      &:hover {
+        color: @icinga-blue;
+        text-decoration: none;
+      }
+    }
+  }
+
+  footer {
+    .status-icons {
+      color: @gray-light;
+    }
+  }
+}
+
+@media print {
+  .list-item.page-break-follows + .list-item {
+    .main {
+      border-top: 1px solid transparent;
+    }
+  }
+}
+
+// Layout
+
+.list-item {
+  &.overdue time {
+    margin-right: -.5em;
+    padding: 0 0.5em;
+  }
+
+  .visual {
+    padding: .5em 0;
+    width: 2.5em;
+
+    .check-attempt {
+      margin-top: .5em;
+    }
+  }
+
+  .caption {
+    p {
+      display: inline-block;
+    }
+
+    &.plugin-output, .plugin-output {
+      font-size: 11/12em;
+      line-height: 1.5*12/11em;
+    }
+  }
+
+  .title {
+    margin-right: 1em;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  time {
+    white-space: nowrap;
+  }
+
+  footer {
+    > * {
+      font-size: .857em;
+      line-height: 1.5*.857em;
+    }
+
+    .status-icons {
+      display: flex;
+      align-items: center;
+    }
+
+    .performance-data {
+      .inline-pie {
+        display: inline-block;
+        line-height: 1.5*.857em;
+        height: 1em;
+        width: 1em;
+
+        &:not(:last-child) {
+          margin-right: .209em;
+        }
+      }
+    }
+  }
+}
diff --git a/public/css/list/state-item-table.less b/public/css/list/state-item-table.less
new file mode 100644
index 0000000..aece148
--- /dev/null
+++ b/public/css/list/state-item-table.less
@@ -0,0 +1,34 @@
+// Layout
+
+#layout.wide-layout .item-table th.has-plugin-output {
+  width: 50em;
+}
+#layout.default-layout .item-table th.has-plugin-output {
+  width: 30em;
+}
+#layout.compact-layout .item-table th.has-plugin-output {
+  width: 10em;
+}
+
+#layout.twocols table.item-table {
+  .has-plugin-output {
+    width: auto;
+  }
+}
+
+table.item-table {
+  th.has-visual {
+    button {
+      display: inline-flex;
+      justify-content: center;
+    }
+
+    span > .icon:before {
+      margin: 0;
+    }
+  }
+
+  .visual {
+    text-align: center;
+  }
+}
diff --git a/public/css/list/state-row-item.less b/public/css/list/state-row-item.less
new file mode 100644
index 0000000..31c7e5a
--- /dev/null
+++ b/public/css/list/state-row-item.less
@@ -0,0 +1,42 @@
+// Style
+
+.row-item {
+  .plugin-output {
+    overflow: hidden;
+    .line-clamp();
+  }
+
+  .subject {
+    font-weight: bold;
+  }
+}
+
+// Layout
+
+.row-item {
+  .performance-data {
+    overflow: hidden;
+    .line-clamp(2);
+    white-space: normal;
+    margin-left: -.25em;
+
+    .inline-pie {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-left: .25em;
+    }
+  }
+
+  .has-icon-images {
+    height: 2.5em;
+    vertical-align: middle;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
+  }
+}
diff --git a/public/css/list/user-list.less b/public/css/list/user-list.less
new file mode 100644
index 0000000..078d1b9
--- /dev/null
+++ b/public/css/list/user-list.less
@@ -0,0 +1,26 @@
+// Layout
+
+.controls .user-list,
+.controls .usergroup-list {
+  .usergroup-ball,
+  .user-ball {
+    height: 1.5em;
+    width: 1.5em;
+    line-height: ~"calc(1.5em - 4px)";
+    display: block;
+  }
+
+  .title br {
+    display: none;
+  }
+
+  .list-item {
+    & > .visual {
+      padding-top: 0.25em;
+    }
+
+    & > .col {
+      padding: .25em 0;
+    }
+  }
+}