mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-07-24 22:35:58 +02:00
Visual Console Refactor: finished the default sizing for the elements which use icons
Former-commit-id: b8504d22eecdaeee8ac64a2d008ff847c07aa4d2
This commit is contained in:
parent
c0b324b25a
commit
0a70e49792
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 +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":""}
|
@ -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*/
|
@ -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
2
pandora_console/include/visual-console-client/vc.main.c6f6292b.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -11,4 +11,5 @@
|
||||
flex-direction: initial;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user