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

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

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;
}
}

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;
}
}

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;
}
}

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":""}

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*/

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":""}

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

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;
}
}

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;
}
}

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;
}
}

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;
}
}

View File

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