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

27 lines
1.3 KiB
Handlebars
Raw Normal View History

settings: Remove profile picture header in the profile section. This commit removes the profile picture header and adds an overlay to handle disabled avatar changes in an organization.
2022-02-25 00:03:20 +01:00
<div id="{{widget}}-upload-widget" class="inline-block image_upload_widget">
<div class="image-disabled {{#if is_editable_by_current_user}}hide{{/if}}">
<div class="image-upload-background"></div>
<span class="image-disabled-text flex" aria-label="{{ disabled_text }}" role="button" tabindex="0">
{{ disabled_text }}
</span>
</div>
settings: Fix live update of user-avatar upload widget. We add disabled prop on buttons only and we add the css for buttons (and some specific class elements) when disabled as 'cursor: not-allowed' or 'pointer-events: none' which means the user cannot use these buttons when disabled. This is not the case for the avatar widget as we use a div element there and not button and neither those specific classes which has appropriate styles defined. We use the avatar image block in two ways - for showing image and as a clickable target (which is actually a div element) for uploading, so instead of adding 'disabled' prop we are hiding (adding display: none) the div such that it is not visible on hover and also cannot be clicked.
2021-06-28 13:10:46 +02:00
<div class="image_upload_button {{#unless is_editable_by_current_user}}hide{{/unless}}">
upload widget: Rename image upload widget background css class.
2020-07-15 20:14:13 +02:00
<div class="image-upload-background"></div>
delete avatar: Improve accessibility by converting <span> to <button>. Since it's a button, it doesn't need the "keydown" event. So, removed it. This fixes the bug where pressing any key while the avatar's delete_button was in focus would pop up the modal. It was introduced in e5d04485057cdb3ee330106075f0c266572967a7.
2021-10-23 18:40:05 +02:00
<button class="image-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0">
settings: Extract image_upload_widget.hbs from avatar upload widget. We extract image_upload_widget.hbs from user avatar upload widget. The plan is to the same HTML template for all 4 widgets (user avatar, icon, day logo, night logo) across the two settings UIs and different image upload widgets as possible in future. This breaks i18n; we'll fix it in follow-up work.
2020-06-12 16:04:23 +02:00
&times;
delete avatar: Improve accessibility by converting <span> to <button>. Since it's a button, it doesn't need the "keydown" event. So, removed it. This fixes the bug where pressing any key while the avatar's delete_button was in focus would pop up the modal. It was introduced in e5d04485057cdb3ee330106075f0c266572967a7.
2021-10-23 18:40:05 +02:00
</button>
upload widget: Rename image upload widget delete text CSS class. Previously, image upload widget delete text CSS class name was `settings-page-delete-text`. We can change the CSS class name to `image-delete-text` so that the name can be more generic.
2020-07-15 21:14:31 +02:00
<span class="image-delete-text" aria-label="{{ delete_text }}" tabindex="0">
settings org: Fix i18n in image_upload_widget.hbs. Since our translation functions don't support passing a variable into them and still being found by manage.py makemessages, we need to use translation function before passing as variable into image_upload_widget.hbs file.
2020-06-17 15:10:03 +02:00
{{ delete_text }}
settings: Extract image_upload_widget.hbs from avatar upload widget. We extract image_upload_widget.hbs from user avatar upload widget. The plan is to the same HTML template for all 4 widgets (user avatar, icon, day logo, night logo) across the two settings UIs and different image upload widgets as possible in future. This breaks i18n; we'll fix it in follow-up work.
2020-06-12 16:04:23 +02:00
</span>
upload widget: Rename image upload widget upload text CSS class. Previously, image upload widget delete text CSS class name was `settings-page-upload-text`. We can change the CSS class name to `image-upload-text` so that the name can be more generic.
2020-07-15 21:20:36 +02:00
<span class="image-upload-text" aria-label="{{ upload_text }}" role="button" tabindex="0">
settings org: Fix i18n in image_upload_widget.hbs. Since our translation functions don't support passing a variable into them and still being found by manage.py makemessages, we need to use translation function before passing as variable into image_upload_widget.hbs file.
2020-06-17 15:10:03 +02:00
{{ upload_text }}
settings: Extract image_upload_widget.hbs from avatar upload widget. We extract image_upload_widget.hbs from user avatar upload widget. The plan is to the same HTML template for all 4 widgets (user avatar, icon, day logo, night logo) across the two settings UIs and different image upload widgets as possible in future. This breaks i18n; we'll fix it in follow-up work.
2020-06-12 16:04:23 +02:00
</span>
user avatar: Remove `avatar-spinner-background` id. Now we can remove the id `avatar-spinner-background` and access spinner element from `#user-avatar-upload-widget .settings-page-upload-text` so that we can have only one id at top-level and 'image_upload_widget.hbs` can be more dynamic so we can use for other similar widgets also.
2020-06-15 06:48:41 +02:00
<span class="upload-spinner-background">
upload_widget: Use img tag for tail-spin.svg instead of object tag. We use img tag for showing the loading spinner in image_upload_widget instead of object tag because using object tag gives the following error "Refused to display 'https://chat.zulip.org/' in a frame because it set 'X-Frame-Options' to 'deny'." in console. As mentioned by Anders in czo, this is probably because we’re loading the SVG using an <object> tag as if it’s totally-not-an-IE3-ActiveX- control. Discussed in #issues > loading tail-spin.svg denied by X-Frame-Options.
2021-07-16 11:15:47 +02:00
<img class="image_upload_spinner" src="/static/images/tail-spin.svg" alt="" />
settings: Extract image_upload_widget.hbs from avatar upload widget. We extract image_upload_widget.hbs from user avatar upload widget. The plan is to the same HTML template for all 4 widgets (user avatar, icon, day logo, night logo) across the two settings UIs and different image upload widgets as possible in future. This breaks i18n; we'll fix it in follow-up work.
2020-06-12 16:04:23 +02:00
</span>
</div>
user avatar: Remove `image-block` id. Now we can remove `user-avatar-block` id and add common class `image_block`. we can access this class using `#user-avatar-upload-widget .image_block` so that we can have only one id at top-level and 'image_upload_widget.hbs` can be more dynamic so we can use for other similar widgets also.
2020-06-15 07:38:56 +02:00
<img class="image-block" src="{{ image }}"/>
settings org: Fix i18n in image_upload_widget.hbs. Since our translation functions don't support passing a variable into them and still being found by manage.py makemessages, we need to use translation function before passing as variable into image_upload_widget.hbs file.
2020-06-17 15:10:03 +02:00
<input type="file" name="file_input" class="notvisible image_file_input" value="{{ upload_text }}" />
user avatar: Remove `user_avatar_file_input_error` id. Now we can remove `user_avatar_file_input_error` id and added new class `image_file_input_error`.we can access this class using `#user-avatar-upload-widget .image_file_input` so that we can have only one id at top-level and 'image_upload_widget.hbs` can be more dynamic so we can use for other similar widgets also.
2020-06-15 08:28:41 +02:00
<div class="image_file_input_error text-error"></div>
settings: Extract image_upload_widget.hbs from avatar upload widget. We extract image_upload_widget.hbs from user avatar upload widget. The plan is to the same HTML template for all 4 widgets (user avatar, icon, day logo, night logo) across the two settings UIs and different image upload widgets as possible in future. This breaks i18n; we'll fix it in follow-up work.
2020-06-12 16:04:23 +02:00
</div>