mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
cdea8e9d51
As a follow-up to the previous commit, this commit improves the styling of the custom user status picker input. The changes in this commit adjust the styling of the input field towards the new redesigned inputs while shying away from using the input component to avoid the complexity involved in including the status emoji selector in the input component.
26 lines
1.3 KiB
Handlebars
26 lines
1.3 KiB
Handlebars
<div class="user-status-content-wrapper">
|
|
<div class="tippy-zulip-tooltip" data-tippy-content="{{t 'Select emoji' }}" data-tippy-placement="top" aria-label="{{t 'Select emoji' }}" id="selected_emoji">
|
|
<div class="status-emoji-wrapper" tabindex="0">
|
|
{{> status_emoji_selector .}}
|
|
</div>
|
|
</div>
|
|
<input type="text" class="user-status modal_text_input" id="user-status-input" placeholder="{{t 'Your status' }}" maxlength="60"/>
|
|
{{> ./components/icon_button id="clear_status_message_button" squared=true intent="neutral" icon="close" }}
|
|
</div>
|
|
<ul class="user-status-options modal-options-list">
|
|
{{#each default_status_messages_and_emoji_info}}
|
|
<li class="user-status-option">
|
|
<a class="modal-option-content trigger-click-on-enter user-status-value" tabindex="0">
|
|
{{#if emoji.emoji_alt_code}}
|
|
<div class="emoji_alt_code"> :{{emoji.emoji_name}}:</div>
|
|
{{else if emoji.url}}
|
|
<img src="{{emoji.url}}" class="emoji status-emoji" />
|
|
{{else}}
|
|
<div class="emoji status-emoji emoji-{{emoji.emoji_code}}"></div>
|
|
{{/if}}
|
|
<span class="status-text">{{status_text}}</span>
|
|
</a>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|