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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 5 commits into from
Jan 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ca7af3d
Update the button icon and background
fayazara Jan 10, 2023
f0cace4
Merge branch 'develop' into chore-update-widescreen-icon
fayazara Jan 10, 2023
ee37c2f
Use the woot-button
fayazara Jan 10, 2023
943b72a
Merge branch 'develop' into chore-update-widescreen-icon
iamsivin Jan 10, 2023
53786b6
Minor css cleanup
nithindavid Jan 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 11 additions & 24 deletions app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,11 @@
class="layout-switch__container"
@click="toggle"
>
<div
class="layout-switch__btn left"
:class="{ active: !isOnExpandedLayout }"
>
<fluent-icon icon="panel-sidebar" :size="16" />
</div>
<div
class="layout-switch__btn right"
:class="{ active: isOnExpandedLayout }"
>
<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

icon="arrow-right-import"
:size="16"
:class="{ expanded: isOnExpandedLayout }"
/>
</button>
</template>

Expand All @@ -39,21 +32,15 @@ export default {
.layout-switch__container {
align-items: center;
background-color: var(--s-100);
border-radius: var(--border-radius-medium);
border-radius: var(--border-radius-normal);
cursor: pointer;
display: flex;
padding: var(--space-micro);

.layout-switch__btn {
border-radius: var(--border-radius-normal);
color: var(--s-400);
display: flex;
padding: var(--space-micro) var(--space-smaller);
color: var(--s-600);
display: flex;
padding: var(--space-micro) var(--space-smaller);

&.active {
background-color: var(--white);
color: var(--w-500);
}
.expanded {
transform: rotate(180deg);
}
}
</style>
1 change: 1 addition & 0 deletions app/javascript/shared/components/FluentIcon/dashboard-icons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"arrow-up-right-outline": "M12.748 3.001h7.554l.1.014.099.028.06.026a.72.72 0 0 1 .219.15l.04.044.061.082.037.065.04.09.018.064.014.064.01.093v7.534a.75.75 0 0 1-1.493.102l-.007-.102V5.559L4.28 20.784a.75.75 0 0 1-.977.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L18.439 4.5l-5.69.001a.75.75 0 0 1-.744-.648l-.007-.102a.75.75 0 0 1 .648-.743L12.748 3Z",
"arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
"arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
"arrow-right-import-outline": "M21.25 4.5a.75.75 0 0 1 .743.648L22 5.25v13.004a.75.75 0 0 1-1.493.102l-.007-.102V5.25a.75.75 0 0 1 .75-.75Zm-8.603 1.804l.072-.084a.75.75 0 0 1 .977-.073l.084.073l4.997 4.997a.75.75 0 0 1 .073.976l-.073.085l-4.997 5.003a.75.75 0 0 1-1.133-.976l.072-.084l3.711-3.717H2.75a.75.75 0 0 1-.743-.647L2 11.755a.75.75 0 0 1 .648-.743l.102-.007l13.693-.001l-3.724-3.724a.75.75 0 0 1-.072-.976l.072-.084l-.072.084Z",
"arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",
"arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
"arrow-swap-outline": "m14.783 2.22 4.495 4.494a.75.75 0 0 1 .073.976l-.072.085-4.495 4.504a.75.75 0 0 1-1.135-.975l.073-.084 3.217-3.223H5.243A.75.75 0 0 1 4.5 7.35l-.007-.101a.75.75 0 0 1 .648-.743l.102-.007 11.697-.001-3.218-3.217a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.495 4.494-4.495-4.494ZM19.5 16.65l.006.1a.75.75 0 0 1-.648.744l-.102.007L7.063 17.5l3.22 3.22a.75.75 0 0 1 .074.976l-.073.084a.75.75 0 0 1-.976.073l-.085-.072-4.5-4.497a.75.75 0 0 1-.073-.976l.073-.084 4.5-4.504a.75.75 0 0 1 1.134.976l-.073.084L7.066 16h11.692a.75.75 0 0 1 .743.65l.006.1-.006-.1Z",
Expand Down