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

user groups: Minor fixes in CSS common to #groups and #streams overlay.

Browse Source 
This commit does following improvements in #streams and #groups overlay.
* Adds word break in the title in the right pane to handle long stream
  and group names.
* Fix positioning of edit (pencil) button to the right end and provide
  maximum available space for stream/group name.

Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
This commit is contained in:
m-e-l-u-h-a-n
2023-04-05 01:34:44 +05:30
committed by Tim Abbott
parent b154722dec
commit 4b5c073c05
5 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/user_group_edit.js
View File

@@ -201,6 +201,7 @@ export function initialize() {
const template_data = { const template_data = {
group_name: user_group.name, group_name: user_group.name,
group_description: user_group.description, group_description: user_group.description,
max_user_group_name_length: user_group_settings_ui.max_user_group_name_length,
}; };
const change_user_group_info_modal = render_change_user_group_info_modal(template_data); const change_user_group_info_modal = render_change_user_group_info_modal(template_data);
dialog_widget.launch({ dialog_widget.launch({

6
web/src/user_groups_settings_ui.js
View File

@@ -19,6 +19,11 @@ import * as user_groups from "./user_groups";
let group_list_widget; let group_list_widget;
// Ideally this should be included in page params.
// Like we have page_params.max_stream_name_length` and
// `page_params.max_stream_description_length` for streams.
export const max_user_group_name_length = 100;
export function set_up_click_handlers() { export function set_up_click_handlers() {
$("#groups_overlay").on("click", ".left #clear_search_group_name", (e) => { $("#groups_overlay").on("click", ".left #clear_search_group_name", (e) => {
const $input = $("#groups_overlay .left #search_group_name"); const $input = $("#groups_overlay .left #search_group_name");
@@ -177,6 +182,7 @@ export function setup_page(callback) {
function populate_and_fill() { function populate_and_fill() {
const template_data = { const template_data = {
can_create_or_edit_user_groups: settings_data.user_can_edit_user_groups(), can_create_or_edit_user_groups: settings_data.user_can_edit_user_groups(),
max_user_group_name_length,
}; };
const rendered = render_user_group_settings_overlay(template_data); const rendered = render_user_group_settings_overlay(template_data);

16
web/styles/subscriptions.css
View File

@@ -410,8 +410,9 @@ h4.user_group_setting_subsection_title {
display: none; display: none;
font-size: 1.5em; font-size: 1.5em;
line-height: 1; line-height: 1;
margin: 9px 0; margin: 9px;
font-weight: 600; font-weight: 600;
word-break: break-all;
.large-icon { .large-icon {
display: inline-block; display: inline-block;
@@ -768,7 +769,7 @@ h4.user_group_setting_subsection_title {
.button-group { .button-group {
padding-top: 5px; padding-top: 5px;
margin-left: auto; margin-left: auto;
margin-right: 15px; margin-right: 18px;
.subscribe-button, .subscribe-button,
#preview-stream-button, #preview-stream-button,
@@ -795,18 +796,23 @@ h4.user_group_setting_subsection_title {
margin-left: -3px; margin-left: -3px;
margin-top: -5px; margin-top: -5px;
white-space: nowrap; white-space: nowrap;
max-width: 90%;
flex: auto;
min-width: 0;
overflow-x: clip;
text-overflow: ellipsis;
.group-name, .group-name,
.sub-stream-name { .sub-stream-name {
display: block; display: block;
max-width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.button-group { .button-group {
margin-left: 1rem; margin-left: auto;
.deactivate { .deactivate {
margin-right: 3px; margin-right: 3px;
@@ -845,7 +851,7 @@ h4.user_group_setting_subsection_title {
.group_change_property_info, .group_change_property_info,
.stream_change_property_info { .stream_change_property_info {
vertical-align: top; vertical-align: top;
margin: -5px 0 0; margin: 0 5px 0 0;
} }
} }

2
web/templates/user_group_settings/change_user_group_info_modal.hbs
View File

@@ -2,7 +2,7 @@
<label for="change_user_group_name"> <label for="change_user_group_name">
{{t 'User group name' }} {{t 'User group name' }}
</label> </label>
<input type="text" id="change_user_group_name" class="modal_text_input" value="{{ group_name }}" /> <input type="text" id="change_user_group_name" class="modal_text_input" value="{{ group_name }}" maxlength="{{max_user_group_name_length}}" />
</div> </div>
<div> <div>
<label for="change_user_group_description"> <label for="change_user_group_description">

2
web/templates/user_group_settings/user_group_creation_form.hbs
View File

@@ -9,7 +9,7 @@
{{t "User group name" }} {{t "User group name" }}
</label> </label>
<input type="text" name="user_group_name" id="create_user_group_name" class="settings_text_input" <input type="text" name="user_group_name" id="create_user_group_name" class="settings_text_input"
placeholder="{{t 'User group name' }}" value="" autocomplete="off" /> placeholder="{{t 'User group name' }}" value="" autocomplete="off" maxlength="{{ max_user_group_name_length }}"/>
<div id="user_group_name_error" class="user_group_creation_error"></div> <div id="user_group_name_error" class="user_group_creation_error"></div>
</section> </section>
<section class="block"> <section class="block">