paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Introduce scrolling buttons in gridded layout.

Browse Source
This commit is contained in:
Karl Stolley
2024-12-17 12:37:47 -06:00
committed by Tim Abbott
parent cf29edaa65
commit 0d0aaa8586
9 changed files with 165 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/shared/icons/compose-scroll-left.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(3.5,4.46)">
<path fill="#7f7f7f" d="M 0,3.54 9,0.08 V 7 Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 179 B

5
web/shared/icons/compose-scroll-right.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(-1,0,0,1,12.5,4.46)">
<path fill="#7f7f7f" d="M 0,3.54 9,0.08 V 7 Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

8
web/src/ui_init.js
View File

@@ -266,8 +266,12 @@ export function initialize_kitchen_sink_stuff() {
// Ignore wheel events in the compose area which weren't already handled above.
$("#compose").on("wheel", (e) => {
// Except for the compose banners, which still need scroll events.
if ($(e.target).closest("#compose_banners").length > 0) {
// Except for the compose banners or formatting buttons,
// which still need scroll events.
if (
$(e.target).closest("#compose_banners, #message-formatting-controls-container").length >
0
) {
return;
}
e.stopPropagation();

61
web/styles/app_variables.css
View File

@@ -825,6 +825,37 @@
--color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
--color-compose-formatting-button-divider: hsl(0deg 0% 75%);
--color-compose-focus-ring: var(--color-outline-focus);
--color-compose-scroll-icon: hsl(0deg 0% 50%);
--color-compose-background-scroll-backward: linear-gradient(
90deg,
hsl(234deg 100% 95%) 50%,
hsl(0deg 0% 100% / 0%) 100%
);
--color-compose-background-scroll-backward-hover: linear-gradient(
90deg,
hsl(234deg 100% 93%) 50%,
hsl(0deg 0% 100% / 0%) 100%
);
--color-compose-background-scroll-backward-active: linear-gradient(
90deg,
hsl(234deg 100% 90%) 45%,
hsl(0deg 0% 100% / 0%) 100%
);
--color-compose-background-scroll-forward: linear-gradient(
90deg,
hsl(0deg 0% 100% / 0%) 0%,
hsl(234deg 100% 95%) 50%
);
--color-compose-background-scroll-forward-hover: linear-gradient(
90deg,
hsl(0deg 0% 100% / 0%) 0%,
hsl(234deg 100% 93%) 50%
);
--color-compose-background-scroll-forward-active: linear-gradient(
90deg,
hsl(0deg 0% 100% / 0%) 0%,
hsl(234deg 100% 90%) 55%
);
/* Text colors */
--color-text-default: hsl(0deg 0% 20%);
@@ -1785,6 +1816,36 @@
--color-compose-control-button-background-hover: hsl(0deg 0% 100% / 5%);
--color-compose-formatting-button-divider: hsl(236deg 33% 90% / 25%);
--color-compose-focus-ring: hsl(0deg 0% 67%);
--color-compose-background-scroll-backward: linear-gradient(
90deg,
hsl(234deg 21% 24%) 35%,
hsl(225deg 9% 5% / 0%) 100%
);
--color-compose-background-scroll-backward-hover: linear-gradient(
90deg,
hsl(234deg 30% 28%) 35%,
hsl(225deg 9% 5% / 0%) 100%
);
--color-compose-background-scroll-backward-active: linear-gradient(
90deg,
hsl(234deg 35% 30%) 45%,
hsl(225deg 9% 5% / 0%) 100%
);
--color-compose-background-scroll-forward: linear-gradient(
90deg,
hsl(225deg 9% 5% / 0%) 0%,
hsl(234deg 21% 24%) 65%
);
--color-compose-background-scroll-forward-hover: linear-gradient(
90deg,
hsl(225deg 9% 5% / 0%) 0%,
hsl(234deg 30% 28%) 65%
);
--color-compose-background-scroll-forward-active: linear-gradient(
90deg,
hsl(225deg 9% 5% / 0%) 0%,
hsl(234deg 35% 30%) 55%
);
/* Text colors */
--color-text-default: hsl(0deg 0% 87%);

73
web/styles/compose.css
View File

@@ -488,6 +488,79 @@
margin: 0 1px;
}
.compose-scrolling-buttons-container {
display: grid;
/* The scroller buttons are set to a 48px width that does not scale;
the idea being that that's a generous target area, and that it
would be better not to consume more space at larger font sizes
under narrower screen sizes. */
grid-template-columns:
[scroller-backward-start buttons-start] 48px [scroller-backward-end] minmax(
0,
1fr
)
[scroller-forward-start] 48px [scroller-forward-end buttons-end];
grid-template-rows: auto;
}
.compose-scrollable-buttons {
grid-area: buttons;
overflow-x: scroll;
scrollbar-width: none;
}
.formatting-control-scroller-button {
z-index: 5;
display: flex;
align-items: center;
border-radius: 0;
border: 0;
color: var(--color-compose-scroll-icon);
background: transparent;
}
.formatting-scroller-backward {
grid-area: scroller-backward;
justify-content: flex-start;
border-radius: 0 0 0 3px;
background: var(--color-compose-background-scroll-backward);
&:hover {
background: var(--color-compose-background-scroll-backward-hover);
}
&:active {
background: var(--color-compose-background-scroll-backward-active);
.zulip-icon {
/* Subtly shift arrow in scroll direction. */
margin-left: -2px;
}
}
}
.formatting-scroller-forward {
grid-area: scroller-forward;
justify-content: flex-end;
border-radius: 0 0 3px;
background: var(--color-compose-background-scroll-forward);
&:hover {
background: var(--color-compose-background-scroll-forward-hover);
}
&:active {
background: var(--color-compose-background-scroll-forward-active);
.zulip-icon {
/* Subtly shift arrow in scroll direction. */
margin-right: -2px;
}
}
}
.message-limit-indicator:not(:empty) {
font-size: 12px;
color: var(--color-limit-indicator);

2
web/styles/message_row.css
View File

@@ -742,8 +742,6 @@ of the base style defined for a read-only textarea in dark mode. */
}
.message-edit-feature-group {
display: flex;
align-items: baseline;
border-radius: 0 0 3px 3px;
background-color: var(--color-message-formatting-controls-container);
/* margin on either side to let the border of

8
web/templates/compose.hbs
View File

@@ -101,8 +101,14 @@
</div>
</div>
<div id="message-formatting-controls-container">
<div id="message-formatting-controls-container" class="compose-scrolling-buttons-container">
{{> compose_control_buttons . }}
<button type="button" class="formatting-control-scroller-button formatting-scroller-forward">
<i class="zulip-icon zulip-icon-compose-scroll-right"></i>
</button>
<button type="button" class="formatting-control-scroller-button formatting-scroller-backward">
<i class="zulip-icon zulip-icon-compose-scroll-left"></i>
</button>
</div>
</div>
</div>

2
web/templates/compose_control_buttons.hbs
View File

@@ -1,4 +1,4 @@
<div class="compose-control-buttons-container order-1">
<div class="compose-scrollable-buttons compose-control-buttons-container order-1" tabindex="-1">
<input type="file" class="file_input notvisible" multiple />
<div class="compose_control_button_container" data-tooltip-template-id="preview-tooltip" data-tippy-maxWidth="none">
<a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview' }}" tabindex=0></a>

8
web/templates/message_edit_form.hbs
View File

@@ -18,8 +18,14 @@
<div class="action-buttons">
<div class="controls edit-controls">
{{#if is_editable}}
<div class="message-edit-feature-group">
<div class="message-edit-feature-group compose-scrolling-buttons-container">
{{> compose_control_buttons . }}
<button type="button" class="formatting-control-scroller-button formatting-scroller-forward">
<i class="zulip-icon zulip-icon-compose-scroll-right"></i>
</button>
<button type="button" class="formatting-control-scroller-button formatting-scroller-backward">
<i class="zulip-icon zulip-icon-compose-scroll-left"></i>
</button>
</div>
{{/if}}
<div class="message-edit-buttons-and-timer">