Commit Graph

51 Commits

Author SHA1 Message Date
Gittenburg b245e1e49a compose: Display Formatting button as "Help".
The Formatting button that opens our Markdown help popover previously
had an "A" as its icon (the Font Awesome icon for font). This commit
changes the link to spell out "Help" to make it more discoverable.
2020-09-25 16:47:44 -07:00
Gittenburg 0c6df114f6 compose: Reorder message action buttons.
Now that they are tab accessible, we should order them by importance.
Previously the order was:

1. Add emoji
2. Formatting
3. Attach files
4. Add video call
5. Preview
6. Drafts

This commit changes the order to:

1. Attach files
2. Preview
3. Add video call
4. Add emoji
5. Drafts
6. Formatting

The "Add emoji" button is moved back because emojis can be more
conveniently entered using the typeahead triggered with ":" or the
emoticon conversions.
2020-09-25 16:47:43 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00
Armaan Ahluwalia 5f7b47e20c css: Transition 'app.css' to SCSS.
This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.

To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template

Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.
2018-05-02 17:13:16 -07:00
Tim Abbott d1cc442404 compose: Move colorblock CSS to compose.css. 2018-04-19 22:51:25 -07:00
Cynthia Lin f1db3a681a compose: Refactor compose box from `<table>` to `<div>` structure.
`<td>` elements are fixed-width, so we refactor the entire
`<table>` structure for responsive design.

This fixes a bug with how the `To:` block looks in other languages.

Fixes #9152.
2018-04-19 22:51:13 -07:00
Cynthia Lin 20f14508ff compose: Fix styling of PM recipient input pill.
Fixes #9128.
2018-04-19 10:03:37 -07:00
Cynthia Lin 7cbc9f40bf compose: Change styling of upload progress bar.
Related to #9095.
2018-04-16 09:46:35 -07:00
Cynthia Lin 983deff5da compose: Align recipient bar icons properly.
Fixes #9094.
2018-04-16 09:45:30 -07:00
Balaji2198 605916f6d7 compose: Add subscribe button to the not subscribed stream error message.
Before that, we needed to go the stream settings to subscribe to a
particular stream.

Fixes #3877.
2018-04-05 17:15:18 -07:00
Abhigyan Khaund 0e8cadf980 compose: Move "Sending..." to appear to the right of "Drafts".
Fixes #8570.
2018-03-09 14:44:48 -08:00
Steve Howell 3a1bf04a56 compose: Add pills for typing in PM recipients.
@brockwhittaker wrote the original prototype for having
pills in the recipient box when users compose PMs (either
1:1 or huddle).  The prototype was test deloyed on our
main realm for several weeks.

This commit includes all the original CSS and HTML from
the prototype.

