paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 15:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Add option for fixed/fluid width.

Browse Source 
This adds a new option for "fluid width" under `Display settings` section
of SETTINGS/DISPLAY SETTINGS tab.

Fixes: #11844.
This commit is contained in:
Pragati Agrawal
2019-04-16 22:16:17 +05:30
committed by Tim Abbott
parent 389c56e88d
commit a838de63d8
10 changed files with 66 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/js/scroll_bar.js
View File

@@ -36,11 +36,9 @@ exports.initialize = function () {
if (sbWidth > 0) {
$(".header").css("left", "-" + sbWidth + "px");
$(".header-main").css("left", sbWidth + "px");
$(".header-main").css("max-width", 1400 + sbWidth + "px");
$(".header-main .column-middle").css("margin-right", 250 + sbWidth + "px");
$(".fixed-app").css("left", "-" + sbWidth + "px");
$(".fixed-app .app-main").css("max-width", 1400 + sbWidth + "px");
$(".fixed-app .column-middle").css("margin-left", 250 + sbWidth + "px");
$(".column-right").css("right", sbWidth + "px");
@@ -50,17 +48,30 @@ exports.initialize = function () {
$("#compose").css("left", "-" + sbWidth + "px");
$(".compose-content").css({left: sbWidth + "px",
"margin-right": 250 + sbWidth + "px"});
$("#compose-container").css("max-width", 1400 + sbWidth + "px");
$('#keyboard-icon').css({right: sbWidth + 13 + "px"});
$("head").append("<style> @media (max-width: 1165px) { .compose-content, .header-main .column-middle { margin-right: " + (7 + sbWidth) + "px !important; } } " +
"@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +
"</style>");
}
exports.set_layout_width();
}
ui.set_up_scrollbar($("#stream-filters-container"));
};
exports.set_layout_width = function () {
var sbWidth = getScrollbarWidth();
if (page_params.fluid_layout_width) {
$(".header-main").css("max-width", "inherit");
$(".app-main").css("max-width", "inherit");
$("#compose-container").css("max-width", "inherit");
} else {
$(".header-main").css("max-width", 1400 + sbWidth + "px");
$(".app-main").css("max-width", 1400 + sbWidth + "px");
$("#compose-container").css("max-width", 1400 + sbWidth + "px");
}
};
return exports;
}());
if (typeof module !== 'undefined') {

4
static/js/server_events_dispatch.js
View File

@@ -385,6 +385,7 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
'twenty_four_hour_time',
'translate_emoticons',
'starred_message_counts',
'fluid_layout_width',
];
if (_.contains(user_display_settings, event.setting_name)) {
page_params[event.setting_name] = event.setting;
@@ -423,6 +424,9 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
if (event.setting_name === 'starred_message_counts') {
starred_messages.rerender_ui();
}
if (event.setting_name === 'fluid_layout_width') {
scroll_bar.set_layout_width();
}
if (event.setting_name === 'left_side_userlist') {
// TODO: Make this change the view immediately rather
// than requiring a reload or page resize.

1
static/js/settings.js
View File

@@ -112,6 +112,7 @@ function setup_settings_label() {
left_side_userlist: i18n.t("User list on left sidebar in narrow windows"),
night_mode: i18n.t("Night mode"),
starred_message_counts: i18n.t("Show counts for starred messages"),
fluid_layout_width: i18n.t("Use full width on wide screens"),
twenty_four_hour_time: i18n.t("24-hour time (17:00 instead of 5:00 PM)"),
translate_emoticons: i18n.t("Convert emoticons before sending (<code>:)</code> becomes 😃)"),
};

5
static/js/settings_display.js
View File

@@ -78,6 +78,11 @@ exports.set_up = function () {
change_display_setting(data, '#display-settings-status');
});
$('#fluid_layout_width').change(function () {
var data = {fluid_layout_width: JSON.stringify(this.checked)};
change_display_setting(data, '#display-settings-status');
});
$("#night_mode").change(function () {
exports.set_night_mode(this.checked);
});