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

Update toolbar button style #2627

Merged
merged 2 commits into from
Jul 8, 2022
Merged

Conversation

luka-nextcloud
Copy link
Contributor

@luka-nextcloud luka-nextcloud commented Jun 28, 2022

Signed-off-by: Luka Trovic luka@nextcloud.com

Summary

  • use primary for active icons, primary-light for the background
  • raise opacity for all buttons by default
  • current opacity for the disabled buttons
  • Remove blue circle below active icon

@luka-nextcloud
Copy link
Contributor Author

Here are videos on desktop and mobile:

Screencast.from.30-06-2022.23_32_23.webm
Screencast.from.30-06-2022.23_34_56.webm

@luka-nextcloud luka-nextcloud self-assigned this Jun 30, 2022
@luka-nextcloud luka-nextcloud force-pushed the feature/2607-toolbar-button-style branch from 911b116 to 0b42920 Compare June 30, 2022 16:55
@vinicius73
Copy link
Member

/rebase

@nextcloud-command nextcloud-command force-pushed the feature/2607-toolbar-button-style branch from 0b42920 to 85e5351 Compare June 30, 2022 18:20
@jancborchardt
Copy link
Member

Looks nice! Just what's the blue border around the textarea, that shouldn't be there. :)

@vinicius73
Copy link
Member

vinicius73 commented Jun 30, 2022

Looks nice! Just what's the blue border around the textarea, that shouldn't be there. :)

I guess it is related to nextcloud/server#31584

@vinicius73
Copy link
Member

/compile amend

@nextcloud-command nextcloud-command force-pushed the feature/2607-toolbar-button-style branch from 85e5351 to d54a8b7 Compare June 30, 2022 18:25
@vinicius73 vinicius73 added enhancement New feature or request design Experience, interaction, interface, … labels Jun 30, 2022
background-color: var(--color-primary-light);
border-radius: 50%;
svg {
fill: var(--color-primary) !important;
Copy link
Member

Choose a reason for hiding this comment

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

Is it possible to avoid !important here and in line 75?

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 tried to get rid of it but we need it in those lines.

Copy link
Member

Choose a reason for hiding this comment

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

Maybe setting color: var(--color-primary); on the parent could work as the svg should use currentColor?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unfortunately, it doesn't work.

@max-nextcloud
Copy link
Collaborator

/rebase

@max-nextcloud
Copy link
Collaborator

/compile

@luka-nextcloud luka-nextcloud force-pushed the feature/2607-toolbar-button-style branch from 640a465 to 3f25d10 Compare July 6, 2022 16:29
@luka-nextcloud
Copy link
Contributor Author

/rebase

Signed-off-by: Luka Trovic <luka@nextcloud.com>
@nextcloud-command nextcloud-command force-pushed the feature/2607-toolbar-button-style branch from 3f25d10 to 37fef5d Compare July 8, 2022 09:46
@luka-nextcloud
Copy link
Contributor Author

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@luka-nextcloud luka-nextcloud merged commit 5db2963 into master Jul 8, 2022
@delete-merged-branch delete-merged-branch bot deleted the feature/2607-toolbar-button-style branch July 8, 2022 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review design Experience, interaction, interface, … enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Button style
6 participants