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

widgets: Improve structure and layout of headers.

This commit is contained in:
Karl Stolley 2024-06-05 12:36:57 -05:00 committed by Tim Abbott
parent 81d9eb4a54
commit 53c1c4d98f
3 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/styles/widgets.css
View File

@ -24,8 +24,12 @@
.todo-widget {
.todo-task-list-title-bar {
flex: 1 1 auto;
display: flex;
/* Ensure controls remain visible on narrower screens. */
flex-flow: row wrap;
gap: 5px;
margin-bottom: var(--markdown-interelement-space-px);
}
.add-task-bar {
@ -233,13 +237,9 @@ input {
&.poll-option,
&.poll-question,
&.todo-task-list-title {
flex: 1 1 auto;
flex: 1 0 auto;
padding: 4px 6px;
}
&.todo-task-list-title {
flex: 0 0 auto;
}
}
.widget-error {
@ -251,8 +251,11 @@ input {
.poll-question-remove,
.todo-task-list-title-check,
.todo-task-list-title-remove {
width: 28px !important;
height: 28px;
align-self: stretch;
/* TODO: Re-express the 30.5px value here
as part of information density work. */
flex: 0 0 30.5px;
min-height: 30.5px;
border-radius: 3px;
border: 1px solid hsl(0deg 0% 80%);
background-color: hsl(0deg 0% 100%);
@ -265,17 +268,26 @@ input {
.poll-edit-question,
.todo-edit-task-list-title {
opacity: 0.4;
display: inline-block;
margin-left: 5px;
&:hover {
opacity: 1;
}
}
.poll-question-header,
.todo-task-list-title-header {
display: inline;
.poll-question-bar {
flex: 1 1 auto;
display: flex;
/* Ensure controls remain visible on narrower screens. */
flex-flow: row wrap;
gap: 5px;
margin-bottom: var(--markdown-interelement-space-px);
}
.poll-widget-header-area,
.todo-widget-header-area {
display: flex;
align-items: baseline;
gap: 5px;
}
.current-user-vote {

16
web/templates/widgets/poll_widget.hbs
View File

@ -1,14 +1,16 @@
<div class="poll-widget">
<h4 class="poll-question-header"></h4>
<div class="poll-widget-header-area">
<h4 class="poll-question-header"></h4>
<i class="fa fa-pencil poll-edit-question"></i>
<div class="poll-question-bar">
<input type="text" class="poll-question" placeholder="{{t 'Add question'}}" />
<button class="poll-question-remove"><i class="fa fa-remove"></i></button>
<button class="poll-question-check"><i class="fa fa-check"></i></button>
</div>
</div>
<div class="poll-please-wait">
{{t 'We are about to have a poll. Please wait for the question.'}}
</div>
<i class="fa fa-pencil poll-edit-question"></i>
<div class="poll-question-bar">
<input type="text" class="poll-question" placeholder="{{t 'Add question'}}" />
<button class="poll-question-remove"><i class="fa fa-remove"></i></button>
<button class="poll-question-check"><i class="fa fa-check"></i></button>
</div>
<div class="poll-author-help">
{{t 'Tip: You can also send "/poll Some question"'}}
</div>

14
web/templates/widgets/todo_widget.hbs
View File

@ -1,10 +1,12 @@
<div class="todo-widget">
<h4 class="todo-task-list-title-header">{{t "Task list" }}</h4>
<i class="fa fa-pencil todo-edit-task-list-title"></i>
<div class="todo-task-list-title-bar">
<input type="text" class="todo-task-list-title" placeholder="{{t 'Add todo task list title'}}" />
<button class="todo-task-list-title-remove"><i class="fa fa-remove"></i></button>
<button class="todo-task-list-title-check"><i class="fa fa-check"></i></button>
<div class="todo-widget-header-area">
<h4 class="todo-task-list-title-header">{{t "Task list" }}</h4>
<i class="fa fa-pencil todo-edit-task-list-title"></i>
<div class="todo-task-list-title-bar">
<input type="text" class="todo-task-list-title" placeholder="{{t 'Add todo task list title'}}" />
<button class="todo-task-list-title-remove"><i class="fa fa-remove"></i></button>
<button class="todo-task-list-title-check"><i class="fa fa-check"></i></button>
</div>
</div>
<ul class="todo-widget new-style">
</ul>