After some things changed with the codebase after the initial
test deployment, I made the following changes:

    * In prior commits I refactored out a module called
      `user_pill.js` that implemented some common functions
      against a more streamlined version of `input_pill.js`,
      and this commit largely integrates with that.

    * I made changes in a prior commit to handle Zephyr
      semantics (emails don't get validated) and tested
      this commit with zephyr.

    * I fixed a reload bug by extracting code out to
      `compose_pm_pill.js` and re-ordering some
      calls to `initialize`.

There are still two flaws related to un-pill-ified text in the
input:

    * We could be more aggressive about trying to pill-ify
      emails when you blur or tab away.

    * We only look at the pills when you send the message,
      instead of complaining about the un-pill-ified text.
      (Some folks may consider that a feature, but it's
      probably surprising to others.)
2018-03-07 15:53:11 -08:00
Cynthia Lin 5e251e5ca0 compose: Improve line wrapping for multiline compose box alerts. 2018-03-06 13:01:41 -08:00
Tommy Ip 5ee6c608c0 message edit: Allow uploading files.
Fixes: #198.
2018-03-05 10:42:38 -08:00
Aditya Bansal bd0a5d5d69 css-minifier: Lint for '+' operator in calc().
Fixes: #8403.
2018-03-01 13:26:16 -08:00
Brock Whittaker 0bf02e531c compose: Change "reply" button to be normal coloring.
This changes the button color to look normal, rather than being a blue/purple.
2018-01-24 14:17:33 -08:00
Aastha Gupta 560425929e compose: Notify when drafts are saved.
Fixes #7539
2017-12-22 10:51:55 -05:00
Marco Burstein e9d7161418 compose: Warn users when posting to the #announce stream.
Currently, users are warned when mentioning @all and @everyone, but not
when posting on the #announce stream. Confirm with users that they want
to send their message on #announce if over 60 people are going to be
notified.

Fixes #6928.
2017-12-20 07:36:50 -05:00
Shreyansh Dwivedi 5b49259722 compose box:Add a reply button. Fixes #5578 2017-12-15 14:23:24 -05:00
Cynthia Lin 799e4adf42 compose: Align Press Enter to send checkbox with label.
Fixes #7604.
2017-12-08 18:21:32 -08:00
Brock Whittaker 2776787dc3 compose-alert: Remove unneeded style.
This removes the width attribute that actually makes the notification
about a pixel too long, because removing this with a block element will
automatically make it 100% auto fit.
2017-12-06 16:48:08 -08:00
Brock Whittaker 9a3a9be926 compose: Restyle `#out-of-view-notification` alert.
This restyles the notification to be slightly lighter green and have
styles that are more compatible with dark mode, along with removing
dead styles.
2017-12-06 16:48:08 -08:00
Brock Whittaker 83d9844fcd compose: Center "x" vertically and horizontally on cross-stream warning.
On the warning that occurs when you are cross posting to a different
stream, move the “x” to be vertically centered and horizontally aligned
with the”x” on other warnings in the compose box.
2017-12-06 16:48:08 -08:00
Brock Whittaker e37838c926 dark-mode: Refactor compose icons to be translucent.
This makes the compose icons translucent rather than medium grey
and black (which isn't even our base text color) to be half opaque
(approx) and base text color.
2017-11-29 16:44:43 -08:00
Tommy Ip b9c2f479d3 refactor: s/send-status-close/compose-send-status-close. 2017-11-27 21:35:14 -08:00
Tommy Ip c0c58f9761 refactor: s/send-status/compose-send-status. 2017-11-27 21:35:14 -08:00
Rhea Parekh 1d826ae201 composebox: Warn when linked to private streams.
Fix issue #6860
2017-11-27 07:41:59 -08:00
Brock Whittaker e14e61c22e compose: Change borders from gray to translucent.
This works better on color backgrounds while staying the same on white.
The compose input borders are also darkened slightly.
2017-11-17 10:30:23 -08:00
Brock Whittaker e0e7c0091b compose: Change from grey to translucent black. 2017-11-17 08:44:04 -08:00
Brock Whittaker 9852861f8a compose: Change white background to be on #compose.
This changes the white background placement to be on #compose rather
than .compose-content.
2017-11-17 08:44:04 -08:00
Steve Howell f35b7b4c77 css: Convert colors to hsl() format.
This changes most of the app-related CSS files, but leaves
things like landing pages and bootstrap alone.
2017-11-13 12:43:43 -08:00
Steve Howell ba51078418 Simplify CSS linter and clean up CSS.
The CSS linter was pretty hard to reason about.  It was
pretty flexible about certain things, but then it would
prevent seemingly innocuous code from getting checked in.

This commit overhauls the pretty-printer to be more composable,
where every object in the AST knows how to render itself.  It
also cleans up a little bit of the pre_fluff/post_fluff logic
in the parser itself, so comments are more likely to be "attached"
to the AST node that make sense.

The linter is actually a bit more finicky about newlines, but
this is mostly a good thing, as most of the variations before
this commit were pretty arbitrary.
2017-11-13 12:43:43 -08:00
Brock Whittaker fd779c1ba6 compose: Remove PM recipient box outline.
This removes the old blue styled outline around the PM recipient
box that was part of the older bootstrap styling in favor of the
dark outline on :focus that had been implemented for the rest of
the recipient boxes recently.
2017-10-25 15:15:58 -07:00
Brock Whittaker 25304ddeee Fix padding to match new font.
This commit fixes the padding on several things that are now not
vertically centered because the new font has slightly different
heights.
2017-09-14 07:38:44 -07:00
Cory Lynch 7e869cf5b2 compose.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
Akhil bd85963cd9 typeahead: Alter CSS to make secondary items more readable. 2017-06-08 12:01:03 -07:00
Jack Zhang a9505654da emoji: Replace the old compose emoji picker with the reactions picker.
This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.

Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.

Fixes #4122.
2017-04-30 15:14:42 -07:00
Tim Abbott b43385ec34 Shrink max display width of topics.
This fixes an issue with topic names overlapping in the left sidebar.
While we're doing that, it makes sense to shrink the maximum size of
the topic input box, to discourage sending with topics that will be
cut off.
2017-04-25 17:51:47 -07:00
Brock Whittaker 5ed482cf2c compose: Apply consistent styling for compose buttons.
This applies the consistent :hover effect for all compose buttons.

Fixes: #4239.
2017-03-22 13:15:44 -07:00
adnrs96 a53114a49a Clean compose.css to use 4 space indents. 2017-03-17 17:07:55 +05:30
Brock Whittaker c155577246 Allow users to resize the message compose box.
This allows for users to resize the message compose box without it
collapsing back down to jQuery autosize’s preferred height.

When you hide the compose box and then re-show it, it keeps the
previous height but reactivates the jQuery module.

Fixes: #2236.
2017-03-14 17:40:21 -07:00
Steve Howell 1e5ec689b7 tools/css: Trim whitespace around CSS values. 2017-03-14 09:29:56 -07:00
Tim Abbott 5f684b8b51 css: Remove text-shadow usage.
This makes text look bad in Chrome on Linux; it happened to not cause
problems in production because our minifier broke it (see
https://github.com/yui/yuicompressor/issues/91), but text looked bad
in development.
2017-02-28 10:41:42 -08:00
Brock Whittaker 2751fa44e6 Remove transition on compose box height.
The transition "all" by default also affected the transition
on the height change of the compose box which ended up making the
compose box appear to be laggy and choppy.
2017-02-27 15:59:49 -08:00
Brock Whittaker c4d50f505f Make compose preview box less editable-looking.
This adds a slight background color and a cursor to show that editing
is disabled.
2017-02-24 15:07:33 -08:00
Brock Whittaker 9ee5ac6d23 Redesign compose box.
This redesigns it to closer to the new implementation design.
2017-02-24 15:07:33 -08:00
Sampriti Panda 1929cc5190 Implement persistent drafts functionality
* Created a drafts modal to display/restore/delete drafts
* Created a Draft model to support storing draft data in localstorage
* Removed existing restore-draft functionality
* Added casper and node tests for drafts functionality

Fixes #1717.
2017-02-23 02:58:23 -08:00
Akhil d8caf16e59 compose: Show description in autocomplete.
Stream descriptions are now displayed along with the name. The
autocomplete results include streams with matches in the stream
descriptions. Added styling for description in compose.css.

Fixes #2398.
2017-01-04 22:48:34 -08:00
Sanskar Modi dee5a0c8d7 Added styling on compose notification warning button.
With CSS suggestions from Tommy Ip.
2016-12-27 15:21:20 -08:00
hackerkid 713b69ceab Fix position of restore draft button.
The Restore draft button currently appears before Markdown preview
button. This commit moves restore draft to right most position.
2016-12-26 18:30:58 -08:00