Skip to content

Commit

Permalink
Merge pull request #501 from aarranz/feature/sidebar-top-and-bottom
Browse files Browse the repository at this point in the history 
Initial support for a bottom version of the SidebarLayout
  • Loading branch information
@aarranz
aarranz committed Mar 19, 2021
2 parents 1abd2ee + db585c5 commit 5943d56
Show file tree
Hide file tree
Showing 9 changed files with 809 additions and 343 deletions.
341 changes: 332 additions & 9 deletions src/js_tests/wirecloud/ui/SidebarLayoutSpec.js
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/js_tests/wirecloud/ui/WidgetViewSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@
widget.layout = null;
return new Set();
}),
getHeight: jasmine.createSpy("getHeight"),
getHeightInPixels: jasmine.createSpy("getHeightInPixels"),
getWidth: jasmine.createSpy("getWidth"),
_notifyResizeEvent: jasmine.createSpy("_notifyResizeEvent")
});
if ("_searchFreeSpace" in klass.prototype) {
Expand Down
6 changes: 6 additions & 0 deletions src/js_tests/wirecloud/ui/WorkspaceViewSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,12 @@
},
rightLayout: {
active: false
},
bottomLayout: {
active: false
},
topLayout: {
active: false
}
};
}
Expand Down
44 changes: 44 additions & 0 deletions src/wirecloud/defaulttheme/static/css/workspace/dragboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,47 @@
padding-left: 8px;
padding-right: 10px;
}

.wc-sidebar-bottom-handle {
position: absolute;
color: $button-text-color-light;
bottom: 495px;
left: 50%;
transform: translate(-50%, 0);
background: rgb(255, 255, 255);
padding: 1px 20px 0px 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: $button-border-default;
cursor: pointer;
}

.wc-sidebar-bottom-handle:hover {
background-color: darken(white, 10%);
padding-top: 3px;
padding-bottom: 2px;
}

.wc-sidebar-top-handle {
position: absolute;
color: $button-text-color-light;
top: 495px;
left: 50%;
transform: translate(-50%, 0);
background: rgb(255, 255, 255);
padding: 0px 20px 1px 20px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: $button-border-default;
cursor: pointer;
}

.wc-sidebar-top-handle:hover {
background-color: darken(white, 10%);
padding-top: 2px;
padding-bottom: 3px;
}
45 changes: 19 additions & 26 deletions src/wirecloud/platform/static/js/wirecloud/ui/ColumnLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
}

