paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Shorter the separator line between Send and 3-dot buttons.

Browse Source 
Added a div inside #send_later button with class separator-line,
height 70%, width 1px and `background-color: hsl(0deg 0% 100% / 65%)`
to make it look like a line also made #send_later a flex with
`align-items: center` so that separator line is vertically centered.
This commit is contained in:
Hardik Dharmani
2023-05-02 22:34:39 +05:30
committed by Tim Abbott
parent 4d91df559c
commit 2aaf098ebc
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/styles/compose.css
View File

@@ -866,21 +866,22 @@ a.compose_control_button.hide {
/* `^` icon located next to `Send` / `Scheduled` button which shows /* `^` icon located next to `Send` / `Scheduled` button which shows
options to schedule the message. */ options to schedule the message. */
#send_later { #send_later {
display: flex;
align-items: center;
float: right; float: right;
color: hsl(0deg 0% 100%); color: hsl(0deg 0% 100%);
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
border-left: 1px solid hsl(0deg 0% 100% / 65%);
padding: 0; padding: 0;
margin: 0; margin: 0;
.zulip-icon { .zulip-icon {
vertical-align: middle; padding: 5px 9px;
}
&::before { .separator-line {
padding: 5px 9px; background-color: hsl(0deg 0% 100% / 65%);
position: relative; height: 70%;
top: -1px; width: 1px;
}
} }
&:hover, &:hover,

1
web/templates/compose.hbs
View File

@@ -124,6 +124,7 @@
<span>{{t 'Send' }}</span> <span>{{t 'Send' }}</span>
</button> </button>
<button class="animated-purple-button message-control-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}"> <button class="animated-purple-button message-control-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}">
<div class="separator-line"></div>
<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i> <i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>
</button> </button>
<template id="send-enter-tooltip-template"> <template id="send-enter-tooltip-template">