smallbird
/
dreamish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3079 from momijizukamori/inbox-tweaks-canary 

Refactor of inbox code to fix button overwhelm.
This commit is contained in:
momijizukamori 2023-04-17 11:48:34 -04:00 committed by GitHub
parent 1d935915d2 3975c86a84
commit 095cadacdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 190 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
cgi-bin/DW/Controller/Inbox.pm
View File

@ -308,8 +308,9 @@ sub action_handler {
my $inbox = $remote->notification_inbox;
my $display_items = items_by_view( $inbox, $view, $itemid );
my $items_html = render_items( $page, $view, $remote, $display_items, $expand );
my $folder_html = render_folders( $remote, $view );
return DW::RPC->out( success => $items_html );
return DW::RPC->out( success => {items => $items_html, folders => $folder_html} );
}

66
htdocs/js/jquery.inbox.js
View File

@ -4,6 +4,7 @@ $('.check_all').change(function() {
$('.item_checkbox').trigger('change');
// This is because we have two 'check-all' boxes, and we want them to be in sync
$('.check_all').prop("checked", checked.is(':checked'));
check_selected();
});
$('.action_button').click(function(e) {
@ -75,6 +76,7 @@ $("#inbox_messages").on("change", ".item_checkbox", function(e) {
} else {
row.removeClass('selected-msg');
}
check_selected();
e.preventDefault();
e.stopPropagation();
});
@ -95,6 +97,12 @@ function mark_items(e, action, qid) {
var item_qids = qid;
}
// When we redraw the inbox message list, we lose what was
// collapsed - so, note them now so we can reapply.
var collapsed = $( ".item_unread .inbox_collapse" ).map(function() {
return this.id;
}).get();
// Grab param data from the hidden fields
var auth_token = $("[name=lj_form_auth]").val();
var view = $("[name=view]").val();
@ -117,7 +125,17 @@ function mark_items(e, action, qid) {
data: JSON.stringify(postData),
success: function(data) {
if (data.success) {
$("#inbox_message_list").html(data.success);
$("#inbox_message_list").html(data.success.items);
$("#inbox_folders").html(data.success.folders);
collapsed.forEach(function(id) {
var arrow = $("#" + id).siblings('.InboxItem_Controls').find('img.item_expand');
arrow.attr({
'src': '/img/collapse.gif',
'alt': 'Expand',
'title': 'Expand'
});
$("#" + id).addClass('inbox_collapse');
});
} else {
$(e.target).ajaxtip()
.ajaxtip("error", data.error);
@ -141,7 +159,7 @@ if ($('#msg_to').length) {
}
$('.folders').removeClass('no-js');
$("#folder_btn").removeClass('no-js');
$("#folder_btn").click(function() {
$("#folder_btn").click(function(){
var folders = $('#folder_list');
var img = $(this).children();
@ -164,3 +182,47 @@ $("#folder_btn").click(function() {
});
}
});
// Nothing is selected, show 'Mark all read' and 'Delete all' buttons
function none_selected() {
$('.show_read').addClass('show-on-focus');
$('.show_unread').addClass('show-on-focus');
$('.show_all').removeClass('show-on-focus');
}
// Unread msgs selected - show 'Delete Selected' and 'Mark selected read' buttons
// Note: this shows even if read messages are also selected.
function unread_selected() {
$('.show_all').addClass('show-on-focus');
$('.show_read').addClass('show-on-focus');
$('.show_unread').removeClass('show-on-focus');
}
// Only read msgs selected - show 'Delete Selected' and 'Mark selected unread' buttons
function read_selected() {
$('.show_all').addClass('show-on-focus');
$('.show_unread').addClass('show-on-focus');
$('.show_read').removeClass('show-on-focus');
}
function check_selected() {
var read = false;
var unread = false;
$('.selected-msg').each(function () {
if ($(this).hasClass('item_read')) {
read = true;
} else {
unread = true;
}
});
if (unread) {
unread_selected();
} else if (read) {
read_selected();
} else{
none_selected();
}
}
none_selected();

2
htdocs/scss/components/foundation-custom/_pagination.scss
View File

@ -16,7 +16,7 @@ ul.pagination li a {
}
ul.pagination li.current {
a:focus, a:visted {
a:focus, a:visited {
color: $pagination-link-current-font-color;
}
}

201
htdocs/scss/pages/inbox.scss
View File

@ -1,60 +1,5 @@
@import "foundation/base";
@media #{$medium-up} {
#inbox {
display: grid;
grid-template-areas: "folder messages";
grid-template-rows: auto;
grid-template-columns: auto 1fr;
width: 100%;
grid-column-gap: 1em;
column-gap: 1em;
}
#folder_btn {
display: none;
}
#folder_list.even {
background-color: transparent;
}
}
@media #{$large-up} {
#action_row {
display: grid;
grid:
"checkbox actions pages actions-all" auto
/ 2em auto 1fr auto;
}
.inbox_item_row {
display: grid;
grid:
"checkbox message time" auto
/ 2em 1fr 8.5em;
padding: 5px;
}
}
@media #{$medium-only} {
#action_row {
display: grid;
grid:
"pages pages pages" auto
"checkbox actions actions-all" auto
/ 2em auto 1fr;
}
.inbox_item_row {
display: grid;
grid:
"checkbox time" auto
"message message" auto
/ 2em 1fr;
padding: 5px;
}
}
@media #{$small-only} {
#inbox {
display: grid;
@ -65,35 +10,6 @@
width: 100%;
}
#action_row {
display: grid;
grid:
"pages pages pages" auto
"checkbox actions actions-all" auto
/ 2em auto 1fr;
}
.inbox_item_row {
display: grid;
grid:
"checkbox time" auto
"message message" auto
/ 2em 1fr;
padding: 5px;
}
#folder_list {
padding: 0.25rem;
}
#inbox_compose {
margin-top: 0.5em;
input.inline,
select.inline,
.autocomplete-container.inline input {
width: 100%;
}
}
#folder_btn {
display: block;
cursor: pointer;
@ -108,6 +24,122 @@
.folder_expanded .folders {
display: block;
}
#folder_list {
padding: 0.25rem;
}
#inbox_compose {
margin-top: 0.5em;
input.inline,
select.inline,
.autocomplete-container.inline input {
width: 100%;
}
}
}
@media #{$medium-only} {
#inbox {
display: grid;
grid:
"folder" auto
"messages" auto
/ 1fr;
width: 100%;
}
#folder_btn {
display: block;
cursor: pointer;
h3 {
display: inline-block;
}
}
.folder_collapsed .folders {
display: none;
}
.folder_expanded .folders {
display: block;
}
#folder_list {
padding: 0.25rem;
}
#inbox_compose {
margin-top: 0.5em;
input.inline,
select.inline,
.autocomplete-container.inline input {
width: 100%;
}
}
}
@media #{$small-only} {
.pages,
.actions {
text-align: center;
}
#action_row {
display: grid;
grid:
"pages pages pages" auto
"checkbox actions actions" auto
/ 2em auto 1fr;
}
.inbox_item_row {
display: grid;
grid:
"checkbox time" auto
"message message" auto
/ 2em 1fr;
padding: 5px;
}
}
@media #{$medium-up} {
#action_row {
display: grid;
grid:
"checkbox actions pages" auto
/ 2em auto auto;
}
.pages {
text-align: right;
}
.inbox_item_row {
display: grid;
grid:
"checkbox message time" auto
/ 2em 1fr 8.5em;
padding: 5px;
}
}
@media #{$large-up} {
#inbox {
display: grid;
grid-template-areas: "folder messages";
grid-template-rows: auto;
grid-template-columns: auto 1fr;
width: 100%;
grid-column-gap: 1em;
column-gap: 1em;
}
#folder_btn {
display: none;
}
#folder_list.even {
background-color: transparent;
}
}
#folder-btn.no-js {
@ -175,7 +207,6 @@
.pages {
grid-area: pages;
text-align: center;
}
.checkbox {

16
views/inbox/index.tt
View File

@ -17,19 +17,17 @@
<div class="header searchhighlight" id="action_row">
<div class="checkbox">[% form.checkbox(name = 'check_all', class = 'check_all', value = 'check_all') %]</div>
<div class="actions">
[% form.submit(name = 'mark_read', value = dw.ml('widget.inbox.menu.mark_read.btn'), class = 'action_button button small show_read', 'data-action' = 'mark_read') %]
[% form.submit(name = 'mark_unread', value = dw.ml('widget.inbox.menu.mark_unread.btn'), class = 'action_button button small show_unread', 'data-action' = 'mark_unread') %]
[% form.submit(name = 'mark_read', value = dw.ml('widget.inbox.menu.mark_read.btn'), class = 'action_button button small show_unread', 'data-action' = 'mark_read') %]
[% form.submit(name = 'mark_unread', value = dw.ml('widget.inbox.menu.mark_unread.btn'), class = 'action_button button small show_read', 'data-action' = 'mark_unread') %]
[% form.submit(name = 'delete', value = dw.ml('.menu.delete.btn'), class = 'action_button button small show_read show_unread', 'data-action' = 'delete') %]
[% form.submit(name = 'mark_all', value = dw.ml(mark_all), class = 'action_button button small show_all', 'data-action' = 'mark_all') %]
[% form.submit(name = 'delete_all', value = dw.ml(delete_all), class = 'action_button button small show_all', 'data-action' = 'delete_all') %]
</div>
<div class="pages">
[%- INCLUDE components/pagination.tt
current => page
total_pages => last_page -%]
</div>
<div class="actions-all">
[% form.submit(name = 'mark_all', value = dw.ml(mark_all), class = 'action_button button small show_all', 'data-action' = 'mark_all') %]
[% form.submit(name = 'delete_all', value = dw.ml(delete_all), class = 'action_button button small show_all', 'data-action' = 'delete_all') %]
</div>
</div>
<div id="inbox_message_list">
@ -41,16 +39,14 @@
[% form.submit(name = 'mark_read', value = dw.ml('widget.inbox.menu.mark_read.btn'), class = 'action_button button small show_read', 'data-action' = 'mark_read') %]
[% form.submit(name = 'mark_unread', value = dw.ml('widget.inbox.menu.mark_unread.btn'), class = 'action_button button small show_unread', 'data-action' = 'mark_unread') %]
[% form.submit(name = 'delete', value = dw.ml('.menu.delete.btn'), class = 'action_button button small show_read show_unread', 'data-action' = 'delete') %]
[% form.submit(name = 'mark_all', value = dw.ml(mark_all), class = 'action_button button small show_all', 'data-action' = 'mark_all') %]
[% form.submit(name = 'delete_all', value = dw.ml(delete_all), class = 'action_button button small show_all', 'data-action' = 'delete_all') %]
</div>
<div class="pages">
[%- INCLUDE components/pagination.tt
current => page
total_pages => last_page -%]
</div>
<div class="actions-all">
[% form.submit(name = 'mark_all', value = dw.ml(mark_all), class = 'action_button button small show_all', 'data-action' = 'mark_all') %]
[% form.submit(name = 'delete_all', value = dw.ml(delete_all), class = 'action_button button small show_all', 'data-action' = 'delete_all') %]
</div>
</div>
</form>

2
views/inbox/msg_list.tt
View File

@ -5,7 +5,7 @@ LJ_cmtinfo['disableInlineDelete'] = 1;
[%- count = 0 -%]
[%- FOR m IN messages -%]
<div class="inbox_item_row [% count % 2 == 1 ? "odd" : "even" %]">
<div class="inbox_item_row [% count % 2 == 1 ? "odd" : "even" %] item_[% m.read %]">
<div class="checkbox">[% form.checkbox(name = "check_$m.qid", id = "check_$m.qid", class= "item_checkbox", value = m.qid) %]</div>
<div class="item">
<div class="InboxItem_Controls"><a href='[% site.root _ "/inbox/?page=$page&view=$view&$m.bookmark=$m.qid" %]' data-qid ='[% m.qid %]' data-action ='[% m.bookmark %]' class="item_bookmark_action">