paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

personal_settings: Restyle the profile, account & privacy settings btns.

Browse Source 
This commit restyles the profile, account and privacy settings buttons
as follows:

- "Preview profile": action-button-quiet-brand
- Pencil for email editing: icon-button-brand
- "Change your password": action-button-quiet-brand
- "Deactivate account": action-button-quiet-danger
- "Manage your API key": action-button-quiet-brand

Fixes part of #33130.
This commit is contained in:
Maneesh Shukla
2025-01-31 18:35:22 +05:30
committed by Tim Abbott
parent 78bd2dd5c0
commit b5dec3258f
5 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/styles/settings.css
View File

@@ -119,6 +119,11 @@ h3,
min-width: 0;
}
.change-email {
display: flex;
gap: 0.5rem;
}
.admin-realm-description {
height: 16em;
width: 100%;

4
web/templates/components/action_button.hbs
View File

@@ -1,4 +1,6 @@
<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{type}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}>
<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{type}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
{{#if disabled}}disabled{{/if}}
>
{{#if icon}}
<i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
{{/if}}

4
web/templates/components/icon_button.hbs
View File

@@ -1,3 +1,5 @@
<button type="button" class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}>
<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
{{#if data-tippy-content}}data-tippy-content="{{data-tippy-content}}"{{/if}}
>
<i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
</button>

43
web/templates/settings/account_settings.hbs
View File

@@ -8,13 +8,20 @@
{{#if user_has_email_set}}
<div class="input-group">
<label class="settings-field-label {{#unless user_can_change_email}}cursor-text{{/unless}}" for="change_email_button">{{t "Email" }}</label>
<div>
<div class="change-email">
<div id="email_field_container" class="inline-block {{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
<input type="email" value="{{current_user.delivery_email}}" class="settings_text_input" disabled="disabled" />
</div>
<button id="change_email_button" type="button" class="button rounded tippy-zulip-delayed-tooltip {{#unless user_can_change_email}}hide{{/unless}}" data-tippy-content="{{t 'Change your email' }}" aria-label="{{t 'Change your email' }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
{{> ../components/icon_button
id="change_email_button"
icon="edit"
intent="brand"
custom_classes="tippy-zulip-delayed-tooltip"
hidden=(not user_can_change_email)
aria-label=(t "Change your email")
aria-hidden="true"
data-tippy-content=(t "Change your email")
}}
</div>
<div id="email-change-status"></div>
</div>
@@ -48,7 +55,12 @@
<div>
<label class="settings-field-label" for="change_password">{{t "Password" }}</label>
<div class="input-group">
<button id="change_password" type="button" class="button rounded" data-dismiss="modal">{{t "Change your password" }}</button>
{{> ../components/action_button
label=(t "Change your password")
type="quiet"
intent="brand"
id="change_password"
}}
</div>
</div>
{{/if}}
@@ -56,10 +68,13 @@
<div class="input-group">
<div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}disabled_setting_tooltip{{/if}}">
<button type="submit" class="button rounded button-danger" id="user_deactivate_account_button"
{{#if user_is_only_organization_owner}}disabled="disabled"{{/if}}>
{{t 'Deactivate account' }}
</button>
{{> ../components/action_button
label=(t "Deactivate account")
type="quiet"
intent="danger"
id="user_deactivate_account_button"
disabled=user_is_only_organization_owner
}}
</div>
{{#if owner_is_only_user_in_organization}}
<button type="submit" class="button rounded button-danger deactivate_realm_button">
@@ -133,9 +148,13 @@
{{/tr}}
</p>
<div id="api_key_button_container" class="inline-block {{#unless user_has_email_set}}disabled_setting_tooltip{{/unless}}">
<button class="button rounded" id="api_key_button" {{#unless user_has_email_set}}disabled="disabled"{{/unless}}>
{{t "Manage your API key" }}
</button>
{{> ../components/action_button
label=(t "Manage your API key")
type="quiet"
intent="brand"
id="api_key_button"
disabled=(not user_has_email_set)
}}
</div>
</div>
</div>

12
web/templates/settings/profile_settings.hbs
View File

@@ -69,10 +69,14 @@
<span class="user-details-desc">{{date_joined_text}}</span>
</div>
</div>
<button class="button rounded sea-green" id="show_my_user_profile_modal">
{{t 'Preview profile' }}
<i class="show-user-profile-icon fa fa-external-link" aria-hidden="true"></i>
</button>
{{> ../components/action_button
label=(t "Preview profile")
type="quiet"
intent="brand"
id="show_my_user_profile_modal"
icon="external-link"
aria-hidden="true"
}}
</div>
</div>
</div>