CropEditor: adopt a more Bootstrap-savvy form layout
This commit is contained in:
parent
8b0459fae4
commit
33bc262f0a
@ -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;
|
||||
}
|
||||
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user