tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-29 08:45:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Visual Console Refactor: finished the default sizing for the elements which use icons

Browse Source 
Former-commit-id: b8504d22eecdaeee8ac64a2d008ff847c07aa4d2
This commit is contained in:
Alejandro Gallardo Escobar 2019-04-23 17:42:03 +02:00
parent c0b324b25a
commit 0a70e49792
15 changed files with 103 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pandora_console/include/rest-api/models/VisualConsole/Items/Group.php
View File

@ -277,18 +277,23 @@ final class Group extends Item
// If the width or the height are equal to 0 we will extract them
// from the real image size.
if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
$width = (int) $data['width'];
$height = (int) $data['height'];
if ($width === 0 || $height === 0) {
// TODO: This will be the default behaviour after we finish the
// builder. Don't delete this code.
// $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
// $data['width'] = $sizeImage[0];
// $data['height'] = $sizeImage[1];
$sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
if ($sizeImage[0] < 70 || $sizeImage[1] < 70) {
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
} else {
// Default value. Will be replaced by a dynamic image size
// calculation after the phase 3.
$imageHeight = $sizeImage[1];
if ($width === 0) {
$data['width'] = 70;
$data['height'] = 70;
}
if ($height === 0) {
$data['height'] = ($imageHeight > 70) ? 70 : $imageHeight;
}
}

21
pandora_console/include/rest-api/models/VisualConsole/Items/Icon.php
View File

@ -117,18 +117,23 @@ final class Icon extends Item
// If the width or the height are equal to 0 we will extract them
// from the real image size.
if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
$width = (int) $data['width'];
$height = (int) $data['height'];
if ($width === 0 || $height === 0) {
// TODO: This will be the default behaviour after we finish the
// builder. Don't delete this code.
// $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
// $data['width'] = $sizeImage[0];
// $data['height'] = $sizeImage[1];
$sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
if ($sizeImage[0] < 70 || $sizeImage[1] < 70) {
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
} else {
// Default value. Will be replaced by a dynamic image size
// calculation after the phase 3.
$imageHeight = $sizeImage[1];
if ($width === 0) {
$data['width'] = 70;
$data['height'] = 70;
}
if ($height === 0) {
$data['height'] = ($imageHeight > 70) ? 70 : $imageHeight;
}
}

23
pandora_console/include/rest-api/models/VisualConsole/Items/StaticGraph.php
View File

@ -176,18 +176,25 @@ final class StaticGraph extends Item
// If the width or the height are equal to 0 we will extract them
// from the real image size.
if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
$width = (int) $data['width'];
$height = (int) $data['height'];
if ($width === 0 || $height === 0) {
// TODO: This will be the default behaviour after we finish the
// builder. Don't delete this code.
// $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
// $data['width'] = $sizeImage[0];
// $data['height'] = $sizeImage[1];
// Default value. Will be replaced by a dynamic image size
// calculation after the phase 3.
$sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
if ($sizeImage[0] < 70 || $sizeImage[1] < 70) {
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
} else {
// Default value. Will be replaced by a dynamic image size
// calculation after the phase 3.
$imageHeight = $sizeImage[1];
if ($width === 0) {
$data['width'] = 70;
$data['height'] = 70;
}
if ($height === 0) {
$data['height'] = ($imageHeight > 70) ? 70 : $imageHeight;
}
}

1
pandora_console/include/visual-console-client/vc.main.959e6e64.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;ACbA;EACE,wBAAwB;EACxB,kCAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.959e6e64.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: contain;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}

35
pandora_console/include/visual-console-client/vc.main.959e6e64.css → pandora_console/include/visual-console-client/vc.main.ba23d758.css
View File

@ -12,12 +12,16 @@
display: flex;
-webkit-box-orient: initial;
-webkit-box-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
justify-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@font-face {
@ -33,17 +37,17 @@
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
-ms-flex-line-pack: center;
align-content: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
}
.visual-console-item .digital-clock > span {
@ -69,18 +73,17 @@
.visual-console-item .analogic-clock .hour-hand {
-webkit-animation: rotate-hour 43200s infinite linear;
animation: rotate-hour 43200s infinite linear;
animation: rotate-hour 43200s infinite linear;
}
.visual-console-item .analogic-clock .minute-hand {
-webkit-animation: rotate-minute 3600s infinite linear;
animation: rotate-minute 3600s infinite linear;
animation: rotate-minute 3600s infinite linear;
}
.visual-console-item .analogic-clock .second-hand {
-webkit-animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
}
/*# sourceMappingURL=vc.main.959e6e64.css.map*/
/*# sourceMappingURL=vc.main.ba23d758.css.map*/

1
pandora_console/include/visual-console-client/vc.main.ba23d758.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;ACdA;EACE,wBAAwB;EACxB,kCAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.ba23d758.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: contain;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: none;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}

2
pandora_console/include/visual-console-client/vc.main.c6f6292b.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
pandora_console/include/visual-console-client/vc.main.c6f6292b.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.d67acfa3.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
pandora_console/include/visual-console-client/vc.main.d67acfa3.min.js.map
View File

File diff suppressed because one or more lines are too long

27
visual_console_client/src/items/Group.ts
View File

@ -62,22 +62,19 @@ export function groupPropsDecoder(data: UnknownObject): GroupProps | never {
export default class Group extends Item<GroupProps> {
protected createDomElement(): HTMLElement {
if (this.props.showStatistics) {
const div = document.createElement("div");
div.className = "group";
if (this.props.html != null) {
div.innerHTML = this.props.html;
}
const element = document.createElement("div");
element.className = "group";
return div;
} else {
const img: HTMLImageElement = document.createElement("img");
img.className = "group";
if (this.props.statusImageSrc !== null) {
img.src = this.props.statusImageSrc;
}
return img;
if (!this.props.showStatistics && this.props.statusImageSrc !== null) {
// Icon with status.
element.style.background = `url(${this.props.statusImageSrc}) no-repeat`;
element.style.backgroundSize = "contain";
element.style.backgroundPosition = "center";
} else if (this.props.showStatistics && this.props.html != null) {
// Stats table.
element.innerHTML = this.props.html;
}
return element;
}
}

10
visual_console_client/src/items/Icon.ts
View File

@ -32,10 +32,12 @@ export function iconPropsDecoder(data: UnknownObject): IconProps | never {
export default class Icon extends Item<IconProps> {
protected createDomElement(): HTMLElement {
const img: HTMLImageElement = document.createElement("img");
img.className = "icon";
img.src = this.props.imageSrc;
const element = document.createElement("div");
element.className = "icon";
element.style.background = `url(${this.props.imageSrc}) no-repeat`;
element.style.backgroundSize = "contain";
element.style.backgroundPosition = "center";
return img;
return element;
}
}

20
visual_console_client/src/items/Service.ts
View File

@ -54,17 +54,17 @@ export function servicePropsDecoder(data: UnknownObject): ServiceProps | never {
export default class Service extends Item<ServiceProps> {
public createDomElement(): HTMLElement {
const img: HTMLImageElement = document.createElement("img");
const element = document.createElement("div");
element.className = "service";
if (this.props.statusImageSrc !== null) {
img.className = "icon";
img.src = this.props.statusImageSrc;
} else {
if (this.props.encodedTitle !== null) {
const element = document.createElement("div");
element.innerHTML = decodeBase64(this.props.encodedTitle);
return element;
}
element.style.background = `url(${this.props.statusImageSrc}) no-repeat`;
element.style.backgroundSize = "contain";
element.style.backgroundPosition = "center";
} else if (this.props.encodedTitle !== null) {
element.innerHTML = decodeBase64(this.props.encodedTitle);
}
return img;
return element;
}
}

18
visual_console_client/src/items/StaticGraph.ts
View File

@ -67,21 +67,23 @@ export function staticGraphPropsDecoder(
export default class StaticGraph extends Item<StaticGraphProps> {
protected createDomElement(): HTMLElement {
const img: HTMLImageElement = document.createElement("img");
img.className = "static-graph";
img.src = this.props.statusImageSrc || this.props.imageSrc;
const imgSrc = this.props.statusImageSrc || this.props.imageSrc;
const element = document.createElement("div");
element.className = "static-graph";
element.style.background = `url(${imgSrc}) no-repeat`;
element.style.backgroundSize = "contain";
element.style.backgroundPosition = "center";
// Show last value in a tooltip.
if (
this.props.lastValue !== null &&
this.props.showLastValueTooltip !== "disabled"
) {
img.className = "static-graph image forced_title";
img.setAttribute("data-use_title_for_force_title", "1");
img.setAttribute("data-title", this.props.lastValue);
img.alt = this.props.lastValue;
element.className = "static-graph image forced_title";
element.setAttribute("data-use_title_for_force_title", "1");
element.setAttribute("data-title", this.props.lastValue);
}
return img;
return element;
}
}

1
visual_console_client/src/main.css
View File

@ -11,4 +11,5 @@
flex-direction: initial;
justify-items: center;
align-items: center;
user-select: none;
}