adaptRowOffset(size) {
var offsetInLU, pixels, parsedSize;
let offsetInLU, pixels, parsedSize;

parsedSize = this.parseSize(size);
if (parsedSize[1] === 'cells') {
Expand All @@ -167,14 +167,15 @@
return height + this.topMargin + this.bottomMargin;
}

getColumnOffset(position) {
var tmp = Math.floor((this.getWidth() * this.fromHCellsToPercentage(position.x)) / 100);
getColumnOffset(position, css) {
let tmp = Math.floor((this.getWidth() * this.fromHCellsToPercentage(position.x)) / 100);
tmp += this.leftMargin + this.dragboard.leftMargin;
return tmp;
return css ? tmp + 'px' : tmp;
}

getRowOffset(position) {
return this.dragboard.topMargin + this.fromVCellsToPixels(position.y) + this.topMargin;
getRowOffset(position, css) {
let offset = this.dragboard.topMargin + this.fromVCellsToPixels(position.y) + this.topMargin;
return css ? offset + 'px' : offset;
}

_notifyWindowResizeEvent(widthChanged, heightChanged) {
Expand Down Expand Up @@ -203,16 +204,14 @@
this.matrix = [];
this._buffers.base.matrix = this.matrix;

for (var x = 0; x < this.columns; x++) {
for (let x = 0; x < this.columns; x++) {
this.matrix[x] = [];
}
}

_hasSpaceFor(_matrix, positionX, positionY, width, height) {
var x, y;

for (x = 0; x < width; x++) {
for (y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
if (_matrix[positionX + x][positionY + y] != null) {
return false;
}
Expand All @@ -232,10 +231,8 @@
}

_compressColumns(_matrix, x, width) {
var i, y;

for (i = 0; i < width; i++) {
for (y = _matrix[x + i].length - 1; y >= 0; y--) {
for (let i = 0; i < width; i++) {
for (let y = _matrix[x + i].length - 1; y >= 0; y--) {
if (_matrix[x + i][y] != null) {
break;
}
Expand Down Expand Up @@ -338,28 +335,24 @@
}

_reserveSpace(buffer, widget) {
var position = this._getPositionOn(buffer, widget);
var width = widget.shape.width;
var height = widget.shape.height;
const position = this._getPositionOn(buffer, widget);
const width = widget.shape.width;
const height = widget.shape.height;

this._reserveSpace2(buffer.matrix, widget, position.x, position.y, width, height);
}

_reserveSpace2(matrix, widget, positionX, positionY, width, height) {
var x, y;

for (x = 0; x < width; x++) {
for (y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
matrix[positionX + x][positionY + y] = widget;
}
}
}

_clearSpace2(_matrix, positionX, positionY, width, height) {
var x, y;

for (x = 0; x < width; x++) {
for (y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
delete _matrix[positionX + x][positionY + y];
}
}
Expand Down
137 changes: 110 additions & 27 deletions src/wirecloud/platform/static/js/wirecloud/ui/SidebarLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,19 @@

const privates = new WeakMap();

const OPPOSITE = {
const ICON = Object.freeze({
"right": "right",
"left": "left",
"top": "up",
"bottom": "down"
});
const OPPOSITE = Object.freeze({
"right": "left",
"left": "right"
};
"left": "right",
"bottom": "up",
"top": "down"
});
const POSITIONS = Object.freeze(["top", "right", "bottom", "left"]);

const on_active_get = function on_active_get() {
return privates.get(this).active;
Expand All @@ -48,23 +57,40 @@

privates.get(this).active = newstatus;

let position = this.active ? this.position : OPPOSITE[this.position];
this.handleicon.className = "fas fa-caret-" + position;
let icon = this.active ? ICON[this.position] : OPPOSITE[this.position];
this.handleicon.className = "fas fa-caret-" + icon;

this._notifyWindowResizeEvent(true, true);
};

const getFirstWidget = function getFirstWidget(matrix) {
const rows = Math.max(...matrix.map((column) => column.length));
for (let y = 0; y < rows; y++) {
for (let x = 0; x < matrix.length; x++) {
if (matrix[x][y] != null) {
return matrix[x][y];
}
}
}
return null;
};

ns.SidebarLayout = class SidebarLayout extends ns.SmartColumnLayout {

constructor(dragboard, options) {
options = utils.merge({
position: "left"
}, options);

if (POSITIONS.indexOf(options.position) === -1) {
throw new TypeError("Invalid position option: " + options.position);
}
const vertical = options.position === "right" || options.position === "left";

super(
dragboard,
1,
12,
vertical ? 1 : 10,
vertical ? 12 : 497,
4,
3,
12
Expand All @@ -75,6 +101,9 @@
});

Object.defineProperties(this, {
vertical: {
value: vertical
},
position: {
value: options.position
},
Expand All @@ -101,7 +130,7 @@
this.handle.classList.remove("hidden");
}
if (this.initialized) {
this.matrix[0][0].wrapperElement.appendChild(this.handle);
getFirstWidget(this.matrix).wrapperElement.appendChild(this.handle);
}

return result;
Expand All @@ -114,47 +143,101 @@
this.handle.classList.add("hidden");
this.handle.remove();
} else {
this.matrix[0][0].wrapperElement.appendChild(this.handle);
getFirstWidget(this.matrix).wrapperElement.appendChild(this.handle);
}
return result;
}

adaptColumnOffset(value) {
return new Wirecloud.ui.MultiValuedSize(0, 0);
adaptColumnOffset(size) {
if (this.vertical) {
return new Wirecloud.ui.MultiValuedSize(0, 0);
} else {
return super.adaptColumnOffset(size);
}
}

adaptRowOffset(size) {
if (this.vertical) {
return super.adaptRowOffset(size);
} else {
return new Wirecloud.ui.MultiValuedSize(0, 0);
}
}

adaptHeight(size) {
if (this.vertical) {
return super.adaptHeight(size);
} else {
return new Wirecloud.ui.MultiValuedSize(this.getHeight(), 1);
}
}

adaptWidth(size) {
return new Wirecloud.ui.MultiValuedSize(this.getWidth(), 1);
if (this.vertical) {
return new Wirecloud.ui.MultiValuedSize(this.getWidth(), 1);
} else {
return super.adaptWidth(size);
}
}

getHeight() {
return !this.vertical ? 497 : super.getHeight();
}

getWidth() {
return 497;
return this.vertical ? 497 : super.getWidth();
}

initialize() {
let modified = Wirecloud.ui.SmartColumnLayout.prototype.initialize.call(this);
if (this.matrix[0][0] != null) {
this.matrix[0][0].wrapperElement.appendChild(this.handle);
const firstWidget = getFirstWidget(this.matrix);
if (firstWidget != null) {
firstWidget.wrapperElement.appendChild(this.handle);
}
return modified;
}

updatePosition(widget, element) {
var offset;
if (!this.active) {
offset = -this.getWidth() - this.leftMargin + this.dragboard.leftMargin;
} else {
offset = 0;
if (!this.vertical) {
let offset;
if (!this.active) {
offset = -this.getHeight() - 1;
} else {
offset = 0;
}
element.style.left = this.getColumnOffset(widget.position, true);
element.style.right = "";
if (this.position === "top") {
element.style.top = offset + "px";
element.style.bottom = "";
} else {
element.style.bottom = offset + "px";
element.style.top = "";
}
} else /* if (this.vertical) */ {
let offset;
if (!this.active) {
offset = -this.getWidth() - this.leftMargin + this.dragboard.leftMargin;
} else {
offset = 0;
}
element.style.top = this.getRowOffset(widget.position, true);
element.style.bottom = "";
if (this.position === "left") {
element.style.left = offset + "px";
element.style.right = "";
} else {
element.style.right = offset + "px";
element.style.left = "";
}
}
}

element.style.top = this.getRowOffset(widget.position) + "px";
element.style.bottom = "";
if (this.position === "left") {
element.style.left = offset + "px";
element.style.right = "";
getHeightInPixels(cells) {
if (this.vertical) {
return super.getHeightInPixels(cells);
} else {
element.style.right = offset + "px";
element.style.left = "";
return this.getHeight();
}
}

Expand Down
Loading

0 comments on commit 5943d56

Please sign in to comment.