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

inbox: Redesign to show channel folders.

Browse Source
This commit is contained in:
Aman Agrawal
2025-07-16 12:13:17 +05:30
committed by Tim Abbott
parent ded8f93ca0
commit 47f42ed149
13 changed files with 547 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/templates/inbox_view/inbox_folder_row.hbs
View File

@@ -1,21 +1,22 @@
<div id="inbox-dm-header" tabindex="0" class="inbox-header {{#unless has_dms_post_filter}}hidden_by_filters{{/unless}}">
<div id="{{ header_id }}" tabindex="0" class="inbox-header inbox-folder {{#unless is_header_visible}}hidden_by_filters{{/unless}} {{#if is_collapsed}}inbox-collapsed-state{{/if}}">
<div class="inbox-focus-border">
<div class="inbox-left-part-wrapper">
<div class="inbox-left-part">
<div tabindex="0" class="inbox-header-name">
<div class="inbox-header-name-focus-border">
<i class="zulip-icon zulip-icon-user"></i>
<a tabindex="-1" role="button" href="/#narrow/is/private">{{t 'Direct messages'}}</a>
</div>
<div class="inbox-header-name">
<span class="inbox-header-name-text">
{{#if is_dm_header}}
{{t 'DIRECT MESSAGES'}}
{{else}}
{{name}}
{{/if}}
</span>
</div>
<div class="collapsible-button toggle-inbox-header-icon {{#if is_collapsed}}icon-collapsed-state{{/if}}"><i class="zulip-icon zulip-icon-arrow-down"></i></div>
<div class="collapsible-button"><i class="zulip-icon zulip-icon-chevron-down"></i></div>
<span class="unread_mention_info tippy-zulip-tooltip
{{#unless has_unread_mention}}hidden{{/unless}}"
data-tippy-content="{{t 'You have unread mentions' }}">@</span>
<div class="unread-count-focus-outline" tabindex="0">
<span class="unread_count tippy-zulip-tooltip on_hover_all_dms_read"
data-tippy-content="{{t 'Mark as read' }}"
aria-label="{{t 'Mark as read' }}">{{unread_dms_count}}</span>
<div class="unread-count-focus-outline">
<span class="unread_count quiet-count">{{unread_count}}</span>
</div>
</div>
</div>

25
web/templates/inbox_view/inbox_folder_with_channels.hbs Normal file
View File

@@ -0,0 +1,25 @@
{{> inbox_folder_row
name=name
header_id=header_id
is_header_visible=is_header_visible
is_dm_header=false
is_collapsed=is_collapsed
has_unread_mention=has_unread_mention
unread_count=unread_count
}}
<div class="inbox-streams-container inbox-folder-components">
{{#each topics_dict as |key_value_list _index|}}
{{#each ../streams_dict as |stream_key_value _stream_index|}}
{{#if (and (eq stream_key_value.[1].folder_id ../../id) (eq stream_key_value.[0] key_value_list.[0]))}}
<div id="{{key_value_list.[0]}}">
{{> inbox_row stream_key_value.[1]}}
<div class="inbox-topic-container">
{{#each key_value_list.[1]}}
{{> inbox_row this.[1]}}
{{/each}}
</div>
</div>
{{/if}}
{{/each}}
{{/each}}
</div>

28
web/templates/inbox_view/inbox_list.hbs
View File

@@ -1,10 +1,26 @@
{{> inbox_folder_row .}}
<div id="inbox-direct-messages-container">
{{> inbox_folder_row
header_id="inbox-dm-header"
is_header_visible=has_dms_post_filter
is_dm_header=true
is_collapsed=is_dms_collapsed
has_unread_mention=has_unread_mention
unread_count=unread_dms_count
}}
<div id="inbox-direct-messages-container" class="inbox-folder-components">
{{#each dms_dict}}
{{> inbox_row this.[1]}}
{{/each}}
</div>
<div id="inbox-streams-container">
{{> inbox_stream_container . }}
</div>
{{#each channel_folders_dict as |channel_folder_key_value_list _index|}}
{{> inbox_folder_with_channels
id=channel_folder_key_value_list.[1].id
name=channel_folder_key_value_list.[1].name
header_id=channel_folder_key_value_list.[1].header_id
is_header_visible=channel_folder_key_value_list.[1].is_header_visible
is_collapsed=channel_folder_key_value_list.[1].is_collapsed
has_unread_mention=channel_folder_key_value_list.[1].has_unread_mention
unread_count=channel_folder_key_value_list.[1].unread_count
topics_dict=../topics_dict
streams_dict=../streams_dict
}}
{{/each}}

7
web/templates/inbox_view/inbox_row.hbs
View File

@@ -1,11 +1,10 @@
{{#if is_stream}}
{{> inbox_stream_header_row .}}
{{else}}
<div id="inbox-row-conversation-{{conversation_key}}" class="inbox-row {{#if is_hidden}}hidden_by_filters{{/if}} {{#if is_collapsed}}collapsed_container{{/if}}" tabindex="0" data-col-index="{{ column_indexes.RECIPIENT }}">
<div id="inbox-row-conversation-{{conversation_key}}" class="inbox-row {{#if is_hidden}}hidden_by_filters{{/if}}" tabindex="0" data-col-index="{{ column_indexes.RECIPIENT }}">
<div class="inbox-focus-border">
<div class="inbox-left-part-wrapper">
<div class="inbox-left-part">
<div class="hide fake-collapse-button" tabindex="0" data-col-index="{{ column_indexes.COLLAPSE_BUTTON }}"></div>
{{#if is_direct}}
<a class="recipients_info {{#unless user_circle_class}}inbox-group-or-bot-dm{{/unless}}" href="{{dm_url}}" tabindex="-1">
<span class="user_block">
@@ -19,6 +18,7 @@
<span class="recipients_name">{{{rendered_dm_with}}}</span>
</span>
</a>
<div class="hide fake-collapse-button" tabindex="0" data-col-index="{{ column_indexes.COLLAPSE_BUTTON }}"></div>
<span class="unread_mention_info tippy-zulip-tooltip
{{#unless has_unread_mention}}hidden{{/unless}}"
data-tippy-content="{{t 'You have unread mentions' }}">@</span>
@@ -28,11 +28,10 @@
aria-label="{{t 'Mark as read' }}">{{unread_count}}</span>
</div>
{{else if is_topic}}
{{!-- Invisible user circle element for alignment of topic text with DM user name --}}
<span class="user-circle-active user-circle invisible"></span>
<div class="inbox-topic-name">
<a tabindex="-1" href="{{topic_url}}" {{#if is_empty_string_topic}}class="empty-topic-display"{{/if}}>{{topic_display_name}}</a>
</div>
<div class="hide fake-collapse-button" tabindex="0" data-col-index="{{ column_indexes.COLLAPSE_BUTTON }}"></div>
<span class="unread_mention_info tippy-zulip-tooltip
{{#unless mention_in_unread}}hidden{{/unless}}"
data-tippy-content="{{t 'You have unread mentions'}}">@</span>

28
web/templates/inbox_view/inbox_stream_header_row.hbs
View File

@@ -1,25 +1,23 @@
<div id="inbox-stream-header-{{stream_id}}" class="inbox-header {{#if is_hidden}}hidden_by_filters{{/if}}" tabindex="0" data-stream-id="{{stream_id}}" style="background: {{stream_header_color}};">
<div id="inbox-stream-header-{{stream_id}}" class="inbox-header {{#if is_hidden}}hidden_by_filters{{/if}} {{#if is_collapsed}}inbox-collapsed-state{{/if}}" data-col-index="{{ column_indexes.COLLAPSE_BUTTON }}" tabindex="0" data-stream-id="{{stream_id}}" style="background: {{stream_header_color}};">
<div class="inbox-focus-border">
<div class="inbox-left-part-wrapper">
<div class="inbox-left-part">
<div tabindex="0" class="inbox-header-name">
<div class="inbox-header-name-focus-border">
<span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
{{> ../stream_privacy . }}
<div class="inbox-header-name">
<span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
{{> ../stream_privacy . }}
</span>
<span class="inbox-header-name-text">{{stream_name}}</span>
{{#if is_archived}}
<span class="inbox-header-stream-archived">
<i class="archived-indicator">({{t 'archived' }})</i>
</span>
<a tabindex="-1" href="{{stream_url}}">{{stream_name}}</a>
{{#if is_archived}}
<span class="inbox-header-stream-archived">
<i class="archived-indicator">({{t 'archived' }})</i>
</span>
{{/if}}
</div>
{{/if}}
</div>
<div class="collapsible-button toggle-inbox-header-icon {{#if is_collapsed}}icon-collapsed-state{{/if}}"><i class="zulip-icon zulip-icon-arrow-down"></i></div>
<div class="collapsible-button toggle-inbox-header-icon {{#if is_collapsed}}icon-collapsed-state{{/if}}"><i class="zulip-icon zulip-icon-chevron-down"></i></div>
<span class="unread_mention_info tippy-zulip-tooltip
{{#unless mention_in_unread}}hidden{{/unless}}"
data-tippy-content="{{t 'You have unread mentions'}}">@</span>
<div class="unread-count-focus-outline" tabindex="0">
<div class="unread-count-focus-outline" tabindex="0" data-col-index="{{ column_indexes.UNREAD_COUNT }}">
<span class="unread_count tippy-zulip-tooltip on_hover_topic_read"
data-stream-id="{{stream_id}}" data-tippy-content="{{t 'Mark as read' }}"
aria-label="{{t 'Mark as read' }}">{{unread_count}}</span>
@@ -29,7 +27,7 @@
</div>
<div class="inbox-right-part-wrapper">
<div class="inbox-right-part">
<div class="inbox-action-button inbox-stream-menu" data-stream-id="{{stream_id}}" tabindex="0">
<div class="inbox-action-button inbox-stream-menu" data-stream-id="{{stream_id}}" tabindex="0" data-col-index="{{ column_indexes.ACTION_MENU }}">
<i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
</div>
</div>