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

Quickfix for action button and material design icon #1614

Merged
merged 2 commits into from Dec 1, 2020

Conversation

PVince81
Copy link
Contributor

@PVince81 PVince81 commented Nov 27, 2020

When using a material design icon in the icon slot, this fix will
properly align it vertically.

We need it because the ActionButton consumer cannot override the styles with ::v-deep since the popover itself might be in the document body

When testing the docs you might need to scroll up or down to see the dropdown because of nextcloud/server#23872 which also occurs in the docs...

@PVince81 PVince81 added bug Something isn't working 2. developing Work in progress labels Nov 27, 2020
@PVince81 PVince81 self-assigned this Nov 27, 2020
@PVince81 PVince81 force-pushed the bugfix/noid/actionbutton-align-materialdesignicon branch from 07896a5 to 0ddf83c Compare November 27, 2020 17:25
@PVince81 PVince81 added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Nov 27, 2020
@PVince81 PVince81 marked this pull request as ready for review November 27, 2020 17:27
@PVince81
Copy link
Contributor Author

Without the CSS fix:
image

With the CSS fix:
image

Copy link
Contributor

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

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

See comments

src/components/ActionButton/ActionButton.vue Outdated Show resolved Hide resolved
src/components/ActionButton/ActionButton.vue Outdated Show resolved Hide resolved
src/components/ActionButton/ActionButton.vue Outdated Show resolved Hide resolved
src/components/ActionButton/ActionButton.vue Outdated Show resolved Hide resolved
@PVince81
Copy link
Contributor Author

@ma12-co seems 16 is too small

here I used 16 for the material design icons:
image

hmmm, but 24 is maybe too big indeed:
image

here's 20:
image

let's go with 20 then ?

this is anyway just a code example... ideally in the future we should have a way to only provide the icon name...

@marcoambrosini
Copy link
Contributor

@PVince81 I agree that 18 or 20 would look better, but for now 16px is our default in Nextcloud. We can talk about bumping that up a bit but I wouldn't do it here.

@PVince81
Copy link
Contributor Author

PVince81 commented Dec 1, 2020

@PVince81 I agree that 18 or 20 would look better, but for now 16px is our default in Nextcloud. We can talk about bumping that up a bit but I wouldn't do it here.

ok, fine. adjusted. please review

When using a material design icon in the icon slot, this fix will
properly align it vertically.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Since 16px is an existing default, let's use that in the recommendation
for when using material design icons in the ActionButton.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
@PVince81 PVince81 force-pushed the bugfix/noid/actionbutton-align-materialdesignicon branch from 2178912 to 3446414 Compare December 1, 2020 10:38
@PVince81
Copy link
Contributor Author

PVince81 commented Dec 1, 2020

rebased for cypress fix

@PVince81 PVince81 merged commit 392a1db into master Dec 1, 2020
@PVince81 PVince81 deleted the bugfix/noid/actionbutton-align-materialdesignicon branch December 1, 2020 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants