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

copy: Rename copy-btn -> copy-button. 

This commit is a part of the efforts to rename btn-related classes
and variables to align with Zulip's no-abbreviations policy and
streamline the search results.
This commit is contained in:
Sayam Samal 2024-11-13 17:34:53 +05:30 committed by Tim Abbott
parent cf672ad939
commit 467b36dc4a
14 changed files with 64 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/copied_tooltip.ts
View File

@ -26,12 +26,12 @@ function show_copied_tooltip(
}
function show_check_icon(copy_button: HTMLElement): void {
$(copy_button).addClass("copy-btn-success");
$(copy_button).addClass("copy-button-success");
$(copy_button).find(".zulip-icon").removeClass("zulip-icon-copy").addClass("zulip-icon-check");
}
function remove_check_icon(copy_button: HTMLElement): void {
$(copy_button).removeClass("copy-btn-success");
$(copy_button).removeClass("copy-button-success");
$(copy_button).find(".zulip-icon").addClass("zulip-icon-copy").removeClass("zulip-icon-check");
}

2
web/src/portico/help.ts
View File

@ -35,7 +35,7 @@ function register_tabbed_section($tabbed_section: JQuery): void {
// Display the copy-to-clipboard button inside the .codehilite element
// within the API and Help Center docs using clipboard.js
function add_copy_to_clipboard_element($codehilite: JQuery): void {
const $copy_button = $("<span>").addClass("copy-btn copy-codeblock");
const $copy_button = $("<span>").addClass("copy-button copy-codeblock");
$copy_button.html(zulip_copy_icon());
$($codehilite).append($copy_button);

20
web/styles/app_components.css
View File

@ -1344,37 +1344,37 @@ input.settings_text_input {
}
}
.copy-btn {
.copy-button {
display: flex;
border-radius: 4px;
color: var(--color-copy-btn);
color: var(--color-copy-button);
/* 2px at 16px/1em */
padding: 0.125em;
cursor: pointer;
&:hover,
&:focus-visible {
color: var(--color-copy-btn-hover);
color: var(--color-copy-button-hover);
}
&:active {
color: var(--color-copy-btn-active);
color: var(--color-copy-button-active);
}
&.copy-btn-square {
&.copy-button-square {
&:hover,
:focus-visible {
background-color: var(--color-copy-btn-square-bg-hover);
background-color: var(--color-copy-button-square-bg-hover);
}
&:active {
background-color: var(--color-copy-btn-square-bg-active);
color: var(--color-copy-btn-square-active);
background-color: var(--color-copy-button-square-bg-active);
color: var(--color-copy-button-square-active);
}
}
&.copy-btn-success {
color: var(--color-copy-btn-success);
&.copy-button-success {
color: var(--color-copy-button-success);
}
}

36
web/styles/app_variables.css
View File

@ -856,28 +856,32 @@
/* hsl(229deg 9% 36%) corresponds to --grey-600.
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(--grey-600);
--color-copy-button: color-mix(
in oklch,
hsl(229deg 9% 36%) 70%,
transparent
);
--color-copy-button-hover: var(--grey-600);
/* --grey-600, opacity 0.07 */
--color-copy-btn-square-bg-hover: color-mix(
--color-copy-button-square-bg-hover: color-mix(
in oklch,
hsla(229deg 9% 36%) 7%,
transparent
);
/* --grey-600, opacity 0.7 */
--color-copy-btn-active: color-mix(
--color-copy-button-active: color-mix(
in oklch,
hsla(229deg 9% 36%) 70%,
transparent
);
--color-copy-btn-square-active: var(--grey-600);
--color-copy-button-square-active: var(--grey-600);
/* --grey-600, opacity 0.11 */
--color-copy-btn-square-bg-active: color-mix(
--color-copy-button-square-bg-active: color-mix(
in oklch,
hsl(229deg 9% 36%) 11%,
transparent
);
--color-copy-btn-success: var(--green-500);
--color-copy-button-success: var(--green-500);
/* Reaction container colors */
--color-message-reaction-border: hsl(0deg 0% 0% / 10%);
@ -1403,28 +1407,32 @@
/* 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 10% 70%) 70%, transparent);
--color-copy-btn-hover: var(--grey-300);
--color-copy-button: color-mix(
in oklch,
hsl(229deg 10% 70%) 70%,
transparent
);
--color-copy-button-hover: var(--grey-300);
/* --grey-400, opacity 0.14 */
--color-copy-btn-square-bg-hover: color-mix(
--color-copy-button-square-bg-hover: color-mix(
in oklch,
hsl(230deg 9% 60%) 14%,
transparent
);
/* --grey-300, opacity 0.7 */
--color-copy-btn-active: color-mix(
--color-copy-button-active: color-mix(
in oklch,
hsl(229deg 10% 70%) 70%,
transparent
);
--color-copy-btn-square-active: var(--grey-300);
--color-copy-button-square-active: var(--grey-300);
/* --grey-400, opacity 0.18 */
--color-copy-btn-square-bg-active: color-mix(
--color-copy-button-square-bg-active: color-mix(
in oklch,
hsl(229deg 9% 60%) 18%,
transparent
);
--color-copy-btn-success: var(--green-300);
--color-copy-button-success: var(--green-300);
/* Reaction container colors */
--color-message-reaction-border: hsl(0deg 0% 100% / 15%);

24
web/styles/portico/markdown.css
View File

@ -1,13 +1,17 @@
.markdown {
/* Copied from app_variables.css to be used in portico pages. */
--color-copy-btn: color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent);
--color-copy-btn-hover: hsl(229deg 9% 36%);
--color-copy-btn-active: color-mix(
--color-copy-button: color-mix(
in oklch,
hsl(229deg 9% 36%) 70%,
transparent
);
--color-copy-button-hover: hsl(229deg 9% 36%);
--color-copy-button-active: color-mix(
in oklch,
hsla(229deg 9% 36%) 70%,
transparent
);
--color-copy-btn-success: hsl(146deg 90% 27%);
--color-copy-button-success: hsl(146deg 90% 27%);
font-weight: 400;
font-size: 1rem;
@ -424,25 +428,25 @@
}
}
.copy-btn {
.copy-button {
display: flex;
border-radius: 4px;
color: var(--color-copy-btn);
color: var(--color-copy-button);
/* 2px at 16px/1em */
padding: 0.125em;
cursor: pointer;
&:hover,
&:focus-visible {
color: var(--color-copy-btn-hover);
color: var(--color-copy-button-hover);
}
&:active {
color: var(--color-copy-btn-active);
color: var(--color-copy-button-active);
}
&.copy-btn-success {
color: var(--color-copy-btn-success);
&.copy-button-success {
color: var(--color-copy-button-success);
}
}

12
web/styles/rendered_markdown.css
View File

@ -795,30 +795,30 @@
}
/* The properties of the code_external_link button are copied from the
copy-btn class in app_components.css. */
copy-button class in app_components.css. */
.code_external_link {
display: flex;
border-radius: 4px;
color: var(--color-copy-btn);
color: var(--color-copy-button);
/* 2px at 16px/1em */
padding: 0.125em;
cursor: pointer;
&:hover,
:focus-visible {
background-color: var(--color-copy-btn-square-bg-hover);
background-color: var(--color-copy-button-square-bg-hover);
}
&:active {
background-color: var(--color-copy-btn-square-bg-active);
color: var(--color-copy-btn-square-active);
background-color: var(--color-copy-button-square-bg-active);
color: var(--color-copy-button-square-active);
}
}
.copy_codeblock,
.code_external_link {
font-size: 1.1363em;
border: 1px solid var(--color-copy-btn-square-bg-active);
border: 1px solid var(--color-copy-button-square-bg-active);
backdrop-filter: blur(20px);
}
}

2
web/styles/zulip.css
View File

@ -648,7 +648,7 @@ li,
right: 5px;
height: 1em;
backdrop-filter: blur(20px);
outline: 1px solid var(--color-copy-btn-square-bg-active);
outline: 1px solid var(--color-copy-button-square-bg-active);
}
#copy_generated_link_container {

4
web/templates/about_zulip.hbs
View File

@ -9,14 +9,14 @@
<strong>Zulip Server</strong>
<div class="zulip-version-info">
<span>{{t "Version {zulip_version}" }}</span>
<span class="copy-btn tippy-zulip-tooltip zulip-version" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}">
<span class="copy-button tippy-zulip-tooltip zulip-version" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
</div>
{{#if is_fork}}
<div class="zulip-merge-base-info">
<span>{{t "Forked from upstream at {zulip_merge_base}" }}</span>
<span class="copy-btn tippy-zulip-tooltip zulip-merge-base" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_merge_base}}">
<span class="copy-button tippy-zulip-tooltip zulip-merge-base" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_merge_base}}">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
</div>

2
web/templates/code_buttons_container.hbs
View File

@ -1,5 +1,5 @@
<div class="code-buttons-container">
<span class="copy_codeblock copy-btn copy-btn-square" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
<span class="copy_codeblock copy-button copy-button-square" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
{{~#if show_playground_button~}}

2
web/templates/copy_invite_link.hbs
View File

@ -2,7 +2,7 @@
<span>{{t "Link:" }}</span>
<a href="{{ invite_link }}" id="multiuse_invite_link">{{ invite_link }}</a>
<span id="copy_generated_invite_link" class="copy-btn" data-tippy-content="{{t 'Copy link' }}" data-tippy-placement="top" aria-label="{{t 'Copy link' }}" data-clipboard-text="{{ invite_link }}" role="button">
<span id="copy_generated_invite_link" class="copy-button" data-tippy-content="{{t 'Copy link' }}" data-tippy-placement="top" aria-label="{{t 'Copy link' }}" data-clipboard-text="{{ invite_link }}" role="button">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
</div>

2
web/templates/message_edit_form.hbs
View File

@ -5,7 +5,7 @@
<div class="edit_form_banners"></div>
<div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
<div class="message-edit-textbox">
<span class="copy_message copy-btn copy-btn-square tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
<span class="copy_message copy-button copy-button-square tippy-zulip-tooltip" data-tippy-content="{{t 'Copy and close' }}" aria-label="{{t 'Copy and close' }}" role="button">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
<textarea class="message_edit_content" maxlength="{{ max_message_length }}">{{content}}</textarea>

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

@ -133,7 +133,7 @@
{{#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>
<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 }}">
<span role="menuitem" tabindex="0" id="popover-menu-copy-email" class="popover-menu-link copy-button 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>

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

@ -4,7 +4,7 @@
<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>
<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' }}">
<span role="menuitem" tabindex="0" class="popover-menu-link copy-button 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}}

2
web/templates/user_custom_profile_fields.hbs
View File

@ -6,7 +6,7 @@
{{#if this.is_link}}
<div class="custom-user-url-field">
<a tabindex="0" href="{{this.value}}" target="_blank" rel="noopener noreferrer" class="value custom-profile-fields-link {{#if ../for_user_card_popover}}tippy-zulip-tooltip{{/if}}" data-tippy-content="{{this.name}}">{{this.value}}</a>
<span tabindex="0" class="copy-btn copy-custom-field-url tippy-zulip-tooltip" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
<span tabindex="0" class="copy-button copy-custom-field-url tippy-zulip-tooltip" aria-label="{{t 'Copy URL' }}" data-tippy-content="{{t 'Copy URL' }}">
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
</div>