| #!/usr/bin/env ruby |
| PAGETITLE = "DEMO: proposed UI for mailing list view for reply features" |
| $LOAD_PATH.unshift '/srv/whimsy/lib' |
| require 'whimsy/asf' |
| require 'wunderbar' |
| require 'wunderbar/bootstrap' |
| require 'wunderbar/jquery' |
| |
| _html do |
| _body? do |
| _whimsy_body( |
| title: PAGETITLE, |
| related: { |
| "https://www.apache.org/foundation/marks/resources" => "Trademark Site Map", |
| ASF::SVN.svnpath!('foundation', 'Brand', 'runbook.txt') => "Members-only Trademark runbook", |
| "https://lists.apache.org/list.html?trademarks@apache.org" => "Ponymail interface to trademarks@" |
| }, |
| helpblock: -> { |
| _p do |
| _ 'This is a wireframe ' |
| _strong 'DEMO' |
| _ ' of a proposed tool to allow ASF Members to review incoming questions on a private mailing list, and then select a ' |
| _em 'boilerplate reply' |
| _ ' to send to an original questioner. See ' |
| _a 'Proposed how to reply guide', href: ASF::SVN.svnpath!('foundation', 'Brand', 'replies-readme.md') |
| end |
| _p do |
| _ 'This list would display the last 30 (or so) days of messages on a private list, and have UI that shows info about the messages, plus action buttons to create a reply, see: ' |
| _a 'DEMO reply form to edit/send', href: '/brand/replyui.cgi' |
| end |
| } |
| ) do |
| _h3 'DEMO: wireframe of maillist display', id: 'listheader' |
| |
| _table.table.table_hover.table_striped do |
| _thead_ do |
| _tr do |
| _th 'Expand', data_sort: 'string' |
| _th 'Who', data_sort: 'string' |
| _th 'Subject', data_sort: 'string' |
| _th 'Date', data_sort: 'string' |
| _th 'Reply', data_sort: 'string' |
| _th 'Flags', data_sort: 'string' |
| end |
| end |
| _tbody do |
| _tr_ do |
| _td do |
| _span.glyphicon.glyphicon_expand :aria_hidden |
| end |
| _td 'Jane Doe' |
| _td 'Help! I want to abuse Apache Foo brand!' |
| _td '2017-12-12' |
| _td do |
| _a 'Reply', href: '#', onclick: "alert('This would popup UI to choose a boilerplate reply.');" |
| _ ' | ' |
| _a 'Mark', href: '#', onclick: "alert('This might allow marking for attention, as spam, or other workflow.');" |
| _ ' | ' |
| _a 'Read', href: '#', onclick: "alert('This or the expand button in leftmost column would open the mail for reading.');" |
| end |
| _td do |
| _a '(flag1)', href: '#', onclick: "alert('This could display flags or marks, or other workflow about this email.');" |
| end |
| end |
| _tr_ do |
| _td do |
| _span.glyphicon.glyphicon_collapse_down :aria_hidden |
| end |
| _td 'Jack Doe' |
| _td 'Question about event usage' |
| _td '2017-12-13' |
| _td do |
| _span.em 'Collapse' |
| end |
| _td do |
| _a '(flag2)', href: '#', onclick: "alert('This could display marks or flags, or other workflow about this email.');" |
| end |
| end |
| _tr_ do |
| _td colspan: 4 do |
| _p 'This would be the body of the /Question about event usage/ email above, perhaps?' |
| _p do |
| _ 'I.e. the list view should let a Member quickly:' |
| _ul do |
| _li 'Read thru recent incoming emails that might need replies' |
| _li 'See which incoming emails already have replies/are answered/are otherwise marked' |
| _li 'Quickly open one of the emails to read it, to see if they want to try replying' |
| _li 'Click a button to select a boilerplate reply and then edit it.' |
| end |
| end |
| end |
| _td.strong 'Reply | Mark' |
| end |
| _tr_ do |
| _td do |
| _span.glyphicon.glyphicon_expand :aria_hidden |
| end |
| _td 'Ruby Sammy' |
| _td '[MERCH] Luxury gems using Apache feather' |
| _td '2017-12-24' |
| _td do |
| _a 'Reply', href: '/brand/replyui.cgi' |
| _ ' | ' |
| _a 'Mark', href: '#', onclick: "alert('This might allow marking for attention, as spam, or other workflow.');" |
| _ ' | ' |
| _a 'Read', href: '#', onclick: "alert('This or the expand button in leftmost column would open the mail for reading.');" |
| end |
| _td ' ' |
| end |
| end |
| end |
| end |
| |
| _script %{ |
| var table = $(".table").stupidtable(); |
| table.on("aftertablesort", function (event, data) { |
| var th = $(this).find("th"); |
| th.find(".arrow").remove(); |
| var dir = $.fn.stupidtable.dir; |
| var arrow = data.direction === dir.ASC ? "↑" : "↓"; |
| th.eq(data.column).append('<span class="arrow">' + arrow +'</span>'); |
| }); |
| } |
| end |
| end |