Commit Graph

47 Commits

Author SHA1 Message Date
zsviczian 6273d56524
fix: ColorPicker getColor (#5949)
Co-authored-by: dwelle <luzar.david@gmail.com>
2022-12-22 12:53:49 +00:00
Barnabás Molnár 6334bd832f
feat: editor redesign 🔥 (#5780)
* Placed eraser into shape switcher (top toolbar).
Redesigned top toolbar.

* Redesigned zoom and undo-redo buttons.

* Started redesigning left toolbar.

* Redesigned help dialog.

* Colour picker now somewhat in line with new design

* [WIP] Changed a bunch of icons.
TODO: organise new icons.

* [WIP] Organised a bunch of icons. Still some to do

* [WIP] Started working on hamburger menu.

* Fixed some bugs with hamburger menu.

* Menu and left toolbar positioning.

* Added some more items to hamburger menu.

* Changed some icons.

* Modal/dialog styling & bunch of fixes.

* Some more dialog improvements & fixes.

* Mobile menu changes.

* Menu can now be closed with outside click.

* Collab avatars and button changes.

* Icon sizing. Left toolbar positioning.

* Implemented welcome screen rendering logic.

* [WIP] Welcome screen content + design.

* Some more welcome screen content and design.

* Merge fixes.

* Tweaked icon set.

* Welcome screen darkmode fix.

* Content updates.

* Various small fixes & adjustments.
Moved language selection into menu.
Fixed some problematic icons.
Slightly moved encryption icon.

* Sidebar header redesign.

* Libraries content rendering logic + some styling.

* Somem more library sidebar styling.

* Publish library dialog styling.

* scroll-back-to-content btn styling

* ColorPicker positioning.

* Library button styling.

* ColorPicker positioning "fix".

* Misc adjustments.

* PenMode button changes.

* Trying to make mobile somewhat usable.

* Added a couple of icons.

* Added some shortcuts.

* Prevent welcome screen flickering.
Fix issue with welcome screen interactivity.
Don't show sidebar button when docked.

* Icon sizing on smaller screens.

* Sidebar styling changes.

* Alignment button... well... alignments.

* Fix inconsistent padding in left toolbar.

* HintViewer changes.

* Hamburger menu changes.

* Move encryption badge back to its original pos.

* Arrowhead changes.
Active state, colours + stronger shadow.

* Added new custom font.

* Fixed bug with library button not rendering.

* Fixed issue with lang selection colours.

* Add tooltips for undo, redo.

* Address some dark mode contrast issues.

* (Re)introduce counter for selectedItems in sidebar

* [WIP] Tweaked bounding box colour & padding.

* Dashed bounding box for remote clients.

* Some more bounding box tweaks.

* Removed docking animation for now...

* Address some RTL issues.

* Welcome screen responsiveness.

* use lighter selection color in dark mode & align naming

* use rounded corners for transform handles

* use lighter gray for welcomeScreen text in dark mode

* disable selection on dialog buttons

* change selection button icon

* fix library item width being flexible

* library: visually align spinner with first section heading

* lint

* fix scrollbar color in dark mode & make thinner

* adapt properties panel max-height

* add shrotcut label to save-to-current-file

* fix unrelated `useOutsideClick` firing for active modal

* add promo color to e+ menu item

* fix type

* lowered button size

* fix transform handles raidus not accounting for zoom

* attempt fix for excal logo on safari

* final fix for excal logo on safari

* fixing fhd resolution button sized

* remove TODO shortcut

* Collab related styling changes.
Expanding avatar list no longer offsets top toolbar.
Added active state & collaborator count badge for collab button.

* Tweaked collab button active colours.

* Added active style to collab btn in hamburger menu

* Remove unnecessary comment.

* Added back promo link for non (signed in) E+ users

* Go to E+ button added for signed in E+ users.

* Close menu & dropdown on modal close.

* tweak icons & fix rendering on smaller sizes [part one]

* align welcomeScreen icons with other UI

* switch icon resize mq to `device-width`

* disable welcomeScreen items `:hover` when selecting on canvas

* change selection box color and style

* reduce selection padding and fix group selection styling

* improve collab cursor styling

- make name borders round
- hide status when "active"
- remove black/gray colors

* add Twitter to hamburger menu

* align collab button

* add shortcut for image export dialog

* revert yarn.lock

* fix more tabler icons

* slightly better-looking penMode button

* change penMode button & tooltip

* revert hamburger menu icon

* align padding on lang picker & canvas bg

* updated robot txt to allow twitter bot and fb bot

* added new OG and tweaked the OG state

* add tooltip to collab button

* align style for scroll-to-content button

* fix pointer-events around toolbar

* fix decor arrow positioning and RTL

* fix welcomeScreen-item active state in dark mode

* change `load` button copy

* prevent shadow anim when opening a docked sidebar

* update E+ links ga params

* show redirect-to-eplus welcomeScreen subheading for signed-in users

* make more generic

* add ga for eplus redirect button

* change copy and icons for hamburger export buttons

* update snaps

* trim the username to account for trailing spaces

* tweaks around decor breakpoints

* fix linear element editor test

* remove .env change

* remove `it.only`

Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Maielo <maielo.mv@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
2022-11-01 17:29:58 +01:00
Aakansha Doshi 43b13d8e3a
fix: Add display name to components so it doesn't show as anonymous (#5616) 2022-08-26 11:46:19 +05:30
David Luzar af31e9dcc2
fix: focus traps inside popovers (#5317) 2022-06-23 17:33:50 +02:00
David Luzar fd48c2cf79
fix: non-letter shortcuts being swallowed by color picker (#5316) 2022-06-17 12:37:11 +02:00
Tom Sherman 3d56ceb794
fix: Handle `ColorPicker` parentSelector being undefined (#5152)
Co-authored-by: dwelle <luzar.david@gmail.com>
2022-05-07 18:16:14 +00:00
Aakansha Doshi 49172ac2d3
feat: support custom colors 🎉 (#4843)
* feat: support custom colors 🎉

* remove canvasBackground

* fix tests

* Remove custom color when elements deleted

* persist custom color across sessions

* Choose 5 latest custom colors when populating from elements

* fix tests

* styling

* don't use up/down arrow for custom colors

* Always push latest color to the begining

* don't check if valid in custom color

* calculate custom colors on color picker open

* revert unnecessary changes

* remove newlines

* simplify state

* tweak label

* fix custom color shortcuts throwing if color not exists

* fix

* early return

Co-authored-by: dwelle <luzar.david@gmail.com>
2022-02-28 19:04:26 +05:30
Thomas Steiner 621812d0eb
feat: Make color ARIA labels better (#3871)
* Make color aria labels better

* Use isTransparent helper

* Fix import

* Try to fix test

* More test fixes

* Reuse variable
2021-08-02 20:18:55 +02:00
Arun 6c3e4417e1
feat: Add shortcuts for stroke and background color picker (#3318)
* feat: Add shortcuts for opening stroke and background color picker

* Use App.tsx keydown handler

* only get selectedElements if applicable (perf)

* fix tests and snaps

* reuse `appState.openMenu`

Co-authored-by: dwelle <luzar.david@gmail.com>
2021-05-28 13:52:42 +02:00
Aakansha Doshi d126d04d17
feat: Bind keyboard events to the current excalidraw container and add handleKeyboardGlobally prop to allow host to bind to document (#3430)
* fix: Bind keyboard events to excalidraw container

* fix cases around blurring

* fix modal rendering so keyboard shortcuts work on modal as well

* Revert "fix modal rendering so keyboard shortcuts work on modal as well"

This reverts commit 2c8ec6be8e.

* Attach keyboard event in react way so we need not handle portals separately (modals)

* dnt propagate esc event when modal shown

* focus the container when help dialog closed with shift+?

* focus the help icon when help dialog on close triggered

* move focusNearestTabbableParent to util

* rename util to focusNearestParent and remove outline from excal and modal

* Add prop bindKeyGlobally to decide if keyboard events should be binded to document and allow it in excal app, revert tests

* fix

* focus container after installing library, reset library and closing error dialog

* fix tests and create util to focus container

* Add excalidraw-container class to focus on the container

* pass focus container to library to focus current instance of excal

* update docs

* remove util as it wont be used anywhere

* fix propagation not being stopped for React keyboard handling

* tweak reamde

Co-authored-by: David Luzar <luzar.david@gmail.com>

* tweak changelog

* rename prop to handleKeyboardGlobally

Co-authored-by: dwelle <luzar.david@gmail.com>
2021-04-13 01:29:25 +05:30
Lipis 014097a97e
refactor: Stop using the deprecated keyCode (#2426)
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-12-01 22:36:06 +01:00
Lipis e05acd6fd9
Update ESLint rules (#2342) 2020-11-06 21:06:30 +01:00
Lipis facde7ace0
Fix padding in the library loading buttons (#2331)
* Fix padding in the library loading buttons

* Update src/components/Stack.tsx

Co-authored-by: Dominic Lee <34794189+dominictwlee@users.noreply.github.com>

* extend CSSProperties TS definition

Co-authored-by: Dominic Lee <34794189+dominictwlee@users.noreply.github.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
2020-11-04 11:05:12 +01:00
Andrew Aquino 5e55e77f54
enable ColorPicker keyboard shortcuts if using custom color (#2288) 2020-10-27 11:01:57 +01:00
Michal Srb c0dd870c6e
Dark mode (#2006)
Co-authored-by: dwelle <luzar.david@gmail.com>
2020-08-13 13:35:31 +02:00
Lipis c427aa3cce
Prefer arrow functions and callbacks (#1210) 2020-05-20 15:21:37 +02:00
David Luzar 2c5c770e78
rewrite picker color handling (#1487) 2020-04-25 23:06:16 +02:00
Warren Seine 71e7f130bc
Generalize color normalization (#1479) (#1483)
Following #1478, a bug was found related to transparent backgrounds. As Excalidraw only supports `transparent` as a valid transparent color, this commits generalizes the use of canvas to normalize color values.

It changes a few details:
- `rgba()` or `hsla()` syntaxes are not accepted anymore
- pasting values goes through the same normalization step, avoiding invalid values
- color validation is not regex-based anymore
- any CSS-valid black color is now accepted (e.g. previously, `rgb(0,0,0)` was rejected)
2020-04-24 11:06:54 -07:00
Warren Seine fa8354e306
Support different color inputs (#1478) (#1479) 2020-04-23 09:18:28 -07:00
Jed Fox f7e3ee2064
Use open-color directly (#1371) 2020-04-11 01:09:29 +03:00
Jed Fox 663526129a
Proper RTL support (#1154)
* Add RTL styles. Most of the work is done by the browser 💖

* Refactor getLanguage

* Additional fixes

* Mirror the mouse pointer icon

* Move the vertical scrollbar to the left on RTL

* Revert "Mirror the mouse pointer icon"

This reverts commit f69b132538.
2020-04-02 12:21:19 -04:00
dependabot-preview[bot] 722c498abe
Bump prettier from 1.19.1 to 2.0.1 (#1060)
* Bump prettier from 1.19.1 to 2.0.1

Bumps [prettier](https://github.com/prettier/prettier) from 1.19.1 to 2.0.1.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/1.19.1...2.0.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* Update formatting

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>
2020-03-23 13:05:07 +02:00
Jed Fox e44801123a
Restyle the color picker a touch (#920) 2020-03-15 19:26:52 +02:00
Christopher Chedeau ead6a083d4
Assign a colors to each pointers (#944)
I'm using the client id as a random number to index on the color array. So far it's been working better than using a sequential increment as the colors in the array are sorted by proximity. Also, it has the advantage that everyone in the room will see the same color for the same person.
2020-03-14 12:18:57 -07:00
Lipis 097c5dfad7
Refactor: e -> event or error, err -> error, p -> pointer (#831)
* Refactor: e -> event or error, err -> error, p -> pointer

* simplify
2020-02-28 23:03:53 +01:00
BM 27a1217981
Remove select color input on click (#708) 2020-02-05 04:04:29 +00:00
Bakhtiiar Muzakparov 173fe093b6
Fix typing into color picker popup text field (#694)
Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-04 13:28:22 +00:00
Lipis 53994e71e5
Add more ESLint rules and change the formatting scripts (#626)
* Add curly rule in ESLint for consistency

* Fix rules

* More rules

* REturn

* Push

* no else return

* prefer const

* destructing
2020-02-02 18:04:35 +00:00
Christopher Chedeau 46791e6da1
Add keybindings for color picker (#647)
* Add keybindings for color picker

This adds the ability to navigate using left/right/bottom/up keys and shows key bindings for all the different colors. This is only optimized for the qwerty keyboard layout, but unfortunately it's not possible to detect other keyboard layouts :(

* add aria-keyshortcuts and keybinding in title

* make focus select color, confirm on enter

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-02-01 13:56:15 +01:00
Christopher Chedeau e4919e2e6c
Replace i18n by a custom implementation (#638)
There are two problems with the current localization strategy:
- We download the translations on-demand, which means that it does a serial roundtrip for nothing.
- withTranslation helper actually renders the app 3 times on startup, instead of once (I haven't tried to debug it)
2020-01-31 21:06:06 +00:00
Faustino Kialungila de68561df5
lowercase pasted color (#594)
* lowercase pasted color

* remove unused class & don't lowercase input

Co-authored-by: David Luzar <luzar.david@gmail.com>
2020-01-27 19:51:11 +01:00
Guillermo Peralta Scura e4ff408f23
Accessible modals (#560)
Improve the accessibility of our modals (the color picker and the export dialog)

Implement a focus trap so that tapping through the controls inside them don't escape to outer elements, it also allows to close the modals with the "Escape" key.
2020-01-25 19:37:58 -03:00
Christopher Chedeau 5b19aeafe9
Make color selection accessible (#556)
By changing from a `<div>` to a `<button>`, it's now possible to use the space key in order to select it
2020-01-25 10:11:57 -08:00
Guillermo Peralta Scura 69061e20ac Some a11y fixes (#534)
* Rename ToolIcon to ToolButton

It makes more semantic sense

* Label and keyboard shortcuts announcement

* Refactor common props for ToolButton

* Better doc outline and form controls

* Adjust color picker

* Styling fixes

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>
2020-01-25 09:52:03 -08:00
Lipis ee68af0fd3
Set Trailing Cmma to (#525) 2020-01-24 12:04:54 +02:00
David Luzar 2340dddaad Sync panel props to editing element (#470)
* ensure panel props are sync to editing elem

* ensure we don't create empty-text elements (fixes #468)

* remove dead code

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>
2020-01-20 15:16:22 -08:00
Guillermo Peralta Scura 7ae52f1164
Add ColorInput component (#455)
* Add ColorInput component

* Use valid color on input blur

* Darken input text and add labels
2020-01-19 18:27:36 -03:00
Lipis 8154ccd907 No named colors and lowercase hex (#395)
* No named colors and lowercase hex

* consistent
2020-01-16 10:16:08 -08:00
Lipis cb8d866c33 Open colors (#378)
* Add open colors

* More colors

* Update colors

* Shade 0
2020-01-16 18:14:00 +01:00
Bakhtiiar Muzakparov 8db8827c6f feat: add line shape (#371)
* feat: add line shape

* fix: align line tool

* fix: hitbox bug sw to ne

* fix: add stroke width n sloppiness  for line

* fix: center line inside a panel box

* fix: use color as a unique key
2020-01-16 00:07:19 +05:00
Timur Khazamov 79aee53ff6 Redesign idea (#343)
* Redisign idea

* Code cleanup

* Fixed to right container

* Reoredered layout

* Reordering panels

* Export dialog

* Removed redunant code

* Fixed not removing temp canvas

* Fixed preview not using only selected elements

* Returned file name on export

* Toggle export selected/all elements

* Hide copy to clipboard button if no support of clipboard

* Added border to swatches

* Fixed modal flickering
2020-01-15 07:42:02 -08:00
Christopher Chedeau 8785bef523
Support transparent background + inline picker (#325)
Unfortunately, react-color has a bug where transparent color doesn't trigger onChange. I've been annoyed by the huge dependency anyway so decided to take the generated html (which is awesome) and reimplement a specific component for it.

I also made sure that we don't actually render anything when the background is transparent on rough (I looked at the generated path and made sure it didn't have the commands for the background)
2020-01-11 19:10:41 -08:00
Enzo Ferey c6accd9fc7 Improve color suggestions (#304)
* Add palettes for each type of color picker.

* Add white canvas background and black element stroke.

* Add white for element background.
2020-01-11 14:58:44 -08:00
Timur Khazamov 2f9aa0e3ca Async loading of TwitterPicker (#246) 2020-01-07 10:37:22 -08:00
Timur Khazamov 257f697a98 Context menu with some commands (#217) 2020-01-06 18:50:59 -08:00
Faustino Kialungila 5ade8987e4
Fixes pasting colors in color picker (#215)
* improve lozenge dimensions

* fix pasting colors in color picker input
2020-01-06 20:28:14 +01:00
Gasim Gasimzada 054669cfef
Extract components and shapes into their respective modules (#212) 2020-01-06 21:29:44 +04:00