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

poll-widget: Change "Edit question" UI to edit-pencil button.

Browse Source 
This changes the "Edit question" UI to be just an edit-pencil button
rather than a large "Edit question" button for a poll.
Fixes part of #11010.
This commit is contained in:
ishanrai05
2018-12-22 09:32:36 +05:30
committed by Tim Abbott
parent 6c18ca9cac
commit 85535ae09c
3 changed files with 101 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
static/js/poll_widget.js
View File

@@ -186,9 +186,10 @@ exports.activate = function (opts) {
var widget_data = poll_data.get_widget_data();
var html = templates.render('poll-widget-results', widget_data);
elem.find('ul.poll-widget').html(html);
elem.find('.poll-question-header').text(widget_data.question);
if (!is_my_poll) {
// We hide the edit pencil button for non-senders
elem.find('.poll-edit-question').hide();
if (widget_data.question !== '') {
// For the non-senders, we hide the question input bar
// when we have a question assigned to the poll
@@ -199,14 +200,78 @@ exports.activate = function (opts) {
elem.find('button.poll-question').attr('disabled', true);
elem.find('input.poll-question').attr('disabled', true);
}
} else {
// Hide the edit pencil icon if the question is still not
// assigned for the senders
if (widget_data.question === '') {
elem.find('.poll-edit-question').hide();
} else {
elem.find('.poll-edit-question').show();
}
}
if (widget_data.question !== '') {
elem.find('button.poll-question').text(i18n.t('Edit question'));
// As soon as a poll-question is assigined
// we change the "Add Question" button to a check button
elem.find('button.poll-question').empty().addClass('fa fa-check poll-question-check');
// The d-none class keeps the cancel editing question button hidden
// as long as "Add Question" button is displayed
elem.find('button.poll-question-remove').removeClass('d-none');
// We hide the whole question bar if question is assigned
elem.find('.poll-question-bar').hide();
elem.find('.poll-comment-bar').show();
} else {
elem.find('.poll-comment-bar').hide();
elem.find('.poll-edit-question').hide();
}
if (is_my_poll) {
// We disable the check button if the input field is empty
// and enable it as soon as something is entered in input field
elem.find('input.poll-question').on('keyup', function () {
if (elem.find('input.poll-question').val().length > 0) {
elem.find('button.poll-question').removeAttr('disabled');
} else {
elem.find('button.poll-question').attr('disabled', true);
}
});
// However doing above leaves the check button disabled
// for the next time when someone is trying to enter a question if
// someone empties the input field and clicks on cancel edit button.
// We fix this by checking if there is text in input field if
// edit question pencil icon is clicked and enable the button if
// there is text in input field.
elem.find('.poll-edit-question').on('click', function () {
if (elem.find('input.poll-question').val().length > 0) {
elem.find('button.poll-question').removeAttr('disabled');
}
});
}
elem.find(".poll-edit-question").on('click', function () {
// As soon as edit question button is clicked
// we hide the Question and the edit question pencil button
// and display the input box for editing the question
elem.find('.poll-question-header').hide();
elem.find('.poll-question-bar').show();
elem.find('.poll-edit-question').hide();
elem.find('input.poll-question').empty().val(widget_data.question).select();
});
elem.find("button.poll-question").on('click', function () {
if (widget_data.question !== '') {
// we display the question and hide the input box for editing
elem.find(".poll-question-bar").hide();
elem.find('.poll-question-header').show();
}
});
elem.find("button.poll-question-remove").on('click', function () {
// On clicking the cross i.e. cancel editing button
// we display the previos question as it is
// and hide the input box and buttons for editing
elem.find('.poll-question-bar').hide();
elem.find('.poll-edit-question').show();
elem.find('.poll-question-header').show();
});
elem.find("button.poll-vote").on('click', function (e) {
e.stopPropagation();
var key = $(e.target).attr('data-key');

32
static/styles/widgets.scss
View File

@@ -105,3 +105,35 @@ button.poll-question:hover {
color: hsl(1, 45%, 50%);
font-size: 12px;
}
.d-none {
display: none;
}
.poll-question-check,
.poll-question-remove {
width: 28px !important;
height: 28px;
border-radius: 3px;
border: 1px solid hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 100%);
}
.poll-question-check:hover,
.poll-question-remove:hover {
border-color: hsl(0, 0%, 60%);
}
.poll-edit-question {
opacity: 0.4;
display: inline-block;
margin-left: 5px;
}
.poll-edit-question:hover {
opacity: 1.0;
}
.poll-question-header {
display: inline-block;
}

3
static/templates/widgets/poll-widget.handlebars
View File

@@ -1,10 +1,11 @@
<div class="poll-widget">
<h4 class="poll-question-header"></h4>
<h4 class="poll-question-header"></h4><i class="fa fa-pencil poll-edit-question"></i>
<ul class="poll-widget">
</ul>
<div class="poll-question-bar">
<input type="text" class="poll-question" placeholder="{{t 'Question'}}" />
<button class="poll-question">{{t "Add question" }}</button>
<button class="poll-question-remove d-none"><i class="fa fa-remove"></i></button>
</div>
<div class="poll-comment-bar">
<input type="text" class="poll-comment" placeholder="{{t 'New choice'}}" />