Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add resize handlers to sides of widgets #394

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

luksurious
Copy link
Contributor

Feature to allow widgets to be resized from the sides as well.

@@ -145,6 +145,7 @@
dragboardCover.style.top = "0";
dragboardCover.style.left = "0";
dragboardCover.style.width = "100%";
dragboardCover.style.cursor = handleElement.dataset.cursor;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To keep the cursor when resizing, I need a way to pass the cursor type to the cover. This solution might not be the cleanest but I found that better than passing it through 3 levels

right: 34px;
cursor: s-resize;
}
.wc-widget {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just nested the resize elements

cursor: se-resize;
}

.wc-right-side-resize-handle {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and new styles for the side handlers

@@ -2,6 +2,7 @@
<div class="fade panel panel-default">
<div class="wc-widget-heading panel-heading"><h4 class="panel-title"><t:title/></h4><div class="wc-widget-infobuttons"><t:errorbutton/></div><div class="wc-widget-buttons"><t:minimizebutton/><t:menubutton/><t:closebutton/></div></div>
<div class="wc-widget-body"><t:iframe/></div>
<t:leftsideresizehandle/><t:rightsideresizehandle/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I put them outside the body because the body has overflow: hidden so the 6px outside would not work. This seems to work pretty well

@@ -93,7 +93,6 @@
}

.wc-widget-footer {
height: 3px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I can see this is not necessary and only creates a white border at the bottom

@coveralls
Copy link

Coverage Status

Coverage decreased (-0.01%) to 78.862% when pulling 739eb03 on luksurious:feature/widget-resize-sides into 27abd2d on Wirecloud:develop.

2 similar comments
@coveralls
Copy link

Coverage Status

Coverage decreased (-0.01%) to 78.862% when pulling 739eb03 on luksurious:feature/widget-resize-sides into 27abd2d on Wirecloud:develop.

@coveralls
Copy link

Coverage Status

Coverage decreased (-0.01%) to 78.862% when pulling 739eb03 on luksurious:feature/widget-resize-sides into 27abd2d on Wirecloud:develop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants