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

chore: Update the widescreen layout button icon and background #6217

Merged
merged 5 commits into from Jan 10, 2023

Conversation

fayazara
Copy link
Contributor

Description

The current widescreen toggle button didn't match the other elements and was taking unnecessary space.

This uses a different icons, which I think makes more sense to use here.
Before
Screenshot2023-01-10 at 16 02 26@2x
After
Screenshot2023-01-10 at 16 05 20@2x

@pr-triage pr-triage bot added the PR: unreviewed This pull request is yet to be reviewed. label Jan 10, 2023
@netlify
Copy link

netlify bot commented Jan 10, 2023

Deploy Preview for chatwoot-storybook ready!

Name Link
🔨 Latest commit 53786b6
🔍 Latest deploy log https://app.netlify.com/sites/chatwoot-storybook/deploys/63bdb818985c75000804b077
😎 Deploy Preview https://deploy-preview-6217--chatwoot-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@fayazara fayazara self-assigned this Jan 10, 2023
@fayazara fayazara added frontend Involves working with javascript ( Vue JS / CSS ) ready-for-pickup labels Jan 10, 2023
>
<fluent-icon icon="panel-contract" :size="16" />
</div>
<fluent-icon
Copy link
Contributor

Choose a reason for hiding this comment

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

  <div>
    <woot-button
      v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
      icon="arrow-right-import"
      size="tiny"
      variant="smooth"
      color-scheme="secondary"
      class="layout-switch__container"
      :class="{ expanded: isOnExpandedLayout }"
      @click="toggle"
    />
  </div>
  

Can we use woot-button here? Might need to change CSS for rotating the icon

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can we use woot-button here? Might need to change CSS for rotating the icon

@nithindavid thought of using this, but using the rotate on the button itself would rotate the entire button instead of that icon

Copy link
Contributor

Choose a reason for hiding this comment

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

@fayazara We could use this


  &.expanded .icon {
    transform: rotate(180deg);
  }
  

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@nithindavid Updated, please have a look

@pr-triage pr-triage bot added the PR: reviewed-changes-requested Some / all of the reviewers have requested for changes label Jan 10, 2023
@pr-triage pr-triage bot added the PR: partially-approved Not all reviewers have approved the PR label Jan 10, 2023
@nithindavid nithindavid merged commit 0ba5e47 into develop Jan 10, 2023
@nithindavid nithindavid deleted the chore-update-widescreen-icon branch January 10, 2023 19:10
@pr-triage pr-triage bot added the PR: merged The pull request is merged to another branch label Jan 10, 2023
@github-actions
Copy link

github-actions bot commented Feb 9, 2023

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
frontend Involves working with javascript ( Vue JS / CSS ) PR: merged The pull request is merged to another branch PR: partially-approved Not all reviewers have approved the PR PR: reviewed-changes-requested Some / all of the reviewers have requested for changes PR: unreviewed This pull request is yet to be reviewed. ready-for-pickup
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants