Commit Graph

376 Commits

Author SHA1 Message Date
Lauryn Menard 89a3c290db narrow: Expand informative text in empty mentioned messages view.
Limits the width of the empty message notice to 600px so that this
longer and more descriptive text is similar to the width of the
empty header text.
2024-06-25 14:11:42 -07:00
Karl Stolley 5cd4a8c8e5 pills: Express pill-container spacing on base class. 2024-06-23 22:00:18 -07:00
sanchi-t 2d79ce2e93 invite: Replace stream checkboxes list with stream pills.
Introduce an input field with typeahead functionality, initially
populated with the default streams for the organization.

Fixes #26871.
2024-06-22 20:04:28 -07:00
Aman Agrawal 32b4aa0883 navbar: Remove empty space to the left and right. 2024-06-20 16:11:19 -07:00
Ujjawal Modi cdbc20d304 invite-user-modal: Remove duplicate CSS rules.
Removes some CSS rules used in the invite user modal that were
already being applied via the shared `modal_select` class.

Co-authored-by: Lauryn Menard <lauryn@zulip.com>
2024-06-20 12:26:29 -07:00
Shubham Padia 43eebbf9c6 scroll: Set tabIndex to -1 for simplebar content wrapper.
Fixes #30403.
Having tabIndex set to 0 led to keyboard focus being put on
a scrollbar container, which led to users having to tab twice
to skip a container.
This commit also removes instances of tabIndex being set to
-1 programatically for certain cases, since it is -1 by default now.
This commit also removes `outline: none` for simplebar since
that property is not needed anymore because the wrapper is
not focusable anymore.
2024-06-20 10:25:51 -07:00
Aman Agrawal 00c56a65ed navbar: Rename realm-logo to realm-navbar-wide-logo. 2024-06-18 09:38:51 -07:00
Aman Agrawal 7ddf7a96dc navbar: Show realm icon logo instead of full logo on narrow widths.
When left sidebar is hidden between 1200px and 768px, we show
smaller realm icon logo instead of the full realm logo. Also,
we use the new space to expand the middle column to better show
the narrow description.
2024-06-18 09:38:51 -07:00
Aman Agrawal 406e9b89d0 css: Fix navbar logo misaligned on small heights. 2024-06-18 09:38:51 -07:00
Sayam Samal 40e548ef5b left_sidebar: Redesign starred messages popover.
Fixes part of #28699.
2024-06-17 18:32:57 -07:00
Aman Agrawal c5b8255d42 navbar: Move left sidebar toggle icon to left of org logo.
Make the org logo smaller and moves the left sidebar toggle icon
to the left of the logo.
2024-06-11 12:42:42 -07:00
Aman Agrawal 043e0311d2 css: Expand to occupy left sidebar space if available on narrow widths. 2024-06-11 12:42:42 -07:00
Aman Agrawal 8aafb72e18 css: Let middle column expand to full width in fluid layout.
When left / right sidebar are hidden, we let middle column to take
up the extra space.
2024-06-11 12:42:42 -07:00
Aman Agrawal 80cc699f42 css: Fix left sidebar toggle button misaligned on small window height. 2024-06-11 12:42:42 -07:00
Aman Agrawal 96dac9ece9 navbar: Add button to toggle left sidebar. 2024-06-11 12:42:42 -07:00
Aman Agrawal c531631ecf navbar: Rename left sidebar toggle button unread count indicator.
Renamed to match the name with the wrapper element and used class
so that we can apply same CSS to other buttons.
2024-06-11 12:42:42 -07:00
Aman Agrawal 9fec1f69ed navbar: Rename left sidebar toggle button.
This name better describes what the button does and using a class
helps us use it's CSS and events for other buttons.
2024-06-11 12:42:42 -07:00
Karl Stolley dc60317dad info_density: Set calculated font-size on body. 2024-06-07 11:18:52 -07:00
Aman Agrawal 371cd0da6c recent_view: Use html as scroll container.
Fixes #17933, #27517

Instead of `recent_view_table`, we make `html` as our scroll container.
This fixes an important bug for us where filters sometimes disappear
due to them scrolling under navbar which is unexpected. Since we are
now using separate containers to display rows and
filter (while includes table headers), where filters use sticky
positioning, this bug will be fixed.
2024-06-07 10:17:10 -07:00
Karl Stolley 1d7e0367b8 right_sidebar: Establish inner grid on selectable_sidebar_block. 2024-06-06 17:08:13 -07:00
Karl Stolley 3d04f7dbda info_density: Set a minimum line-height on body. 2024-05-31 15:18:06 -07:00
Sahil Batra 5e347e971d invite: Remove code for old UI.
We still had some code in invite.ts for the textarea element
which was replaced by pill container, so this commit removes
that code.

This commit also removes the CSS for textarea and radion buttons
which are no longer present in the UI.
2024-05-25 17:48:48 -07:00
Aman Agrawal 80d19fe15d css: Fix theme switch changing color of elements at different intervals.
Due to these transitions the theme switch from dark <-> light was
not pleasant as the background color and color changed at different
intervals.
2024-05-13 13:21:10 -07:00
Aman Agrawal 4e87f35c7d typeahead: Use tippy to position typeaheads without a specified parent.
Except for search typeaheads which have a specific parent container,
we position typeaheads using tippy.
2024-05-08 10:05:27 -07:00
Karl Stolley 7baf3e5e4d selected_message: Correctly express outline colors as variables. 2024-05-08 09:59:40 -07:00
Karl Stolley 6c5085b827 message_header: Bring over control hover selectors. 2024-05-03 12:34:08 -07:00
Karl Stolley 7e2811d633 message_view_header: Extract styles to own file.
This has the added value of being named in parallel with
web/src/message_view_header.ts
2024-05-03 11:12:55 -07:00
Karl Stolley 165df5f1f6 message_header: Build message_header.css from zulip.css header styles. 2024-05-02 13:38:58 -07:00
Karl Stolley 5ad162496c message_row: Decouple and simplify date_row, sub-message text styles. 2024-04-30 12:42:41 -07:00
Karl Stolley c3c9d306f1 message_row: Clean up unused style declarations. 2024-04-30 12:42:41 -07:00
Karl Stolley 27ebc761e7 message_row: Place private message styles in sensible area. 2024-04-30 12:42:41 -07:00
Aman Agrawal d79e84726a sidebar_ui: Fix flickering of invite users button when showing sidebar. 2024-04-29 16:54:15 -07:00
N-Shar-ma 09be97c584 message_edit: Show message source in full opacity.
When viewing the source of a message when not editable, the opacity of
the read-only textarea would be reduced to 0.5, like for any other read-
only textarea in dark mode. This was unnecessary for viewing message
source, so the opacity for this case is now set to 1.

Fixes: #28701.
2024-04-28 10:38:58 -07:00
Karl Stolley 0ab7233ffa reactions: Flatten selectors for showing reaction button on touchscreens. 2024-04-25 12:45:41 -07:00
Karl Stolley 058ff15ee2 message_row: Relocate and consolidate sender-related selectors. 2024-04-25 11:57:01 -07:00
Pratik 07fbbcd142 css: Allow reaction button to be visible in message box.
It enables the reaction button to become visible when clicking on a
message-box in a mobile view.

Fixes #29529.
2024-04-24 17:41:34 -07:00
CIC4DA d7b9c2c21c typehead_list_item: Change the groups icon to zulip-triple-user-icon.
Fixes: zulip#28756
In this commit, we are changing the icon for groups in typehead from fontawesome-group to triple-user-icon.
2024-04-24 17:37:38 -07:00
CIC4DA 3745e44963 navbar: Change the user list menu (narrow) to user-list.svg.
Fixes: zulip#28756
In this commit, we are changing the user list menu icon(narrow screen) from triple-users to user-list.
2024-04-24 17:37:38 -07:00
Adnan Shabbir Husain 9aa6bbcee0
modal: Fix invite link overflow in mobile view.
Added a flex div into the copy invite link dialog box.

Fixes #29524.
2024-04-22 10:48:31 -07:00
Karl Stolley 82d0eec0bc timestamps: Consolidate and simplify message-time properties.
This is better form, and also sets things up to render sample
timestamps for calculating their max width.
2024-04-03 17:38:43 -07:00
Karl Stolley 1425d2f71f message_body: Hyphenate message-time class. 2024-04-03 17:38:43 -07:00
Karl Stolley c25975642a message_body: Remove status-time references.
The `.status-time` class was used only for setting a `top` value,
but that's made moot by the use of grid in the message area.
2024-04-03 17:38:43 -07:00
Afonso Azaruja e217d35ccd link_preview: Fix extraneous shadow.
Fix extraneous shadow at bottom of link preview
in stream messages in dark theme, in private
messages for both themes and in mentions, group
mentions and direct mentions.

This is done by applying the same color, used
in the background, to the shadow. There are CSS
variables that hold the values of the background
color.

Fixes #28853.
2024-04-01 13:06:42 -07:00
Aman Agrawal bec8fccf75 right_sidebar: Hide underline from user-list toggle button in navbar. 2024-03-27 13:29:16 -07:00
Aman Agrawal cc54a7caa8 sidebar_ui: Allow user to hide right sidebar on any screen width. 2024-03-26 11:10:04 -07:00
N-Shar-ma 9cedf0e8bc compose: Trigger language typeahead on using code formatting button.
To increase the discoverability of the possibility of specifying the
language for a code block, we trigger the language typeahead when code
syntax is added using the code formatting button. A blank option is
shown preselected in the typeahead, so that pressing enter will not
mistakenly add a language to the code block.

We only trigger the typeahead on empty opening fences when added by the
button, by setting a state variable to true when adding the syntax using
the button, checking for this state when sourcing languages for the code
typeahead, and then resetting the state variable to false.

Fixes: #29150.
2024-03-25 16:30:03 -07:00
Aman Agrawal c3488bfe76 css: Merge common media queries. 2024-03-19 15:15:23 -07:00
Aman Agrawal 93373d1c12 css: Merge common media queries. 2024-03-19 15:15:23 -07:00
Aman Agrawal ac77d9e42a css: Wrap common media queries under `default-sidebar-behaviour`. 2024-03-19 15:15:23 -07:00
Aman Agrawal 1f89eec5ba css: Move media queries in scheduled_messages to zulip.css. 2024-03-19 15:15:23 -07:00
Aman Agrawal 5f1f0f9eb0 compose: Move related media queries to zulip.css. 2024-03-19 15:15:23 -07:00
Aman Agrawal af25709e30 css: Wrap more selectors under `.default-sidebar-behaviour`. 2024-03-19 15:15:23 -07:00
Aman Agrawal 4740485a13 css: Use better selector names for typeahead. 2024-03-19 15:15:23 -07:00
Aman Agrawal 79565b4e90 css: Remove unused properties of dropdown-menu.
They are always overriden by the same properties set in compose.
2024-03-19 15:15:23 -07:00
Aman Agrawal fc48919a8b css: Remove invalid property applied to search icon.
Since `.zulip-icon-search` has `position: static` which is set
by default, setting `right` here makes no difference to its
position.
2024-03-19 15:15:23 -07:00
Aman Agrawal afe420dcd3 css: Hide left column in both navbar and app.
This was a regression in #29331 with no visual effects.
2024-03-19 15:15:23 -07:00
Aman Agrawal 631aa1aac5 css: Wrap CSS related to hiding columns in `default-sidebar-behaviour`.
We might wrap more elements in future but this this is enough for
testing that nothing breaks right now.

Use `git show -w` for the real changes.
2024-03-18 15:28:03 -07:00
Aman Agrawal c643d0c0ae css: Specify for columns where it is located.
Navbar and app share same class for sidebar, so it is important
that we specify which one we are referring to if we are not referring
to both of them.
2024-03-18 15:28:03 -07:00
Aman Agrawal ea85e526fb css: Specify to which `.column-middle` the styles is applied.
We use `#navbar-middle` and `.app-main .column-middle` specifically
to apply styles to those elements.
2024-03-18 15:28:03 -07:00
Aman Agrawal 4c6164ad49 ui_init: Remove unused dropdown menu code.
We migrated from bootstrap dropdown to use tippy. This change should
have been removed as part of that change.
2024-03-18 15:28:03 -07:00
Aman Agrawal 9ee11afb7e css: Remove min-width styles on app.
We always want to render Zulip at maximum available width with a
max-width.
2024-03-18 15:28:03 -07:00
Aman Agrawal df50c305ae css: Merge media queries. 2024-03-18 15:28:03 -07:00
Aman Agrawal 341c25d087 css: Use variables for border colors in sidebars.
This is important step to fix a bug related to making sure css
for `.column-right` doesn't apply in navbar but only `.app-main`.
2024-03-18 15:28:03 -07:00
Karl Stolley 22b4ec09fa css: Extract CSS variables into own file. 2024-02-15 15:50:25 -08:00
Karl Stolley 9c77300c5a bootstrap: Remove body selectors, zero margin/padding explicitly. 2024-02-15 10:31:29 -08:00
evykassirer 49d79730b8 resize: Convert module to typescript. 2024-02-09 21:17:16 -08:00
Aman Agrawal 91073cfbe1 css: Remove stale CSS.
This doesn't seem to be effectively used anywhere.
2024-02-03 17:20:28 -08:00
Sahil Batra 69d0c78f1e settings: Remove unnecessary code.
We do not use "#pw_change_controls" element any more as it
was removed in 2ca0fb412.
2024-01-29 09:55:32 -08:00
Sahil Batra 6b459c0ea4 invite: Re-add bootstrap CSS rules for btn-link elements.
This commit re-adds the bootstrap CSS rules for the specific
btn-link elements in invite modal to zulip.css. This is part
of the bootstrap removal project.
2024-01-26 09:10:09 -08:00
vighneshbhat9945 6d6fa145cc
css: Make the height of compose buttons steady.
When any stream name includes some other language's letters is scrolled down in 
the recent views, the height of compose-controls bar would change.

Fix this by setting a precise line-height for these elements.

Fixes: #27837.
2024-01-25 15:16:00 -08:00
shashank-23002 dcec36b824 typeaheads: Fix mention typeaheads spill width.
Fixes: #27825
2024-01-15 16:17:11 -08:00
sanchi-t 446ba4d6df message_edit: Fix cursor style on hover in edit area.
Fixes #3938.
2024-01-14 15:34:28 -08:00
Karl Stolley fd559495ab message_row: Remove unnecessary .sender-status-controls style and structure. 2024-01-11 12:53:31 -08:00
Karl Stolley 272b62138e message_row: Remove styles and JS for nonexistant .sender-status. 2024-01-11 12:53:29 -08:00
Karl Stolley f0f8d6a42d message_edit: Remove styles with no associated structure. 2024-01-11 12:51:02 -08:00
Karl Stolley fd5fe64a33 message_edit: Consolidate styles into message row CSS. 2024-01-11 12:51:02 -08:00
Joydeep Bhattacharjee e3744627ac
css: Fix the color of alert word in dark theme.
This was incorrectly not declared as a theme-dependant color.

Fixes #28407.
2024-01-04 10:53:14 -08:00
Sayam Samal e3878cf64a popovers: Add structural changes and fix CSS overlap.
The paragraph tag was being used along with the bold tag to style the
topic and stream in the popovers. The semantic meaning of these tags
are more specialized and should not be used in this context. Replaced
the <p> tags with the more general <div> tags and accounted for the
bold text via the `font-weight` CSS property.

The `.topic-name` class, used to style the topic/stream name in the
topic list in the left sidebar, was also being used to the style the
topic/stream name in the topic/stream popover. This lead to irrelevant
properties being applied to the popover > topic/stream name. Through
this commit, the styling for both of these different cases are now
separated using the appropriate selectors.

Fixes #27562.
2023-12-11 12:55:25 -08:00
Sayam Samal ca9b1060b7 navbar_dropdowns: Let menu items control the width of dropdown menus.
Through this commit, we set the width of the navbar dropdowns to be
equal to the longest menu item, via the min-content intrinsic sizing.

