Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/templates/compose_control_buttons.hbs

25 lines
2.2 KiB
Handlebars
Raw Normal View History

compose: Move overflowing buttons to a popover. We don't hide popover on click for formatting buttons, emoji picker and time picker. Emoji and time picker popovers need a reference to be displayed, hence we don't hide them. Not hiding formatting buttons is based on past discussion. The current instance of compose popover is stored locally so that we can access it across different modules. The basic approach for hiding / displaying a button is based on width and is executed at `sm` breakpoint as per our `css_variables.js`. Used handlebars and `hide/show-sm` css class to make this work. This avoids using too much JS to hide/display elements.
2021-11-23 19:01:36 +01:00
<div class="compose_control_buttons_container order-1">
templates: Remove pull-left class and its bootstrap CSS. The "pull-left" class was used for hidden file type input in compose_control_buttons.hbs and in the copy code button in codeblocks. It was only used to set the float property in CSS, but we do not need to set it and removing it does not make any change in the position of these elements. So, this commit removes the pull-left class and its CSS from bootstrap.css as well. For the file type input, it is already hidden and after removing the float property also, it is positioned at the same place due to ordering of elements in HTML. For the copy code button in codeblocks, it is postioned using "position" and "right" attributes and removing "float" property has no effect.
2023-06-19 05:25:02 +02:00
<input type="file" class="file_input notvisible" multiple />
compose: Move overflowing buttons to a popover. We don't hide popover on click for formatting buttons, emoji picker and time picker. Emoji and time picker popovers need a reference to be displayed, hence we don't hide them. Not hiding formatting buttons is based on past discussion. The current instance of compose popover is stored locally so that we can access it across different modules. The basic approach for hiding / displaying a button is based on width and is executed at `sm` breakpoint as per our `css_variables.js`. Used handlebars and `hide/show-sm` css class to make this work. This avoids using too much JS to hide/display elements.
2021-11-23 19:01:36 +01:00
{{#if file_upload_enabled }}
<a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 data-tippy-content="{{t 'Upload files' }}"></a>
{{/if}}
<a role="button" class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" tabindex=0 data-tippy-content="{{t 'Preview' }}"></a>
<a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" data-tippy-content="{{t 'Write' }}"></a>
<a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 data-tippy-content="{{t 'Add video call' }}"></a>
compose: Move emoji button outside of popover. Since we more space after moving Help button below, we stop hiding emoji icon in a popover on small screens.
2021-12-17 18:28:25 +01:00
<a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 data-tippy-content="{{t 'Add emoji' }}"></a>
tippyjs: Avoid unsafe allowHTML API in favor of <template> elements. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 23:06:33 +01:00
<a role="button" class="compose_control_button fa fa-clock-o time_pick" aria-label="{{t 'Add global time' }}" tabindex=0 data-tooltip-template-id="add-global-time-tooltip" data-tippy-maxWidth="none"></a>
giphy: Migrate Giphy popover to Tippy.
2023-06-22 17:31:32 +02:00
<div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}}" data-tippy-content="{{t 'Add GIF' }}">
<a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>
</div>
compose_control_buttons: Move GIF button out of the popover.
2022-02-11 09:47:13 +01:00
<div class="divider hide-sm">|</div>
compose: Move overflowing buttons to a popover. We don't hide popover on click for formatting buttons, emoji picker and time picker. Emoji and time picker popovers need a reference to be displayed, hence we don't hide them. Not hiding formatting buttons is based on past discussion. The current instance of compose popover is stored locally so that we can access it across different modules. The basic approach for hiding / displaying a button is based on width and is executed at `sm` breakpoint as per our `css_variables.js`. Used handlebars and `hide/show-sm` css class to make this work. This avoids using too much JS to hide/display elements.
2021-11-23 19:01:36 +01:00
<div class="{{#if message_id}}hide-lg{{else}}hide-sm{{/if}}">
{{> compose_control_buttons_in_popover}}
</div>
tooltips: Add hotkey hints support to compose related buttons. This commit adds the hotkey hints support to "Cancel compose", "Cancel compose and save draft", "Scroll to bottom" and "Drafts" button.
2022-09-28 19:29:17 +02:00
<a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
compose: Add drafts beside formatting buttons. We hide the drafts button on small screen sizes since it overflows the window on some languages like Russian.
2022-02-03 12:53:14 +01:00
{{t 'Drafts' }}
</a>
compose_control_menu: Allow to enter press to open the menu. Make `compose_control_menu_wrapper` clickable and allow tab focus on it. Disable tab focus on `compose_control_menu` icon. Fix outline for `compose_control_menu_wrapper`. Extend out custom outline property to all `[role="button"]` elements.
2022-03-08 07:22:44 +01:00
<div class="compose_control_menu_wrapper" role="button" tabindex=0>
<a class="compose_control_button zulip-icon zulip-icon-ellipsis-v-solid hide {{#if message_id}}show-lg{{else}}show-sm{{/if}} compose_control_menu" tabindex="-1" data-tippy-content="Compose actions"></a>
compose: Never hide send button. `Press Enter to send` used to hide `Send` button, we remove that behaviour. We show the current state of `Enter` hotkey action via text below `Send` button which can toggle behaviour on click.
2021-11-25 10:00:04 +01:00
</div>
compose: Refactor bottom part of compose box. * We use flexbox instead of `position: relative` to align elements. * Increase clickable area of icons using more padding. * Increase space between elements. * Fix mobile compose box icon alignment.
2021-11-12 06:29:37 +01:00
</div>