From a8f5e30c35fd211bbddbf26401bdb368a228791c Mon Sep 17 00:00:00 2001 From: Simon Rettberg Date: Tue, 20 Jun 2017 19:18:57 +0200 Subject: [locationinfo] Use styled DIVs instead of SVGs for PC icons --- .../locationinfo/frontend/doorsign.html | 122 ++++++++++++++------- .../locationinfo/frontend/img/pc_defect.svg | 58 ---------- .../locationinfo/frontend/img/pc_defect_eink.svg | 58 ---------- .../locationinfo/frontend/img/pc_free.svg | 50 --------- .../locationinfo/frontend/img/pc_free_eink.svg | 57 ---------- .../locationinfo/frontend/img/pc_off.svg | 50 --------- .../locationinfo/frontend/img/pc_off_eink.svg | 50 --------- .../locationinfo/frontend/img/pc_used.svg | 50 --------- .../locationinfo/frontend/img/pc_used_eink.svg | 58 ---------- 9 files changed, 80 insertions(+), 473 deletions(-) delete mode 100644 modules-available/locationinfo/frontend/img/pc_defect.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_defect_eink.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_free.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_free_eink.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_off.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_off_eink.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_used.svg delete mode 100644 modules-available/locationinfo/frontend/img/pc_used_eink.svg (limited to 'modules-available/locationinfo/frontend') diff --git a/modules-available/locationinfo/frontend/doorsign.html b/modules-available/locationinfo/frontend/doorsign.html index baee4dca..00fc9bce 100755 --- a/modules-available/locationinfo/frontend/doorsign.html +++ b/modules-available/locationinfo/frontend/doorsign.html @@ -140,11 +140,11 @@ optional: .location-container { position: absolute; - background-color: white; width: 100%; height: 100%; overflow: hidden; border: 1px solid darkgrey; + background: linear-gradient(#ddd, white); } @@ -152,11 +152,10 @@ optional: float: left; padding: 0; box-sizing: border-box; - background: linear-gradient(#cccccc, white); } .free-busy-busy { - background: grey; + background: rgba(0,0,0,.25); } .ui-widget-content { @@ -172,12 +171,67 @@ optional: text-shadow: none; } + .BROKEN { + opacity: 0.4; + } + .pc-container { position: absolute; left: 0; bottom: 0; display: inline-block; + padding: 0; + margin: 0; + overflow: hidden; + } + + .pc-container div { + box-sizing: border-box; + } + + .screen-frame { + position: relative; + background: black; + border-radius: 15%; + width: 100%; + height: 80%; + padding: 10%; + } + + .screen-inner { + width: 100%; + height: 100%; + transition: background 2s; + } + + .BROKEN .screen-inner { + background: #000; + } + + .OFF .screen-inner { + background: #0c9; + } + + .IDLE .screen-inner { + background: #3e4; + } + .OCCUPIED .screen-inner { + background: #800; + } + + .screen-foot1 { + margin: 0 auto; + width: 10%; + height: 10%; + background: black; + } + + .screen-foot2 { + width: 100%; + height: 10%; + background: black; + border-radius: 30% 30% 0 0; } .pc-overlay-container { @@ -225,7 +279,7 @@ optional: } .wc-today { - background-color: white; + background-color: rgba(255,255,255,.66); } .wc-time-header-cell { @@ -239,6 +293,7 @@ optional: .wc-scrollable-grid { transition: height 500ms; + background: rgba(0,0,0,0); } .wc-scrollable-grid .wc-day-column-first { @@ -270,7 +325,14 @@ optional: var globalConfig = {}; var roomIds = []; var panelUuid = false; - var supportSvg = typeof(SVGRect) !== "undefined"; + var list; + if (typeof(SVGRect) !== "undefined") { + list = [".svg", ".png", ".jpg", ".gif"]; + } else { + list = [".png", ".jpg", ".gif"]; + } + const IMG_FORMAT_LIST = list; + delete list; // TODO: Get languages from slx-admin var translation = { "en": { @@ -1366,10 +1428,13 @@ optional: function setUpRoom(room, layout) { for (var i = 0; i < layout.length; i++) { if (!isNaN(layout[i].y) && !isNaN(layout[i].x)) { - var $img = $('').prop('id', "pc-img_" + room.id + "_" + layout[i].id).addClass('pc-img'); + //var $img = $('').prop('id', "pc-img_" + room.id + "_" + layout[i].id).addClass('pc-img'); var $overlays = $('