Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

copy: Redesign copy button in user card popover. 

This commit serves as the base for standardizing the look and feel of
the copy button throughout the UI.

Changes:
    - Replaces the old fa-copy icon with the new Zulip custom copy icon.
    - Standardizes the hover/active states for interactivity.
    - Defines two variants of the copy button, one which is just the
      icon and the other which is squared off like a traditional button.
    - Removes the `.popover-menu-icon` classes from the copy buttons,
      as that class is made to be used with popover menu option icons.
This commit is contained in:
Sayam Samal 2024-08-16 02:56:28 +05:30 committed by Tim Abbott
parent e125ad823d
commit 3f79af12ac
5 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/styles/app_components.css
View File

@ -1330,6 +1330,36 @@ input.settings_text_input {
}
}
.copy-btn {
display: flex;
border-radius: 4px;
color: var(--color-copy-btn);
/* 2px at 16px/1em */
padding: 0.125em;
cursor: pointer;
&:hover,
&:focus-visible {
color: var(--color-copy-btn-hover);
}
&:active {
color: var(--color-copy-btn-active);
}
&.copy-btn-square {
&:hover,
:focus-visible {
background-color: var(--color-copy-btn-square-bg-hover);
}
&:active {
background-color: var(--color-copy-btn-square-bg-active);
color: var(--color-copy-btn-square-active);
}
}
}
.text-success {
color: hsl(120.91deg 32.04% 40.39%);
}

56
web/styles/app_variables.css
View File

@ -748,22 +748,24 @@
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */
--color-copy-btn: color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent);
--color-copy-btn-hover: var(--green-600);
/* hsl(144deg 84% 22%) corresponds to --green-600.
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */
--color-copy-btn-bg-hover: color-mix(
--color-copy-btn-hover: var(--grey-600);
/* --grey-600, opacity 0.07 */
--color-copy-btn-square-bg-hover: color-mix(
in oklch,
hsl(144deg 84% 22%) 8%,
hsla(229deg 9% 36%) 7%,
transparent
);
--color-copy-btn-active: var(--green-500);
/* hsl(146deg 90% 27%) corresponds to --green-500.
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */
--color-copy-btn-bg-active: color-mix(
/* --grey-600, opacity 0.7 */
--color-copy-btn-active: color-mix(
in oklch,
hsl(146deg 90% 27%) 12%,
hsla(229deg 9% 36%) 70%,
transparent
);
--color-copy-btn-square-active: var(--grey-600);
/* --grey-600, opacity 0.11 */
--color-copy-btn-square-bg-active: color-mix(
in oklch,
hsl(229deg 9% 36%) 11%,
transparent
);
@ -1201,26 +1203,28 @@
--color-left-sidebar-navigation-icon
);
--color-tab-picker-icon: hsl(0deg 0% 80%);
/* hsl(229deg 9% 65%) corresponds to --grey-350.
/* hsl(229deg 10% 70%) corresponds to --grey-400.
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */
--color-copy-btn: color-mix(in oklch, hsl(229deg 9% 65%) 70%, transparent);
--color-copy-btn-hover: var(--green-300);
/* hsl(144deg 84% 22%) corresponds to --green-600.
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */
--color-copy-btn-bg-hover: color-mix(
--color-copy-btn: color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
--color-copy-btn-hover: var(--grey-300);
/* --grey-400, opacity 0.14 */
--color-copy-btn-square-bg-hover: color-mix(
in oklch,
hsl(144deg 84% 22%) 8%,
hsl(230deg 9% 60%) 14%,
transparent
);
--color-copy-btn-active: var(--green-300);
/* hsl(139deg 54% 40%) corresponds to --green-400.
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */
--color-copy-btn-bg-active: color-mix(
/* --grey-300, opacity 0.7 */
--color-copy-btn-active: color-mix(
in oklch,
hsl(139deg 54% 40%) 17%,
hsl(229deg 10% 70%) 70%,
transparent
);
--color-copy-btn-square-active: var(--grey-300);
/* --grey-400, opacity 0.18 */
--color-copy-btn-square-bg-active: color-mix(
in oklch,
hsl(229deg 9% 60%) 18%,
transparent
);

19
web/styles/popovers.css
View File

@ -1076,31 +1076,14 @@ ul.popover-group-menu-member-list {
#popover-menu-copy-email,
.copy-custom-profile-field-link {
display: flex;
padding: 3px 2px 1px;
border-radius: 4px;
color: var(--color-text-item);
text-decoration: none !important;
margin-left: auto;
&.hide_copy_icon {
display: none;
}
&:hover {
color: var(--color-copy-btn-hover) !important;
background-color: var(--color-copy-btn-bg-hover);
}
&:active {
color: var(--color-copy-btn-active) !important;
background-color: var(--color-copy-btn-bg-active);
}
&:focus-visible {
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: 0;
color: var(--color-copy-btn-hover) !important;
background-color: var(--color-copy-btn-bg-hover);
}
}
@ -1296,7 +1279,7 @@ ul.popover-group-menu-member-list {
height: 1.0667em;
}
.zulip-icon {
.popover-menu-icon {
position: relative;
top: -1px;
}

6
web/templates/popovers/user_card/user_card_popover.hbs
View File

@ -133,9 +133,9 @@
{{#if user_email}}
<li role="none" class="popover-menu-list-item text-item user-card-popover-email-field hidden-for-spectators">
<span class="user_popover_email">{{ user_email }}</span>
<a role="menuitem" tabindex="0" id="popover-menu-copy-email" class="popover-menu-link hide_copy_icon" aria-label="{{t 'Copy email'}}" data-tippy-content="{{t 'Copy email' }}" data-clipboard-text="{{ user_email }}">
<i class="popover-menu-icon zulip-icon zulip-icon-copy hide" aria-hidden="true"></i>
</a>
<span role="menuitem" tabindex="0" id="popover-menu-copy-email" class="popover-menu-link copy-btn hide_copy_icon" aria-label="{{t 'Copy email'}}" data-tippy-content="{{t 'Copy email' }}" data-clipboard-text="{{ user_email }}">
<i class="zulip-icon zulip-icon-copy hide" aria-hidden="true"></i>
</span>
</li>
{{/if}}
{{/if}}

6
web/templates/popovers/user_card/user_card_popover_custom_fields.hbs
View File

@ -4,9 +4,9 @@
<a href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="custom-profile-field-value custom-profile-field-link" data-tippy-content="{{this.name}}" tabindex="0">
<span class="custom-profile-field-text">{{this.value}}</span>
</a>
<a role="menuitem" tabindex="0" class="popover-menu-link copy-custom-profile-field-link" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
<i class="popover-menu-icon zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</a>
<span role="menuitem" tabindex="0" class="popover-menu-link copy-btn copy-custom-profile-field-link" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
{{else if this.is_external_account}}
<a href="{{this.link}}" target="_blank" rel="noopener noreferrer" class="custom-profile-field-value custom-profile-field-link" data-tippy-content="{{this.name}}" tabindex="0">
{{#if (eq this.subtype "github") }}