Note, that the min-content width takes into account all soft-wrapping
opportunities, which could result in the wrapping of the menu items in
many cases. To prevent this, we use the white-space property to prevent
menu items from wrapping in any case.
2023-12-11 12:25:09 -08:00
Sahil Batra d30b00d9f2 message_edit: Fix alignment of loading spinner.
This commit updates the CSS to fix the alignment of loading
spinner in "Save" button and also to make sure that button's
width does not change after clicking on the button.
2023-12-11 08:30:12 -08:00
Karl Stolley 7817e358f4 markdown: Place redesigned colors and borders on code spans and blocks.
Prior to merging, this commit and others in the PR should be adjusted
and squashed for a cleaner history.

Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
2023-12-04 13:03:34 -08:00
Karl Stolley 6d4f852dc4 markdown: Remove background colors from code blocks.
It appears as though we're still setting a background color,
but that is only to push back against the background set by
Pygments.

However, code blocks in mention messages get the same color
background as ordinary messages, preserving contrast on syntax
highlighting.
2023-12-04 13:03:34 -08:00
Karl Stolley 78d4232fc4 markdown: Present code spans without borders. 2023-12-04 13:03:34 -08:00
Karl Stolley 2811f2fe0f markdown: Implement redesigned Markdown code styles.
Fixes a part of #22022.
2023-12-04 13:03:34 -08:00
Karl Stolley f1a5fffae9 markdown: Express Markdown code/pre colors as CSS vars.
This ensures that all colors (text, background, and border) are
explicitly declared for Markdown-rendered pre elements, even when
the colors replicate values already declared, e.g., with Pygments.
2023-12-04 13:03:34 -08:00
Karl Stolley c3adfa2679 top_navbar: Apply current icon styles to narrow login icon. 2023-12-04 12:11:00 -08:00
Karl Stolley d85dd6bf2b top_navbar: Set new spectator button styles. 2023-12-04 12:11:00 -08:00
Karl Stolley b53836de03 top_navbar: Allow spectator items to participate in flexbox. 2023-12-04 12:11:00 -08:00
Karl Stolley 0e4dfa04b3 top_navbar: Contain stream, description elements. 2023-12-03 08:40:45 -08:00
N-Shar-ma 82895ff535 compose: Update icons for formatting buttons.
Also made the buttons bigger, and updated breakpoints accordingly.

Fixes: #27845.
2023-12-01 13:51:39 -08:00
Aman Agrawal 7834748dd7 css: Fix modal exit button colors not working on billing pages.
This was due to color variables not being accessible as `zulip.css`
is not a file we import on billing page.
2023-11-29 21:46:13 -08:00
Karl Stolley 3c5ea3895f left_sidebar: Place a dark-mode color for masked unreads. 2023-11-29 13:33:19 -08:00
Sayam Samal def4cf7f93 uploads: Extend drag and drop upload area to blank areas after sidebars.
To extend the drag and drop upload area to blank areas after sidebars,
we now detect the drag/drop event on the entire ".app" division.

We also change replace `width` and `height` css properties with
`min-width` and `min-height` properties respectively, to make sure
that the ".app" div spans the entire width and height of the viewport.

Fixes: #27550.
2023-11-29 10:35:18 -08:00
evykassirer b68cb5b049 navbar: Show shorter navbar for short screens not narrow screens.
Fixes #27366.
2023-11-28 18:11:56 -08:00
evykassirer e158877365 spectator sign in buttons: Use media queries instead of hide-xl. 2023-11-28 18:11:56 -08:00
Aman Agrawal c55eaf2bec css: Set tippy-arrow color same as background in light theme. 2023-11-23 10:33:23 -08:00
Aman Agrawal 1e4f938d82 css: Reduce specificity of `dropdown-list-item-common-styles`.
This helps override CSS for it more easily.
2023-11-22 23:38:52 -08:00
Karl Stolley 33b164f63a left_sidebar: Remove padding from streams header in narrow windows. 2023-11-21 09:16:43 -08:00
Karl Stolley 295b4fc337 message_feed: Size visibility policy icons the same as others. 2023-11-18 05:35:06 -08:00
Karl Stolley 3e4f7108a0 message_feed: Vertically align link icon in recipient bar. 2023-11-18 05:35:06 -08:00