Skip to content

Commit

Permalink
Enhancement: Enrich the User Interface of the helpBlock's topBar (#3214)
Browse files Browse the repository at this point in the history 
* Enrich the helpBlock-topBar UI

* Upgrade to Es2015/ES6 code

* Remove wfHandle code completely from topBar
  • Loading branch information
@TheCharismaticEnigma
TheCharismaticEnigma committed Mar 21, 2023
1 parent 7374c31 commit c537609
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 73 deletions.
40 changes: 12 additions & 28 deletions dist/css/windows.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,29 +22,6 @@
padding: 4px;
position: relative;
}
#floatingWindows > .windowFrame > .wfTopBar > .wfHandle {
height: 2px;
width: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #666;
}
#floatingWindows > .windowFrame > .wfTopBar > .wfHandle::before,
#floatingWindows > .windowFrame > .wfTopBar > .wfHandle::after {
content: "";
display: block;
position: absolute;
top: -4px;
height: 2px;
width: 120%;
left: -10%;
background-color: #666;
}
#floatingWindows > .windowFrame > .wfTopBar > .wfHandle::after {
top: 4px;
}
#floatingWindows > .windowFrame > .wfTopBar .wftButton {
background-color: #666;
border-radius: 2px;
Expand All @@ -65,6 +42,9 @@
#floatingWindows > .windowFrame > .wfTopBar .wftButton:last-child {
margin: 0;
}
#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup {
order: 2 ;
}
#floatingWindows > .windowFrame > .wfTopBar .wftButton.rollup::before {
content: "";
display: block;
Expand Down Expand Up @@ -96,6 +76,9 @@
flex-grow: 1;
color: #666;
user-select: none;
text-align: center ;
text-transform: uppercase ;
letter-spacing: 1.2px ;
}
#floatingWindows > .windowFrame > .wfWinBody {
min-height: 50px;
Expand Down Expand Up @@ -181,9 +164,6 @@
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
min-width: auto;
}
#floatingWindows > .windowFrame > .wfTopBar > .wfHandle {
display: none;
}
#floatingWindows > .windowFrame > .wfTopBar .wftButton {
padding: 0 15px;
background: none;
Expand Down Expand Up @@ -214,8 +194,12 @@
#floatingWindows > .windowFrame > .wfTopBar .wftTitle {
flex-grow: 1;
color: #fff;
font-size: 1.4em;
font-size: 1.5em;
padding: 0 15px;
text-align: center ;
text-transform: uppercase ;
font-weight: 500;
letter-spacing: 1.5px ;
}
#floatingWindows > .windowFrame > .wfWinBody {
flex-direction: column;
Expand All @@ -236,4 +220,4 @@
#floatingWindows > .windowFrame > .wfWinBody > .wfbWidget {
padding: 10px;
}
}
}
80 changes: 35 additions & 45 deletions js/widgets/widgetWindows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,7 @@ class WidgetWindow {
this._frame = this._create("div", "windowFrame", windows);
this._overlayframe = this._create("div", "windowFrame", windows);
this._drag = this._create("div", "wfTopBar", this._frame);
this._handle = this._create("div", "wfHandle", this._drag);
// The handle needs the events bound as it's a sibling of the dragging div
// not a relative in either direciton.


if (this._fullscreenEnabled) {
this._drag.ondblclick = (e) => {
this._maximize();
Expand All @@ -100,7 +97,7 @@ class WidgetWindow {
};
}

this._drag.onmousedown = this._handle.onmousedown = (e) => {
this._drag.onmousedown = (e) => {
this._dragging = true;
if (this._maximized) {
// Perform special repositioning to make the drag feel right when
Expand Down Expand Up @@ -143,8 +140,9 @@ class WidgetWindow {
};

const titleEl = this._create("div", "wftTitle", this._drag);
titleEl.innerHTML = _(this._title);
titleEl.id = this._key + "WidgetID";
titleEl.innerHTML = "" ;
titleEl.insertAdjacentHTML("afterbegin", _(this._title));
titleEl.id = `${this._key}WidgetID` ;

if (this._fullscreenEnabled) {
const maxminButton = this._create("div", "wftButton wftMaxmin", this._drag);
Expand Down Expand Up @@ -282,7 +280,8 @@ class WidgetWindow {
*/
addInputButton(initial, parent) {
const el = this._create("div", "wfbtItem", parent || this._toolbar);
el.innerHTML = '<input value="' + initial + '" />';
el.innerHTML = "" ;
el.insertAdjacentHTML("afterbegin", `<input value="${initial}" />` );
return el.querySelector("input");
}

Expand All @@ -297,17 +296,14 @@ class WidgetWindow {
*/
addRangeSlider(initial, parent, min, max, classNm) {
const el = this._create("div", "wfbtItem", parent || this._toolbar);
const elInput = `
<input type="range" class="${classNm}" min="${min}" max="${max}" value="${initial}" />
`;

el.style.height = "250px";
el.innerHTML =
'<input type="range" class="' +
classNm +
'" min="' +
min +
'" max="' +
max +
'" value="' +
initial +
'">';
el.innerHTML = "" ;
el.insertAdjacentHTML("afterbegin", elInput) ;

const slider = el.querySelector("input");
slider.style = " position:absolute;transform:rotate(270deg);height:10px;width:250px;";
return slider;
Expand All @@ -318,7 +314,8 @@ class WidgetWindow {
*/
addSelectorButton(list, initial, parent) {
const el = this._create("div", "wfbtItem", parent || this._toolbar);
el.innerHTML = '<select value="' + initial + '" />';
el.innerHTML = "" ;
el.insertAdjacentHTML("afterbegin", `<select value="${initial}" />`) ;
const selector = el.querySelector("select");
for (const i of list) {
const newOption = new Option("turtle " + i, i);
Expand All @@ -345,18 +342,12 @@ class WidgetWindow {
* @returns {HTMLElement}
*/
modifyButton(index, icon, iconSize, label) {
this._buttons[index].innerHTML =
'<img src="header-icons/' +
icon +
'" title="' +
label +
'" alt="' +
label +
'" height="' +
iconSize +
'" width="' +
iconSize +
'" />';
const innerHTML = `
<img src="header-icons/${icon}" title="${label}" alt="${label}" height="${iconSize}" width="${iconSize}"/>
` ;

this._buttons[index].innerHTML = "" ;
this._buttons[index].insertAdjacentHTML("afterbegin", innerHTML) ;
return this._buttons[index];
}

Expand Down Expand Up @@ -408,18 +399,17 @@ class WidgetWindow {
*/
addButton(icon, iconSize, label, parent) {
const el = this._create("div", "wfbtItem", parent || this._toolbar);
el.innerHTML =
'<img src="header-icons/' +
icon +
'" title="' +
label +
'" alt="' +
label +
'" height="' +
iconSize +
'" width="' +
iconSize +
'" />';

const innerHTML =
`<img src="header-icons/${icon}"
title="${label}"
alt="${label}"
height="${iconSize}"
width="${iconSize}"
/>`;

el.innerHTML = "";
el.insertAdjacentHTML("afterbegin", innerHTML) ;
this._buttons.push(el);
return el;
}
Expand Down Expand Up @@ -554,8 +544,8 @@ class WidgetWindow {
* @returns {WidgetWindow} this
*/
setPosition(x, y) {
this._frame.style.left = x + "px";
this._frame.style.top = Math.max(y, 64) + "px";
this._frame.style.left = `${x}px` ;
this._frame.style.top = `${Math.max(y, 64)}px`;
window.widgetWindows._posCache[this._key] = [x, Math.max(y, 64)];
return this;
}
Expand Down

0 comments on commit c537609

Please sign in to comment.