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

widgets: Make the todo and poll widgets look consistent / similar.

Browse Source 
Earlier the todo and poll widgets' UI differed a lot, especially in the
font size and weight, and the color and shape of the checkbox and vote
count box.

Now the font weights and sizes are consistent in both the widgets and
the todo widget's checkboxes and poll widget's vote count boxes are
styled similarly.

This is the rebased and cleaned version of #21006, and is visually near
identical.

Fixes: #20283.
This commit is contained in:
N-Shar-ma
2023-01-08 21:39:14 +05:30
committed by Tim Abbott
parent abb3881bdb
commit e2e39acbc4
3 changed files with 111 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/images/checkbox-white.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="SvgjsSvg1001" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1002"></defs><g id="SvgjsG1008" transform="matrix(1,0,0,1,0,0)"><svg xmlns="http://www.w3.org/2000/svg" width="288" height="288" enable-background="new 0 0 96 96" viewBox="21 0 75 75"><path fill="#ffffff" d="M49.844,68.325c-1.416,0-2.748-0.554-3.75-1.557L27.523,48.191c-1.003-1.002-1.555-2.334-1.555-3.75 s0.552-2.749,1.555-3.75c1.001-1.001,2.333-1.552,3.75-1.552s2.75,0.551,3.753,1.553l14.019,14.017L82.14,5.504 c0.989-1.468,2.639-2.345,4.412-2.345c1.054,0,2.075,0.312,2.956,0.902c2.424,1.631,3.07,4.934,1.439,7.361L54.25,65.98 c-0.892,1.316-2.312,2.162-3.895,2.314C50.17,68.315,50.01,68.325,49.844,68.325z" class="color999 svgShape"></path></svg></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

35
static/styles/dark_theme.css
View File

@@ -328,7 +328,15 @@
.new-style .button {
background-color: hsla(0, 0%, 0%, 0.2);
&:not(.sea-green, .btn-danger, .btn-warning, .btn-link, .poll-vote) {
&:not(
.sea-green,
.btn-danger,
.btn-warning,
.btn-link,
.poll-vote,
button.poll-option,
button.add-task
) {
border-color: hsla(0, 0%, 0%, 0.6);
color: inherit;
}
@@ -1374,6 +1382,31 @@
}
}
/* Widgets: Todo */
.todo-widget {
label.checkbox {
input[type="checkbox"] {
~ span {
border-color: hsl(185, 40%, 45%);
opacity: 0.7;
}
&:hover ~ span {
background-color: hsl(185, 20%, 20%);
border-color: hsl(185, 40%, 35%);
}
&:checked ~ span {
background-color: hsl(185, 40%, 45%);
}
&:focus ~ span {
outline-color: hsla(0, 0%, 100%, 0);
}
}
}
}
/* Originally the icon inherits the color of label, but when the setting
is disabled, the color of the label is changed and thus the icon becomes
too light. So, we set the color explicitly to original color of label to

93
static/styles/widgets.css
View File

@@ -20,14 +20,52 @@
.todo-widget {
/* For the box-shadow to be visible on the left */
input.add-task,
input.add-desc {
margin-left: 2px;
.add-task,
.add-desc {
font-size: 14px;
font-weight: 400;
margin-right: 4px;
}
/* Arrange that a multi-line description line wraps properly. */
label.checkbox {
display: flex;
display: flex; /* Arrange that a multi-line description line wraps properly. */
position: relative;
vertical-align: top;
input[type="checkbox"] {
~ span {
height: 12px;
width: 12px;
border: 2px solid hsl(156, 28%, 70%);
border-radius: 4px;
filter: brightness(1);
cursor: pointer;
}
&:checked ~ span {
background-image: url("../images/checkbox-white.svg");
background-size: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: hsl(156, 41%, 40%);
border: 2px solid hsl(156, 41%, 40%);
}
&:disabled ~ span {
opacity: 0.5;
cursor: not-allowed;
}
&:hover ~ span {
border-color: hsl(156, 30%, 50%);
}
&:focus ~ span {
outline-color: hsla(0, 0%, 100%, 0);
}
}
}
}
@@ -55,25 +93,33 @@
}
.poll-widget {
/* For the box-shadow to be visible on the left */
input.poll-option {
margin-left: 2px;
.poll-option {
font-weight: 400;
font-size: 14px;
}
.poll-option {
/* For the box-shadow to be visible on the left */
input.poll-option {
margin-right: 4px;
}
span.poll-option {
font-weight: 600;
font-size: 16px;
padding-top: 28px;
}
.poll-vote {
color: hsl(156, 41%, 40%);
border-color: hsl(156, 28%, 70%);
border-style: solid;
font-weight: 600;
border-radius: 3px;
margin-right: 4px;
padding-left: 2px; /* padding for Chromium browsers */
padding-right: 2px;
min-width: 28px;
min-width: 25px;
height: 25px;
font-size: 13px;
background-color: hsl(0, 0%, 100%);
&:hover {
@@ -89,6 +135,7 @@
.poll-names {
color: hsl(0, 0%, 45%);
padding-left: 4px;
padding-top: 28px;
font-size: 14px;
}
}
@@ -108,15 +155,27 @@ button {
}
&.add-task,
&.add-desc,
&.poll-option,
&.poll-question {
&.poll-option {
color: hsl(156, 41%, 40%);
border: 1px solid hsl(156, 28%, 70%);
width: 100px;
border-radius: 3px;
border: 1px solid hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 100%);
padding: 4px;
padding-left: 14px;
padding-right: 14px;
transition: all 0.2s ease;
&:hover {
border-color: hsl(0, 0%, 60%);
&:hover,
&:focus {
outline: 0;
border-color: hsl(156, 30%, 50%);
}
&:active {
border-color: hsl(156, 30%, 40%);
color: hsl(156, 44%, 43%);
background-color: hsl(154, 33%, 96%);
}
}
}