mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-04 05:53:43 +00:00 
			
		
		
		
	settings: Use only Filter as the placeholder text.
				
					
				
			There are cases where the placeholder text overflows outside of the input box. In the settings panels, all these filter boxes are on the same row as a subheading on the left side. So the x in `Filter x` is usually the subheading title, making it redundant to mention the x part. We have not modified the aria-labels since it might still be helpful for assistive technologies to have the whole `Filter x` part. https://chat.zulip.org/#narrow/channel/101-design/topic/setting.20filter.20width
This commit is contained in:
		
				
					committed by
					
						
						Tim Abbott
					
				
			
			
				
	
			
			
			
						parent
						
							9a72a4df03
						
					
				
				
					commit
					2972d97a92
				
			@@ -5,7 +5,7 @@
 | 
				
			|||||||
        <div class="alert-notification" id="user-field-status"></div>
 | 
					        <div class="alert-notification" id="user-field-status"></div>
 | 
				
			||||||
        <div class="user_filters">
 | 
					        <div class="user_filters">
 | 
				
			||||||
            {{> ../dropdown_widget widget_name=active_user_list_dropdown_widget_name}}
 | 
					            {{> ../dropdown_widget widget_name=active_user_list_dropdown_widget_name}}
 | 
				
			||||||
            {{> filter_text_input placeholder=(t 'Filter users') aria_label=(t 'Filter users')}}
 | 
					            {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter users')}}
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,7 +2,7 @@
 | 
				
			|||||||
    <div id="attachment-stats-holder"></div>
 | 
					    <div id="attachment-stats-holder"></div>
 | 
				
			||||||
    <div class="settings_panel_list_header">
 | 
					    <div class="settings_panel_list_header">
 | 
				
			||||||
        <h3>{{t "Your uploads"}}</h3>
 | 
					        <h3>{{t "Your uploads"}}</h3>
 | 
				
			||||||
        {{> filter_text_input id="upload_file_search" placeholder=(t 'Filter uploaded files') aria_label=(t 'Filter uploads')}}
 | 
					        {{> filter_text_input id="upload_file_search" placeholder=(t 'Filter') aria_label=(t 'Filter uploads')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="clear-float"></div>
 | 
					    <div class="clear-float"></div>
 | 
				
			||||||
    <div class="alert" id="delete-upload-status"></div>
 | 
					    <div class="alert" id="delete-upload-status"></div>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -21,7 +21,7 @@
 | 
				
			|||||||
    <div class="settings_panel_list_header">
 | 
					    <div class="settings_panel_list_header">
 | 
				
			||||||
        <h3>{{t "Bots"}}</h3>
 | 
					        <h3>{{t "Bots"}}</h3>
 | 
				
			||||||
        <div class="alert-notification" id="bot-field-status"></div>
 | 
					        <div class="alert-notification" id="bot-field-status"></div>
 | 
				
			||||||
        {{> filter_text_input placeholder=(t 'Filter bots') aria_label=(t 'Filter bots')}}
 | 
					        {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter bots')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -55,7 +55,7 @@
 | 
				
			|||||||
            <h3>{{t "Export permissions"}}</h3>
 | 
					            <h3>{{t "Export permissions"}}</h3>
 | 
				
			||||||
            <div class="user_filters">
 | 
					            <div class="user_filters">
 | 
				
			||||||
                {{> ../dropdown_widget widget_name="filter_by_consent"}}
 | 
					                {{> ../dropdown_widget widget_name="filter_by_consent"}}
 | 
				
			||||||
                {{> filter_text_input placeholder=(t 'Filter users') aria_label=(t 'Filter users')}}
 | 
					                {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter users')}}
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -8,7 +8,7 @@
 | 
				
			|||||||
        <div class="alert-notification" id="deactivated-user-field-status"></div>
 | 
					        <div class="alert-notification" id="deactivated-user-field-status"></div>
 | 
				
			||||||
        <div class="user_filters">
 | 
					        <div class="user_filters">
 | 
				
			||||||
            {{> ../dropdown_widget widget_name=deactivated_user_list_dropdown_widget_name}}
 | 
					            {{> ../dropdown_widget widget_name=deactivated_user_list_dropdown_widget_name}}
 | 
				
			||||||
            {{> filter_text_input placeholder=(t 'Filter deactivated users') aria_label=(t 'Filter deactivated users')}}
 | 
					            {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter deactivated users')}}
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -7,7 +7,7 @@
 | 
				
			|||||||
            {{#if is_admin}}
 | 
					            {{#if is_admin}}
 | 
				
			||||||
                <button type="submit" id="show-add-default-streams-modal" class="button rounded sea-green">{{t "Add channel" }}</button>
 | 
					                <button type="submit" id="show-add-default-streams-modal" class="button rounded sea-green">{{t "Add channel" }}</button>
 | 
				
			||||||
            {{/if}}
 | 
					            {{/if}}
 | 
				
			||||||
            {{> filter_text_input placeholder=(t 'Filter default channels') aria_label=(t 'Filter default channels')}}
 | 
					            {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter default channels')}}
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -11,7 +11,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    <div class="settings_panel_list_header">
 | 
					    <div class="settings_panel_list_header">
 | 
				
			||||||
        <h3>{{t "Custom emoji"}}</h3>
 | 
					        <h3>{{t "Custom emoji"}}</h3>
 | 
				
			||||||
        {{> filter_text_input placeholder=(t 'Filter emoji') aria_label=(t 'Filter emoji')}}
 | 
					        {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter emoji')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
        <table class="table table-striped wrapped-table admin_emoji_table">
 | 
					        <table class="table table-striped wrapped-table admin_emoji_table">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -8,7 +8,7 @@
 | 
				
			|||||||
    <div class="settings_panel_list_header">
 | 
					    <div class="settings_panel_list_header">
 | 
				
			||||||
        <h3>{{t "Invitations "}}</h3>
 | 
					        <h3>{{t "Invitations "}}</h3>
 | 
				
			||||||
        <div class="alert-notification" id="invites-field-status"></div>
 | 
					        <div class="alert-notification" id="invites-field-status"></div>
 | 
				
			||||||
        {{> filter_text_input placeholder=(t 'Filter invitations') aria_label=(t 'Filter invitations')}}
 | 
					        {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter invitations')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -57,7 +57,7 @@
 | 
				
			|||||||
    <div class="settings_panel_list_header">
 | 
					    <div class="settings_panel_list_header">
 | 
				
			||||||
        <h3>{{t "Linkifiers"}}</h3>
 | 
					        <h3>{{t "Linkifiers"}}</h3>
 | 
				
			||||||
        <div class="alert-notification edit-linkifier-status" id="linkifier-field-status"></div>
 | 
					        <div class="alert-notification edit-linkifier-status" id="linkifier-field-status"></div>
 | 
				
			||||||
        {{> filter_text_input placeholder=(t 'Filter linkifiers') aria_label=(t 'Filter linkifiers')}}
 | 
					        {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter linkifiers')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,7 +1,7 @@
 | 
				
			|||||||
<div id="muted-user-settings" class="settings-section" data-name="muted-users">
 | 
					<div id="muted-user-settings" class="settings-section" data-name="muted-users">
 | 
				
			||||||
    <div class="settings_panel_list_header">
 | 
					    <div class="settings_panel_list_header">
 | 
				
			||||||
        <h3>{{t "Muted users"}}</h3>
 | 
					        <h3>{{t "Muted users"}}</h3>
 | 
				
			||||||
        {{> filter_text_input id="muted_users_search" placeholder=(t 'Filter muted users') aria_label=(t 'Filter muted users')}}
 | 
					        {{> filter_text_input id="muted_users_search" placeholder=(t 'Filter') aria_label=(t 'Filter muted users')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
        <table class="table table-striped wrapped-table">
 | 
					        <table class="table table-striped wrapped-table">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -64,7 +64,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
        <div class="settings_panel_list_header">
 | 
					        <div class="settings_panel_list_header">
 | 
				
			||||||
            <h3>{{t "Code playgrounds"}}</h3>
 | 
					            <h3>{{t "Code playgrounds"}}</h3>
 | 
				
			||||||
            {{> filter_text_input placeholder=(t 'Filter code playgrounds') aria_label=(t 'Filter code playgrounds')}}
 | 
					            {{> filter_text_input placeholder=(t 'Filter') aria_label=(t 'Filter code playgrounds')}}
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					        <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -12,7 +12,7 @@
 | 
				
			|||||||
            {{> ../help_link_widget link="/help/topic-notifications" }}
 | 
					            {{> ../help_link_widget link="/help/topic-notifications" }}
 | 
				
			||||||
        </h3>
 | 
					        </h3>
 | 
				
			||||||
        {{> settings_save_discard_widget section_name="user-topics-settings" show_only_indicator=true }}
 | 
					        {{> settings_save_discard_widget section_name="user-topics-settings" show_only_indicator=true }}
 | 
				
			||||||
        {{> filter_text_input id="user_topics_search" placeholder=(t 'Filter topics') aria_label=(t 'Filter invitations')}}
 | 
					        {{> filter_text_input id="user_topics_search" placeholder=(t 'Filter') aria_label=(t 'Filter invitations')}}
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
					    <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
 | 
				
			||||||
        <table class="table table-striped wrapped-table">
 | 
					        <table class="table table-striped wrapped-table">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -13,7 +13,7 @@
 | 
				
			|||||||
    <div>
 | 
					    <div>
 | 
				
			||||||
        <h4 class="inline-block stream_setting_subsection_title">{{t "Subscribers"}}</h4>
 | 
					        <h4 class="inline-block stream_setting_subsection_title">{{t "Subscribers"}}</h4>
 | 
				
			||||||
        <span class="subscriber-search float-right">
 | 
					        <span class="subscriber-search float-right">
 | 
				
			||||||
            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter subscribers' }}" />
 | 
					            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter' }}" />
 | 
				
			||||||
        </span>
 | 
					        </span>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="subscriber-list-box">
 | 
					    <div class="subscriber-list-box">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -15,7 +15,7 @@
 | 
				
			|||||||
    <div>
 | 
					    <div>
 | 
				
			||||||
        <h4 class="inline-block user_group_setting_subsection_title">{{t "Members"}}</h4>
 | 
					        <h4 class="inline-block user_group_setting_subsection_title">{{t "Members"}}</h4>
 | 
				
			||||||
        <span class="member-search float-right">
 | 
					        <span class="member-search float-right">
 | 
				
			||||||
            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter members' }}" />
 | 
					            <input type="text" class="search filter_text_input" placeholder="{{t 'Filter' }}" />
 | 
				
			||||||
        </span>
 | 
					        </span>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="member-list-box">
 | 
					    <div class="member-list-box">
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user