In "stream_types.hbs"
For "Who can access the stream?" and "Who can post to the stream?" replace
"h4" with "label" to make the for smaller and to remove boldness.
For "Message retention for stream" replace the "h4" with "label"
and add class="stream-title".
In "subscriptions.css":
Add "margin:25px auto" to "#announce-new-stream" to ensure equal
gaps above and below it.
Reduce margin and paddings for ".radio-input-parent".
For "select" set "width: fit-content" and
"height: fit-content" to ensure that the text in the
dropdown is clearly visible.
Fixes: #21322
The most notable change here is that when you are adding
subscribers to a stream as part of creating the stream,
you can now use the same essential pill-based UI for
adding users as we do when you edit subscribers for an
existing stream.
We don't try to exactly mimic the edit-stream UI or
implementation, since when you are adding subscribers
during create-stream, we are just updating a list in
memory, whereas in the edit-stream UI, we immediately
send info to the server.
Fixes#20499
You generally only need to type a few characters to filter
down to just a few folks, even in gigantic realms.
I tried not to make it **too** small, just in case, but
the default width was kind of gaudy.
The header was more confusing than helpful, and we
want the create-stream UI to be less cluttered.
We don't really need the help-center text here, since
we already have ? icons next to the relevant headings
for the sub-sections.
We kill off some CSS, but we won't kill off stream-title
until the big upcoming changes for stream pills.
We were showing # for all types of streams in the title at the top
in the right column of stream settings overlay. This commit fixes
it to show globe icon for web-public streams and lock icon for
private streams.
This is likely not the correct long-term fix, but it's an effective
tactical fix for this button. Added a TODO noting the expected
direction for a long term solution.
Fixes#20481.
This fixes various visual glitches that resulted from reusing
components and overriding key elements of them. The specific logical
changes are as follows:
* Delete custom checkbox positioning for stream settings; we now just
use the common app_components.css code.
* Remove custom subscription-control-label styling; just use settings
defaults.
* Copy the h3/h4 styling from settings.css. Ideally we'll deduplicate
this in further cleanup.
* Add the inline property to stream_settings_checkbox elements, to
reduce variable with settings_checkbox.hbs.
* Place every individual input inside an input-group, so that we can
use the standard settings.css styling.
Previously, the stream_edit modal relied on the new-style class to set
the margin-bottom value for stream-message-retention-days-input to 0,
in order to override the value set by bootstrap. The class new-style
is unhelpful because of its generic name, and in addition, time has /
will eroded away the significance of its name.
Hence, this commit adds the necessary rules to subscriptions.css and
removes the new-style class.
In order to make this change, this commit adds a block to
`subscriptions.css` with the selector `#stream_privacy_modal
.stream-message-retention-days-input input[type="text"]` one important
rule that this adds is `height: inherit;`. Adding this rule solves a
minor UI glitch where selecting "retain N days after posting" would
cause the save and cancel buttons to jump down by a pixel or so.
Fixes: #20222.
In d62e44fcba we migrate to using
micromodal for this pop up (via dialog_widget), as a result the
.modal-body style no longer applied as that class is not used.
In 55adf88e667da02284f0a6ffb6bcfdf73b5427cb we remove the grey-box
class from the stream_types template, hence even if the above wasn't
true, this rule would still not apply.
This commit thus removes this rule.
Previously, the presence of the styles applied by grey-box caused a
visual disparity between the stream settings overlay and the
personal/organization settings overlay, hence, this commit removes
this class.
At some point we must have made a change that caused the "create
stream" and "#stream name" headings to take up more vertical space,
resulting in the dividing line for the headings of the right side of
the subscription overlay to be miss-aligned with the same for the left
side. For the "create stream" panel, it also caused the scroll bar and
some content to be visible through the partially transparent bottom
section in night mode.
In this commit we reduce the padding for those headings so that things
don't look broken anymore.
This commit adds 5px of padding between columns of
subscriber-list such that the list doesn't look too
bad on narrow widths. This does not completely fixes
the issue on narrow widths but is atleast a small
improvement.
As we want subscriber list to occupy rest of available space
in the tab, we use relative units (vh) and calc to set the
max-height property dynamically without losing scroll behavior
for stream list.
Labels for stream post/privacy value settings were not properly
linked with their input element so clicking on labels did not
toggle radio buttons. We fix this by having inputs elements inside
label elements to have correct linking.
Previously stream permissions were hard to find and understand
as they were displayed like a paragraph in description format.
We improve them by using a list item for each different permission.
We move away from a single scrollable page to have a tabs settings
structure instead.
This commit consists of the minimal changes required to set up toggler
component. And the subsequent commits would include all the UI UX
changes required for updating the layouts.
Co-authored-by: Ryan Rehman <ryanrehman99@gmail.com>
The current system to change stream information like Stream name and
description isn't consistent with what we use everywhere else. It's
also slightly difficult to maintain.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
We rename `stream_subscription_info.hbs` and its related
variables and functions to `stream_subscription_request_info.hbs`.
So that its clear that it is used for displaying info about
requests sent for stream subscriptions.
This is a follow-up for #18957.
We had our input elements for stream settings inside li tags
and their alignment was managed using CSS. We move away from
this HTML structure to have inputs and labels inside divs for
two reasons. First is that if we want to later refactor the HTML
to have some different design, then having them inside `ul`
requires complex changes to CSS and eventually we would have
to move away from using `li`s for the part that is changed to
have a different design. Second `li`s are generally not used
to organize input elements.
Above is an explanation of why this change is a preparatory
commit for shifting to have a tabbed design in the stream edit page.
So following changes are done to have a more consistent
HTML structure in stream types modal:
* Added modal-body and removed the non-standard
usage of the unordered list for settings header and inputs.
* Updated relevant CSS rules to have the same design during refactor.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
This reverts commit 34ada11448.
That commit traded a minor visual glitch for a major usability
regression at my most common browser width (960px).
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Tim Abbott
jai2201
NerdyLucifer
Steve Howell
Sahil Batra
YashRE42
Ganesh Pawar
Anders Kaseorg
Aryaman
rht
Aman Agrawal
Palash Raghuwanshi
m-e-l-u-h-a-n