Reduce button headers for text-mode browsers

merge-requests/30/head
Bob Mottram 2022-07-13 14:13:44 +01:00
parent 34e0d69ab9
commit 82144b7937
2 changed files with 208 additions and 194 deletions

View File

@ -47,86 +47,23 @@ def header_buttons_timeline(default_timeline: str,
calendar_image: str, calendar_image: str,
follow_approvals: str, follow_approvals: str,
icons_as_buttons: bool, icons_as_buttons: bool,
access_keys: {}) -> str: access_keys: {},
is_text_browser: str) -> str:
"""Returns the header at the top of the timeline, containing """Returns the header at the top of the timeline, containing
buttons for inbox, outbox, search, calendar, etc buttons for inbox, outbox, search, calendar, etc
""" """
# start of the button header with inbox, outbox, etc # start of the button header with inbox, outbox, etc
tl_str = '<div id="containerHeader" class="containerHeader"><nav>\n' tl_str = '<div id="containerHeader" class="containerHeader"><nav>\n'
# first button
if default_timeline == 'tlmedia':
tl_str += \
'<a href="' + users_path + '/tlmedia" tabindex="2" ' + \
'accesskey="' + access_keys['menuMedia'] + '"'
if box_name == 'tlmedia':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
media_button + '"><span>' + translate['Media'] + \
'</span></button></a>'
elif default_timeline == 'tlblogs':
tl_str += \
'<a href="' + users_path + \
'/tlblogs" tabindex="2"'
if box_name == 'tlblogs':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
blogs_button + '" accesskey="' + access_keys['menuBlogs'] + \
'"><span>' + translate['Blogs'] + '</span></button></a>'
elif default_timeline == 'tlfeatures':
tl_str += \
'<a href="' + users_path + \
'/tlfeatures" tabindex="2"'
if box_name == 'tlfeatures':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
features_button + '"><span>' + translate['Features'] + \
'</span></button></a>'
else:
tl_str += \
'<a href="' + users_path + \
'/inbox" tabindex="2"><button class="' + \
inbox_button + '"'
if box_name == 'inbox':
tl_str += ' aria-current="location"'
tl_str += \
' accesskey="' + access_keys['menuInbox'] + '">' + \
'<span>' + translate['Inbox'] + '</span></button></a>'
# if this is a news instance and we are viewing the news timeline # if this is a news instance and we are viewing the news timeline
features_header = False features_header = False
if default_timeline == 'tlfeatures' and box_name == 'tlfeatures': if default_timeline == 'tlfeatures' and box_name == 'tlfeatures':
features_header = True features_header = True
if not features_header: if not is_text_browser:
tl_str += \
'<a href="' + users_path + '/dm" tabindex="2"'
if box_name == 'dm':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + dm_button + \
'" accesskey="' + access_keys['menuDM'] + '">' + \
'<span>' + html_highlight_label(translate['DM'], new_dm) + \
'</span></button></a>'
replies_index_filename = \ # first button
acct_dir(base_dir, nickname, domain) + '/tlreplies.index' if default_timeline == 'tlmedia':
if os.path.isfile(replies_index_filename):
tl_str += \
'<a href="' + users_path + '/tlreplies" tabindex="2"'
if box_name == 'tlreplies':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + replies_button + '" ' + \
'accesskey="' + access_keys['menuReplies'] + '"><span>' + \
html_highlight_label(translate['Replies'], new_reply) + \
'</span></button></a>'
# typically the media button
if default_timeline != 'tlmedia':
if not minimal and not features_header:
tl_str += \ tl_str += \
'<a href="' + users_path + '/tlmedia" tabindex="2" ' + \ '<a href="' + users_path + '/tlmedia" tabindex="2" ' + \
'accesskey="' + access_keys['menuMedia'] + '"' 'accesskey="' + access_keys['menuMedia'] + '"'
@ -136,34 +73,72 @@ def header_buttons_timeline(default_timeline: str,
'><button class="' + \ '><button class="' + \
media_button + '"><span>' + translate['Media'] + \ media_button + '"><span>' + translate['Media'] + \
'</span></button></a>' '</span></button></a>'
else: elif default_timeline == 'tlblogs':
if not minimal:
tl_str += \ tl_str += \
'<a href="' + users_path + \ '<a href="' + users_path + \
'/inbox" tabindex="2"' '/tlblogs" tabindex="2"'
if box_name == 'inbox': if box_name == 'tlblogs':
tl_str += ' aria-current="location"' tl_str += ' aria-current="location"'
tl_str += \ tl_str += \
'><button class="' + \ '><button class="' + \
inbox_button + '"><span>' + translate['Inbox'] + \ blogs_button + '" accesskey="' + access_keys['menuBlogs'] + \
'"><span>' + translate['Blogs'] + '</span></button></a>'
elif default_timeline == 'tlfeatures':
tl_str += \
'<a href="' + users_path + \
'/tlfeatures" tabindex="2"'
if box_name == 'tlfeatures':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
features_button + '"><span>' + translate['Features'] + \
'</span></button></a>'
else:
tl_str += \
'<a href="' + users_path + \
'/inbox" tabindex="2"><button class="' + \
inbox_button + '"'
if box_name == 'inbox':
tl_str += ' aria-current="location"'
tl_str += \
' accesskey="' + access_keys['menuInbox'] + '">' + \
'<span>' + translate['Inbox'] + '</span></button></a>'
if not features_header:
tl_str += \
'<a href="' + users_path + '/dm" tabindex="2"'
if box_name == 'dm':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + dm_button + \
'" accesskey="' + access_keys['menuDM'] + '">' + \
'<span>' + html_highlight_label(translate['DM'], new_dm) + \
'</span></button></a>' '</span></button></a>'
if not features_header: replies_index_filename = \
# typically the blogs button acct_dir(base_dir, nickname, domain) + '/tlreplies.index'
# but may change if this is a blogging oriented instance if os.path.isfile(replies_index_filename):
if default_timeline != 'tlblogs':
if not minimal:
title_str = translate['Blogs']
if default_timeline == 'tlfeatures':
title_str = translate['Article']
tl_str += \ tl_str += \
'<a href="' + users_path + \ '<a href="' + users_path + '/tlreplies" tabindex="2"'
'/tlblogs" tabindex="2"' if box_name == 'tlreplies':
if box_name == 'tlblogs':
tl_str += ' aria-current="location"' tl_str += ' aria-current="location"'
tl_str += \ tl_str += \
'><button class="' + blogs_button + '" accesskey="' + \ '><button class="' + replies_button + '" ' + \
access_keys['menuBlogs'] + '"><span>' + title_str + \ 'accesskey="' + access_keys['menuReplies'] + '"><span>' + \
html_highlight_label(translate['Replies'], new_reply) + \
'</span></button></a>'
# typically the media button
if default_timeline != 'tlmedia':
if not minimal and not features_header:
tl_str += \
'<a href="' + users_path + '/tlmedia" tabindex="2" ' + \
'accesskey="' + access_keys['menuMedia'] + '"'
if box_name == 'tlmedia':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
media_button + '"><span>' + translate['Media'] + \
'</span></button></a>' '</span></button></a>'
else: else:
if not minimal: if not minimal:
@ -177,20 +152,49 @@ def header_buttons_timeline(default_timeline: str,
inbox_button + '"><span>' + translate['Inbox'] + \ inbox_button + '"><span>' + translate['Inbox'] + \
'</span></button></a>' '</span></button></a>'
# typically the news button
# but may change if this is a news oriented instance
if default_timeline == 'tlfeatures':
if not features_header: if not features_header:
tl_str += \ # typically the blogs button
'<a href="' + users_path + \ # but may change if this is a blogging oriented instance
'/inbox" tabindex="2"' if default_timeline != 'tlblogs':
if box_name == 'inbox': if not minimal:
tl_str += ' aria-current="location"' title_str = translate['Blogs']
tl_str += \ if default_timeline == 'tlfeatures':
'><button class="' + \ title_str = translate['Article']
inbox_button + '" accesskey="' + \ tl_str += \
access_keys['menuInbox'] + '"><span>' + translate['Inbox'] + \ '<a href="' + users_path + \
'</span></button></a>' '/tlblogs" tabindex="2"'
if box_name == 'tlblogs':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + blogs_button + '" accesskey="' + \
access_keys['menuBlogs'] + '"><span>' + title_str + \
'</span></button></a>'
else:
if not minimal:
tl_str += \
'<a href="' + users_path + \
'/inbox" tabindex="2"'
if box_name == 'inbox':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
inbox_button + '"><span>' + translate['Inbox'] + \
'</span></button></a>'
# typically the news button
# but may change if this is a news oriented instance
if default_timeline == 'tlfeatures':
if not features_header:
tl_str += \
'<a href="' + users_path + \
'/inbox" tabindex="2"'
if box_name == 'inbox':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
inbox_button + '" accesskey="' + \
access_keys['menuInbox'] + '"><span>' + \
translate['Inbox'] + '</span></button></a>'
# show todays events buttons on the first inbox page # show todays events buttons on the first inbox page
happening_str = '' happening_str = ''
@ -245,45 +249,49 @@ def header_buttons_timeline(default_timeline: str,
'<button class="button">' + \ '<button class="button">' + \
translate['Happening This Week'] + '</button></a>' translate['Happening This Week'] + '</button></a>'
if not features_header: if not is_text_browser:
# button for the outbox if not features_header:
tl_str += \ # button for the outbox
'<a href="' + users_path + '/outbox"'
if box_name == 'outbox':
tl_str += ' aria-current="location"'
tl_str += \
'><button class="' + \
sent_button + '" tabindex="2" accesskey="' + \
access_keys['menuOutbox'] + '">' + \
'<span>' + translate['Sent'] + '</span></button></a>'
# add other buttons
tl_str += \
shares_button_str + wanted_button_str + bookmarks_button_str + \
events_button_str + \
moderation_button_str + happening_str + new_post_button_str
if not features_header:
if not icons_as_buttons:
# the search icon
tl_str += \ tl_str += \
'<a class="imageAnchor" href="' + users_path + \ '<a href="' + users_path + '/outbox"'
'/search" accesskey="' + access_keys['menuSearch'] + \ if box_name == 'outbox':
'" tabindex="3">' + \ tl_str += ' aria-current="location"'
'<img loading="lazy" decoding="async" src="/' + \
'icons/search.png" title="' + \
translate['Search and follow'] + '" alt="| ' + \
translate['Search and follow'] + \
'" class="timelineicon"/></a>'
else:
# the search button
tl_str += \ tl_str += \
'<a href="' + users_path + \ '><button class="' + \
'/search" tabindex="3">' + \ sent_button + '" tabindex="2" accesskey="' + \
'<button class="button" ' + \ access_keys['menuOutbox'] + '">' + \
'accesskey="' + access_keys['menuSearch'] + '>' + \ '<span>' + translate['Sent'] + '</span></button></a>'
'<span>' + translate['Search'] + \
'</span></button></a>' # add other buttons
tl_str += \
shares_button_str + wanted_button_str + \
bookmarks_button_str + events_button_str + \
moderation_button_str + happening_str + new_post_button_str
else:
tl_str += happening_str
if not is_text_browser:
if not features_header:
if not icons_as_buttons:
# the search icon
tl_str += \
'<a class="imageAnchor" href="' + users_path + \
'/search" accesskey="' + access_keys['menuSearch'] + \
'" tabindex="3">' + \
'<img loading="lazy" decoding="async" src="/' + \
'icons/search.png" title="' + \
translate['Search and follow'] + '" alt="| ' + \
translate['Search and follow'] + \
'" class="timelineicon"/></a>'
else:
# the search button
tl_str += \
'<a href="' + users_path + \
'/search" tabindex="3">' + \
'<button class="button" ' + \
'accesskey="' + access_keys['menuSearch'] + '>' + \
'<span>' + translate['Search'] + \
'</span></button></a>'
# benchmark 5 # benchmark 5
time_diff = int((time.time() - timeline_start_time) * 1000) time_diff = int((time.time() - timeline_start_time) * 1000)
@ -291,28 +299,29 @@ def header_buttons_timeline(default_timeline: str,
print('TIMELINE TIMING ' + box_name + ' 5 = ' + str(time_diff)) print('TIMELINE TIMING ' + box_name + ' 5 = ' + str(time_diff))
# the calendar button # the calendar button
if not features_header: if not is_text_browser:
calendar_alt_text = translate['Calendar'] if not features_header:
if new_calendar_event: calendar_alt_text = translate['Calendar']
# indicate that the calendar icon is highlighted if new_calendar_event:
calendar_alt_text = '*' + calendar_alt_text + '*' # indicate that the calendar icon is highlighted
if not icons_as_buttons: calendar_alt_text = '*' + calendar_alt_text + '*'
tl_str += \ if not icons_as_buttons:
' <a class="imageAnchor" href="' + \ tl_str += \
users_path + calendar_path + \ ' <a class="imageAnchor" href="' + \
'" accesskey="' + access_keys['menuCalendar'] + \ users_path + calendar_path + \
'" tabindex="3">' + \ '" accesskey="' + access_keys['menuCalendar'] + \
'<img loading="lazy" decoding="async" src="/icons/' + \ '" tabindex="3">' + \
calendar_image + '" title="' + translate['Calendar'] + \ '<img loading="lazy" decoding="async" src="/icons/' + \
'" alt="| ' + calendar_alt_text + \ calendar_image + '" title="' + translate['Calendar'] + \
'" class="timelineicon"/></a>\n' '" alt="| ' + calendar_alt_text + \
else: '" class="timelineicon"/></a>\n'
tl_str += \ else:
'<a href="' + users_path + calendar_path + \ tl_str += \
'" tabindex="3"><button class="button" accesskey="' + \ '<a href="' + users_path + calendar_path + \
access_keys['menuCalendar'] + '">' + \ '" tabindex="3"><button class="button" accesskey="' + \
'<span>' + translate['Calendar'] + \ access_keys['menuCalendar'] + '">' + \
'</span></button></a>' '<span>' + translate['Calendar'] + \
'</span></button></a>'
if not features_header: if not features_header:
# the show/hide button, for a simpler header appearance # the show/hide button, for a simpler header appearance
@ -340,41 +349,42 @@ def header_buttons_timeline(default_timeline: str,
'><button class="button">' + \ '><button class="button">' + \
'<span>' + translate['User'] + '</span></button></a>' '<span>' + translate['User'] + '</span></button></a>'
# the newswire button to show right column links if not is_text_browser:
if not icons_as_buttons: # the newswire button to show right column links
tl_str += \ if not icons_as_buttons:
'<a class="imageAnchorMobile" href="' + \ tl_str += \
users_path + '/newswiremobile">' + \ '<a class="imageAnchorMobile" href="' + \
'<img loading="lazy" decoding="async" src="/icons' + \ users_path + '/newswiremobile">' + \
'/newswire.png" title="' + translate['News'] + \ '<img loading="lazy" decoding="async" src="/icons' + \
'" alt="| ' + translate['News'] + \ '/newswire.png" title="' + translate['News'] + \
'" class="timelineicon"/></a>' '" alt="| ' + translate['News'] + \
else: '" class="timelineicon"/></a>'
# NOTE: deliberately no \n at end of line else:
tl_str += \ # NOTE: deliberately no \n at end of line
'<a href="' + \ tl_str += \
users_path + '/newswiremobile' + \ '<a href="' + \
'" tabindex="2"><button class="buttonMobile">' + \ users_path + '/newswiremobile' + \
'<span>' + translate['Newswire'] + \ '" tabindex="2"><button class="buttonMobile">' + \
'</span></button></a>' '<span>' + translate['Newswire'] + \
'</span></button></a>'
# the links button to show left column links # the links button to show left column links
if not icons_as_buttons: if not icons_as_buttons:
tl_str += \ tl_str += \
'<a class="imageAnchorMobile" href="' + \ '<a class="imageAnchorMobile" href="' + \
users_path + '/linksmobile">' + \ users_path + '/linksmobile">' + \
'<img loading="lazy" decoding="async" src="/icons' + \ '<img loading="lazy" decoding="async" src="/icons' + \
'/links.png" title="' + translate['Edit Links'] + \ '/links.png" title="' + translate['Edit Links'] + \
'" alt="| ' + translate['Edit Links'] + \ '" alt="| ' + translate['Edit Links'] + \
'" class="timelineicon"/></a>' '" class="timelineicon"/></a>'
else: else:
# NOTE: deliberately no \n at end of line # NOTE: deliberately no \n at end of line
tl_str += \ tl_str += \
'<a href="' + \ '<a href="' + \
users_path + '/linksmobile' + \ users_path + '/linksmobile' + \
'" tabindex="2"><button class="buttonMobile">' + \ '" tabindex="2"><button class="buttonMobile">' + \
'<span>' + translate['Links'] + \ '<span>' + translate['Links'] + \
'</span></button></a>' '</span></button></a>'
if features_header: if features_header:
tl_str += \ tl_str += \

View File

@ -793,6 +793,7 @@ def html_timeline(default_timeline: str,
'</header>\n' '</header>\n'
if full_width_tl_button_header: if full_width_tl_button_header:
is_text_browser = text_mode_browser(ua_str)
tl_str += \ tl_str += \
header_buttons_timeline(default_timeline, box_name, page_number, header_buttons_timeline(default_timeline, box_name, page_number,
translate, users_path, media_button, translate, users_path, media_button,
@ -807,7 +808,8 @@ def html_timeline(default_timeline: str,
domain, timeline_start_time, domain, timeline_start_time,
new_calendar_event, calendar_path, new_calendar_event, calendar_path,
calendar_image, follow_approvals, calendar_image, follow_approvals,
icons_as_buttons, access_keys) icons_as_buttons, access_keys,
is_text_browser)
# start the timeline # start the timeline
tl_str += \ tl_str += \
@ -844,6 +846,7 @@ def html_timeline(default_timeline: str,
tl_str += ' <td valign="top" class="col-center" tabindex="-1">\n' tl_str += ' <td valign="top" class="col-center" tabindex="-1">\n'
if not full_width_tl_button_header: if not full_width_tl_button_header:
is_text_browser = text_mode_browser(ua_str)
tl_str += \ tl_str += \
header_buttons_timeline(default_timeline, box_name, page_number, header_buttons_timeline(default_timeline, box_name, page_number,
translate, users_path, media_button, translate, users_path, media_button,
@ -858,7 +861,8 @@ def html_timeline(default_timeline: str,
domain, timeline_start_time, domain, timeline_start_time,
new_calendar_event, calendar_path, new_calendar_event, calendar_path,
calendar_image, follow_approvals, calendar_image, follow_approvals,
icons_as_buttons, access_keys) icons_as_buttons, access_keys,
is_text_browser)
tl_str += \ tl_str += \
' <div id="timelineposts" class="timeline-posts" ' + \ ' <div id="timelineposts" class="timeline-posts" ' + \