diff --git a/pandora_console/images/svg/bars-graph.svg b/pandora_console/images/svg/bars-graph.svg new file mode 100644 index 0000000000..0b287c910b --- /dev/null +++ b/pandora_console/images/svg/bars-graph.svg @@ -0,0 +1,14 @@ + + + + Dark / 20 / bars-graph@svg + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/clock.svg b/pandora_console/images/svg/clock.svg new file mode 100644 index 0000000000..ebf1b72606 --- /dev/null +++ b/pandora_console/images/svg/clock.svg @@ -0,0 +1,11 @@ + + + + Dark / 20 / clock@svg + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/color-cloud.svg b/pandora_console/images/svg/color-cloud.svg new file mode 100644 index 0000000000..29423853c2 --- /dev/null +++ b/pandora_console/images/svg/color-cloud.svg @@ -0,0 +1,11 @@ + + + + Dark / 20 / color-cloud@svg + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/donut-graph.svg b/pandora_console/images/svg/donut-graph.svg new file mode 100644 index 0000000000..8496108a50 --- /dev/null +++ b/pandora_console/images/svg/donut-graph.svg @@ -0,0 +1,11 @@ + + + + Dark / 20 / donut-graph@svg + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/event-history.svg b/pandora_console/images/svg/event-history.svg new file mode 100644 index 0000000000..c26f05a7b2 --- /dev/null +++ b/pandora_console/images/svg/event-history.svg @@ -0,0 +1,14 @@ + + + + Dark / 20 / event-history@svg + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/item-box.svg b/pandora_console/images/svg/item-box.svg new file mode 100644 index 0000000000..e85bae3588 --- /dev/null +++ b/pandora_console/images/svg/item-box.svg @@ -0,0 +1,14 @@ + + + + Dark / 20 / item-box@svg + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/item-group.svg b/pandora_console/images/svg/item-group.svg new file mode 100644 index 0000000000..7905f0991c --- /dev/null +++ b/pandora_console/images/svg/item-group.svg @@ -0,0 +1,16 @@ + + + + Dark / 20 / item-group@svg + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/item-icon.svg b/pandora_console/images/svg/item-icon.svg new file mode 100644 index 0000000000..73d3b90f03 --- /dev/null +++ b/pandora_console/images/svg/item-icon.svg @@ -0,0 +1,13 @@ + + + + Dark / 20 / item-icon@svg + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/item-label.svg b/pandora_console/images/svg/item-label.svg new file mode 100644 index 0000000000..74747769bb --- /dev/null +++ b/pandora_console/images/svg/item-label.svg @@ -0,0 +1,11 @@ + + + + Dark / 20 / item-label@svg + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/item-line.svg b/pandora_console/images/svg/item-line.svg new file mode 100644 index 0000000000..c3ef439544 --- /dev/null +++ b/pandora_console/images/svg/item-line.svg @@ -0,0 +1,13 @@ + + + + Dark / 20 / item-line@svg + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/item-service.svg b/pandora_console/images/svg/item-service.svg new file mode 100644 index 0000000000..79f9a6c84c --- /dev/null +++ b/pandora_console/images/svg/item-service.svg @@ -0,0 +1,15 @@ + + + + Dark / 20 / item-service@svg + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/module-graph.svg b/pandora_console/images/svg/module-graph.svg new file mode 100644 index 0000000000..ac7e2d3909 --- /dev/null +++ b/pandora_console/images/svg/module-graph.svg @@ -0,0 +1,12 @@ + + + + Dark / 20 / module-graph@svg + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/network-line.svg b/pandora_console/images/svg/network-line.svg new file mode 100644 index 0000000000..5ded2cd32b --- /dev/null +++ b/pandora_console/images/svg/network-line.svg @@ -0,0 +1,16 @@ + + + + Dark / 20 / network-line@svg + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/odometro.svg b/pandora_console/images/svg/odometro.svg new file mode 100644 index 0000000000..1a4ef020a5 --- /dev/null +++ b/pandora_console/images/svg/odometro.svg @@ -0,0 +1,15 @@ + + + + Dark / 20 / odometro@svg + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/percentil.svg b/pandora_console/images/svg/percentil.svg new file mode 100644 index 0000000000..bdabf53460 --- /dev/null +++ b/pandora_console/images/svg/percentil.svg @@ -0,0 +1,15 @@ + + + + Dark / 20 / percentil@svg + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/simple-value.svg b/pandora_console/images/svg/simple-value.svg new file mode 100644 index 0000000000..cf13affe38 --- /dev/null +++ b/pandora_console/images/svg/simple-value.svg @@ -0,0 +1,11 @@ + + + + Dark / 20 / simple-value@svg + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/pandora_console/images/svg/static-graph.svg b/pandora_console/images/svg/static-graph.svg new file mode 100644 index 0000000000..0ae690419c --- /dev/null +++ b/pandora_console/images/svg/static-graph.svg @@ -0,0 +1,13 @@ + + + + Dark / 20 / static-graph@svg + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/pandora_console/include/styles/form.css b/pandora_console/include/styles/form.css index 935b796b76..33de5749de 100644 --- a/pandora_console/include/styles/form.css +++ b/pandora_console/include/styles/form.css @@ -200,7 +200,7 @@ label { .discovery_full_width_input { width: 100%; } - +/* li > input[type="number"], li > input[type="text"]:not(.search_input), li > input[type="email"], @@ -216,7 +216,7 @@ li > input[type="password"], box-sizing: border-box; margin-bottom: 4px; } - +*/ #interval_manual > input[type="text"] { width: 50px; margin-left: 10px; @@ -323,11 +323,13 @@ form.modal ul.wizard li { width: 90%; margin: 0.5em auto; justify-items: center; + align-items: center; + flex-wrap: nowrap; } form.modal-dashboard ul.wizard li *, form.modal ul.wizard li * { - flex: 1; + flex: 1 1 50%; } ul.wizard li.flex-indep { diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index 18cb228caa..eaf9bf1ec4 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -1823,7 +1823,7 @@ table.rounded_cells td { } .toolbox-buttons { display: flex; - flex-direction: row-reverse; + flex-direction: row; align-items: center; } .right { @@ -8984,12 +8984,15 @@ input, textarea, select { background-color: #f6f7fb; - height: 28px; + height: 32px; border: 1px solid #c0ccdc; border-radius: 8px; padding-left: 12px; font: normal normal normal 12px Pandora-Light; color: #2b3332; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } input:disabled, @@ -9149,6 +9152,129 @@ button.submitButton.onlyIcon.completed { mask: url(../../images/svg/success.svg) no-repeat right / contain; -webkit-mask: url(../../images/svg/success.svg) no-repeat right / contain; } +/* Visual Consoles */ +button.buttonButton.onlyIcon.camera_min, +button.submitButton.onlyIcon.camera_min { + mask: url(../../images/svg/static-graph.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/static-graph.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.percentile_item_min, +button.submitButton.onlyIcon.percentile_item_min { + mask: url(../../images/svg/percentil.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/percentil.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.graph_min, +button.submitButton.onlyIcon.graph_min { + mask: url(../../images/svg/module-graph.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/module-graph.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.donut_graph_min, +button.submitButton.onlyIcon.donut_graph_min { + mask: url(../../images/svg/donut-graph.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/donut-graph.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.bars_graph_min, +button.submitButton.onlyIcon.bars_graph { + mask: url(../../images/svg/bars-graph.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/bars-graph.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.auto_sla_graph_min, +button.submitButton.onlyIcon.auto_sla_graph_min { + mask: url(../../images/svg/event-history.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/event-history.svg) no-repeat right / + contain; +} + +button.buttonButton.onlyIcon.binary_min, +button.submitButton.onlyIcon.binary_min { + mask: url(../../images/svg/simple-value.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/simple-value.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.label_min, +button.submitButton.onlyIcon.label_min { + mask: url(../../images/svg/item-label.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/item-label.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.icon_min, +button.submitButton.onlyIcon.icon_min { + mask: url(../../images/svg/item-icon.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/item-icon.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.clock_min, +button.submitButton.onlyIcon.clock_min { + mask: url(../../images/svg/clock.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/clock.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.group_item_min, +button.submitButton.onlyIcon.group_item_min { + mask: url(../../images/svg/item-group.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/item-group.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.box_item, +button.submitButton.onlyIcon.box_item { + mask: url(../../images/svg/item-box.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/item-box.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.line_item, +button.submitButton.onlyIcon.line_item { + mask: url(../../images/svg/item-line.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/item-line.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.color_cloud_min, +button.submitButton.onlyIcon.color_cloud_min { + mask: url(../../images/svg/color-cloud.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/color-cloud.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.network_link_min, +button.submitButton.onlyIcon.network_link_min { + mask: url(../../images/svg/network-line.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/network-line.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.odometer_min, +button.submitButton.onlyIcon.odometer_min { + mask: url(../../images/svg/odometro.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/odometro.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.service_min, +button.submitButton.onlyIcon.service_min { + mask: url(../../images/svg/item-service.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/item-service.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.delete_item, +button.submitButton.onlyIcon.delete_item { + mask: url(../../images/svg/trash.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/trash.svg) no-repeat right / contain; +} + +button.buttonButton.onlyIcon.copy_item, +button.submitButton.onlyIcon.copy_item { + mask: url(../../images/svg/duplicate.svg) no-repeat right / contain; + -webkit-mask: url(../../images/svg/duplicate.svg) no-repeat right / contain; +} + +button.buttonButton.link-create-item, +button.submitButton.link-create-item { + border-radius: 0; + margin: 0 0.5em; +} + +/* End for Visual Consoles */ button.buttonButton.secondary, button.submitButton.secondary { background-color: #fff; @@ -9191,6 +9317,7 @@ button.submitButton.link { border: 0; box-shadow: none; justify-content: flex-start; + height: 24px; } button.buttonButton.link > div, @@ -9336,6 +9463,15 @@ button.ui-button.ui-widget.submit-cancel:active { z-index: 10; } +input[type="color"] { + background: transparent; + padding: 0 10px; + width: 50px; + box-sizing: initial; + border: 2px solid #14524f; + box-shadow: 0px 3px 6px #c7c7c7; + border-radius: 16px; +} span.ColorPickerDivSample { margin-left: -10px; padding: 0px 10px; diff --git a/pandora_console/include/styles/visual_maps.css b/pandora_console/include/styles/visual_maps.css index ace606b1b3..34ea370ea3 100644 --- a/pandora_console/include/styles/visual_maps.css +++ b/pandora_console/include/styles/visual_maps.css @@ -72,6 +72,7 @@ div#vc-controls img.vc-qr { flex: 1; display: flex; justify-content: space-between; + margin: 1em 0; } .visual-console-edit-controls > span { @@ -80,6 +81,7 @@ div#vc-controls img.vc-qr { .visual-console-copy-delete { margin-right: 20px; + display: flex; } #edit-vc label {