From 8b0459fae40e0b5ec88854be2791dc2af20ed615 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Thu, 18 May 2023 11:26:17 +0200 Subject: [PATCH 1/3] CropEditor: refactor numeric control initialisation --- public/js/crop_editor.js | 52 ++++++++++++---------------------------- 1 file changed, 15 insertions(+), 37 deletions(-) diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index 286f1da..e1e3329 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -30,45 +30,23 @@ class CropEditor { this.position.className = "crop_position"; this.container.appendChild(this.position); - let source_x_label = document.createTextNode("Source X:"); - this.position.appendChild(source_x_label); + const addNumericControl = (label, changeEvent) => { + const labelEl = document.createTextNode("div"); + this.position.appendChild(labelEl); - this.source_x = document.createElement("input"); - this.source_x.className = 'form-control d-inline'; - this.source_x.type = 'number'; - this.source_x.addEventListener("change", this.positionBoundary.bind(this)); - this.source_x.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.source_x); + const control = document.createElement("input"); + control.className = 'form-control d-inline'; + control.type = 'number'; + control.addEventListener("change", changeEvent); + control.addEventListener("keyup", changeEvent); + this.position.appendChild(control); + return control; + }; - let source_y_label = document.createTextNode("Source Y:"); - this.position.appendChild(source_y_label); - - this.source_y = document.createElement("input"); - this.source_y.className = 'form-control d-inline'; - this.source_y.type = 'number'; - this.source_y.addEventListener("change", this.positionBoundary.bind(this)); - this.source_y.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.source_y); - - let crop_width_label = document.createTextNode("Crop width:"); - this.position.appendChild(crop_width_label); - - this.crop_width = document.createElement("input"); - this.crop_width.className = 'form-control d-inline'; - this.crop_width.type = 'number'; - this.crop_width.addEventListener("change", this.positionBoundary.bind(this)); - this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.crop_width); - - let crop_height_label = document.createTextNode("Crop height:"); - this.position.appendChild(crop_height_label); - - this.crop_height = document.createElement("input"); - this.crop_height.className = 'form-control d-inline'; - this.crop_height.type = 'number'; - this.crop_height.addEventListener("change", this.positionBoundary.bind(this)); - this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.crop_height); + this.source_x = addNumericControl("Source X:", this.positionBoundary); + this.source_y = addNumericControl("Source Y:", this.positionBoundary); + this.crop_width = addNumericControl("Crop width:", this.positionBoundary); + this.crop_height = addNumericControl("Crop height:", this.positionBoundary); this.crop_constrain_label = document.createElement("label"); this.position.appendChild(this.crop_constrain_label); From 33bc262f0a8aa134744653150998332abb043dd2 Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Thu, 18 May 2023 12:13:36 +0200 Subject: [PATCH 2/3] CropEditor: adopt a more Bootstrap-savvy form layout --- public/css/admin.css | 3 ++- public/js/crop_editor.js | 48 +++++++++++++++++++++++++++++----------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/public/css/admin.css b/public/css/admin.css index 6be934e..9f3d97c 100644 --- a/public/css/admin.css +++ b/public/css/admin.css @@ -34,7 +34,7 @@ color: #fff; } #crop_editor input[type=number] { - width: 75px; + width: 85px; background: #555; color: #fff; } @@ -44,6 +44,7 @@ .crop_position { background: rgba(0, 0, 0, 1.0); border: none; + display: flex; padding: 5px; text-align: center; } diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index e1e3329..5aa64c6 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -16,6 +16,7 @@ class CropEditor { initDOM() { this.container = document.createElement("div"); + this.container.className = 'container-fluid'; this.container.id = "crop_editor"; this.initPositionForm(); @@ -27,19 +28,30 @@ class CropEditor { initPositionForm() { this.position = document.createElement("fieldset"); - this.position.className = "crop_position"; + this.position.className = "crop_position flex-row justify-content-center"; this.container.appendChild(this.position); const addNumericControl = (label, changeEvent) => { - const labelEl = document.createTextNode("div"); - this.position.appendChild(labelEl); + const column = document.createElement('div'); + column.className = 'col-auto'; + this.position.appendChild(column); + + const group = document.createElement('div'); + group.className = 'input-group'; + column.appendChild(group); + + const labelEl = document.createElement("span"); + labelEl.className = 'input-group-text'; + labelEl.textContent = label; + group.appendChild(labelEl); const control = document.createElement("input"); - control.className = 'form-control d-inline'; + control.className = 'form-control'; control.type = 'number'; control.addEventListener("change", changeEvent); control.addEventListener("keyup", changeEvent); - this.position.appendChild(control); + group.appendChild(control); + return control; }; @@ -48,28 +60,38 @@ class CropEditor { this.crop_width = addNumericControl("Crop width:", this.positionBoundary); this.crop_height = addNumericControl("Crop height:", this.positionBoundary); - this.crop_constrain_label = document.createElement("label"); - this.position.appendChild(this.crop_constrain_label); + const otherColumn = document.createElement('div'); + otherColumn.className = 'col-auto text-nowrap'; + this.position.appendChild(otherColumn); + + const constrainContainer = document.createElement("div"); + constrainContainer.className = 'form-checkbox d-inline'; + otherColumn.appendChild(constrainContainer); this.crop_constrain = document.createElement("input"); this.crop_constrain.checked = true; + this.crop_constrain.className = 'form-check-input'; + this.crop_constrain.id = 'check_constrain'; this.crop_constrain.type = 'checkbox'; - this.crop_constrain_label.appendChild(this.crop_constrain); + constrainContainer.appendChild(this.crop_constrain); - this.crop_constrain_text = document.createTextNode('Constrain proportions'); - this.crop_constrain_label.appendChild(this.crop_constrain_text); + this.crop_constrain_label = document.createElement("label"); + this.crop_constrain_label.className = 'form-check-label'; + this.crop_constrain_label.htmlFor = 'check_constrain'; + this.crop_constrain_label.textContent = 'Constrain proportions'; + constrainContainer.appendChild(this.crop_constrain_label); this.save_button = document.createElement("span"); this.save_button.className = "btn btn-light"; this.save_button.textContent = "Save"; this.save_button.addEventListener('click', this.save.bind(this)); - this.position.appendChild(this.save_button); + otherColumn.appendChild(this.save_button); this.abort_button = document.createElement("span"); this.abort_button.className = "btn btn-danger"; this.abort_button.textContent = "Abort"; this.abort_button.addEventListener('click', this.hide.bind(this)); - this.position.appendChild(this.abort_button); + otherColumn.appendChild(this.abort_button); } initImageContainer() { @@ -153,7 +175,7 @@ class CropEditor { this.source_x.max = source.naturalWidth - 1; this.source_y.max = source.naturalHeight - 1; - this.crop_constrain_text.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`; + this.crop_constrain_label.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`; } showContainer() { From d5cddba5e904f20188c0b283967708770073aa0c Mon Sep 17 00:00:00 2001 From: Aaron van Geffen Date: Fri, 19 May 2023 00:19:53 +0200 Subject: [PATCH 3/3] CropEditor: adjust input group background colour --- public/css/admin.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/public/css/admin.css b/public/css/admin.css index 9f3d97c..e69e854 100644 --- a/public/css/admin.css +++ b/public/css/admin.css @@ -33,11 +33,17 @@ z-index: 100; color: #fff; } -#crop_editor input[type=number] { - width: 85px; - background: #555; +#crop_editor .input-group-text { + background-color: rgba(233, 236, 239, 0.5); + border-color: rgba(233, 236, 239, 0.5); color: #fff; } +#crop_editor input[type=number] { + background: #555; + border-color: rgba(233, 236, 239, 0.5); + color: #fff; + width: 85px; +} #crop_editor input[type=checkbox] { vertical-align: middle; }