Commit graph

175 commits

Author SHA1 Message Date
Pedro Pinto Silva
3e38ec9b7d Synchronize map with TilesSection: Fix CSS
- Fixes map z-index so annotation can be have higher z-index
- Now map and due to the latest changes introduced in:
8ca57fad3344f6da1b42158944bf9903f0ac528b we cannot use
container's border-top as our bezel divider
  - Elements such as annotation need to go under
  - So Fix toolbar-wrapper to use bottom border
- Notebookbar: Fix toolbar-wrapper background-Color which
was being set as transparent and thus elements passing under
were being visible
- Ruler: fix cropped ruler (was not going full width)

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I8778619da43c51d1994dbb12d1112d4f1d42ff43
2021-08-05 11:09:11 +02:00
Pedro Pinto Silva
a6ebc1e570 Fix borders around JS Sidebar (doc container etc)
- Fix Borders
  - Make sure the borders that divide the document container and its
	surroundings are always visible at all times not matter what is open
	(sidebar) or what is visible (status bar, ruler)

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Idea765f4438981af66bb760f25f7c553be7da728
2021-07-23 17:17:01 +02:00
Gökay ŞATIR
034b594bdd Impress: Adjust mobile edit button position.
* Remove 3px margin of read only view.

Signed-off-by: Gökay ŞATIR <gokaysatir@gmail.com>
Change-Id: I8f72ea952e2bc734048fe4e02e6ba1784acb1369
2021-07-20 13:43:22 +03:00
Gökay ŞATIR
b36b732e1f Move side bars into flex container.
So, we no longer need to set positions of HTML elements using margins or absolute positioning or attributes like "left: 30px".

Tested on mobile, desktop, tablet views with & without notebookbar.

The problem was:
    On an unbranded build, side bar's width is different. So pre-assumed pixel based positioning would need to be changed according to existence of branding.
    Instead, i tried to use CSS rules with flexbox.

Signed-off-by: Gökay ŞATIR <gokaysatir@gmail.com>
Change-Id: Ib301dfa8c06a9cf12acd33caf1b6a852a2faab20

There is an additional fixup for master branch included.
2021-07-20 13:43:22 +03:00
Gökay Şatır
ded14a96c5 IE11 compatibility changes.
Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: If595e742ecef633741892c4a714f74d93e97c6a9
2021-07-09 21:05:40 +03:00
Gökay Şatır
fbb180c2c3 Style: zIndex adjustments for comment list.
Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: I4eafe53d0879e278c48e9168163cad91227aea0c
2021-07-09 21:05:40 +03:00
Gökay Şatır
ac2f2336fd Introduce CommentSection.ts file.
Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: Ie5e157638df043e39bfb8ee042b004fba19113d2
2021-07-09 21:05:40 +03:00
Gökay Şatır
ff744fb70e html.m4: Use CSS-flex for page layout.
Use flex for document-container, so now it automatically resizes itself.
Remove absolute positioning from row elements.
This patch is for desktop view.

Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: I2807794da268fe0f3d7f2c54ad19a728f4c6f981
2021-07-09 21:05:40 +03:00
Gökay Şatır
9f3b72aa6f CanvasTileLayer: Scnchronize map with TilesSection.
We now position the map element according to TilesSection.

This change required document-container to be positioned too.
To make it a little easier, we now use css rules for document-container.

Css rules for desktop view is done with this patch.

Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: I68f11a081f62b4a8cecd8c0d7529795c07756d1b
2021-07-09 21:05:40 +03:00
Pedro Pinto Silva
4da5dcd2a0 On load: Do now show presentation-controls-wrapper
unless we are in presence of a presentation or drawing.

- Hide it by default
- Use UIManager to show element

Fixes the glitch responsible by presentation-controls-wrapper
being shown right at the initialization time no matter the doc type

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I74c8ac615282774a7fdb35f5e79e5bec329ad774
2021-06-23 12:47:41 +02:00
Andreas-Kainz
a73919261c Mobile Impress mobile-edit-button same arrangement than writer
The mobile-edit-button space from bottom to the icon has in impress/draw an different space compare to writer/calc. The reason is that in impress/draw there is the sorter toolbar.
This patch will remove the impress/draw specific case. There is no reason that the space is different compare to writer/calc

Signed-off-by: Andreas-Kainz <kainz.a@gmail.com>
Change-Id: I0c8155429052851d082e847b2f59ec5efe04e3c8
2021-05-28 08:42:10 +02:00
Andreas-Kainz
9b652a5e4d CSS color-palette vars are within a separate css file
move loleaflet.css .root color varaibles into a separate color-palette.css file so all var colors are at a dedicated file and branding is easier.

Signed-off-by: Andreas-Kainz <kainz.a@gmail.com>
Change-Id: I6fe879fbb09e2d5170c028820974bdda0466805d
2021-05-24 13:40:20 +02:00
Andreas-Kainz
d1bbb6adad Notebookbar.css var color update
add --white-bg-color so that there will be also a dark notebookbar background possible
use as much var as possible. some values are still fixed, but when I don't know where the color was used, I didn't change anything.

Signed-off-by: Andreas-Kainz <kainz.a@gmail.com>
Change-Id: I1e7f95021e687329560b5df1d0fd17bf0d391d0a
2021-05-19 16:35:54 +02:00
andreas kainz
77a122b88a Notebookbar Draw use branding color yellow0
text, spreadsheet and presentation use branding colors
with this PR also drawing use the branding color
compare to yellow1 drawing use yellow0 for better contrast

Signed-off-by: andreas kainz <kainz.a@gmail.com>
Change-Id: Ie3e3862bdc868c060d631b677ebe014adbc76a38
2021-05-05 00:58:11 +02:00
Pedro Pinto Silva
2f1eb41842 Writer: Improve table controls (markers)
- Do not use big rectangles as markers
  - it hides surrounding content
	- too intrusive (since it appears every time we select a table)
- Use smaller discreeter elements WHILE maintaining the existing
  active zone size (so it's still easy to click it, no need to be precise)
- Add missing hover status
  - Create new SVG plus add rounded corners
- Treat column and row marker as different elements
  - Use one generic class + add another for each type (element modifier)
	- So we can target each one and have a nice center line
	no matter the disposition (vertical, horizontal)

note: motivated by the reported issue:
https://github.com/CollaboraOnline/online/issues/1297

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I4d997864e99582f74411a12c33381a926fd47a05
2021-04-12 17:48:22 +02:00
Pedro Pinto Silva
4fe8619a7a Impress: Fix #presentation-toolbar on chrome
- Make sure width doesn't get above the available space
- Do not force scrollbar when there is no content to scroll
  - use visible (default): implicitly compute to auto

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ib7b6b15dcf093d6172a35346679a7985584f4ef9
2021-04-09 12:27:12 +02:00
Pedro Pinto Silva
bcc0df4b78 Draw and Impress: fix slide sorter
- Fix positions and backgrounds
- Draw: no need to hide presentation controls anymore (was affecting position)
- Make sure scroll bar is not getting different styles from browser thus affecting position
  - happening on FF

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I479cf7d01023ffc611a3cfa6a5fb90fb0dbda1d7
2021-04-06 15:40:18 +02:00
Pedro Pinto Silva
0c6bf9c28c CSS var: Add one more gray and replace instances
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I8091ebd6e720dba8b6af4c503f515899e7f5f2d1
2021-03-25 17:24:57 +01:00
Szymon Kłos
9f04584ee3 ie11: can't use css vars
IE11 doesn't support custom css vars so we values
were not read. use standard properties instead.

Change-Id: I3d1ccd74cc54a048e30431d162b5b80a49b5e06f
Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
2021-03-19 16:42:36 +01:00
Rash419
f166270801 loleaflet:changed cursor in row/column header and four-arrow icon in table impress
Signed-off-by: Rash419 <rasheshpadia419@gmail.com>
Change-Id: Iab2e4d6fc7012fb7e68782ac49f2b81dc2476970
2021-03-19 21:01:09 +05:30
Pedro Pinto Silva
e61a2bf7bd loleaflet: iPad: insert comment: Fix textarea static Width
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I440d113e54376ceed17a929e850763d9ae2e38be
2021-03-15 13:56:00 +01:00
Pedro Pinto Silva
01c0fbd573 Sidebar: panelContainer is being set without height #1322
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I2c6421b34cd6c2345981008dd1bbee494bc13ca2
2021-03-15 13:56:00 +01:00
Pedro Pinto Silva
a1134c8cd9 Mobile: Comment (annotation) layout improvements with grid
- Position the number of replies near to the chevron to indicate what
that is supposed to do.
- Reply counter gets the same color as its icon

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Idd692f40f5f3420d7577147e8ca7bcf306e59899
2021-03-10 16:44:36 +01:00
Dennis Francis
5520029712 make CSplitterLine be based on CRectangle
When it was based on CPolyline and using lineWidth (weight) we get semi
transparent pixels on the edges of the line. By using a rectangle and
relying on just the fill (and not on stroke) we get sharp pixels.

Signed-off-by: Dennis Francis <dennis.francis@collabora.com>
Change-Id: Icddb8e37cdb2e30ac9e7e11305bb2c534069b295
2021-03-04 15:06:02 +05:30
Dennis Francis
c6db2a26ad splitters: source style data from css variables
Signed-off-by: Dennis Francis <dennis.francis@collabora.com>
Change-Id: I87a7f9fc242ab4a55b6f1a210f8f74f9871cbf3f
2021-03-04 15:06:02 +05:30
Gökay Şatır
1bf9a9a9e9 scroll-container: Remove references.
This class was used by mCustomScrollBar.

Signed-off-by: Gökay Şatır <gokay.satir@collabora.com>
Change-Id: Id912677c3fa2cfdfa6cd5824975d8630ec6a2ac7
2021-03-03 14:04:11 +03:00
Dennis Francis
c477faea45 source cursor/selections style data from CSS vars
Signed-off-by: Dennis Francis <dennis.francis@collabora.com>
Change-Id: Ib650ba60d38ab390ae37c3bf24e24b820bd4221e
2021-02-11 14:26:01 +05:30
Gökay Şatır
f33f24c16c CanvasTileLayer: Canvas is moved outside of "map" div.
Canvas element's drawings will include part of UI outside of map area. Its size should be larger than tilelayer's and map's sizes.

Signed-off-by: Gökay Şatır <gokaysatir@collabora.com>
Change-Id: I89bf79ccfe0240abdb031b937626b0bb81f3ed6f
2021-01-25 11:53:59 +03:00
Rash419
8ea0437e7e added number of replies count in rootComment
Signed-off-by: Rash419 <rasheshpadia419@gmail.com>
Change-Id: Icaee65c55529be677929754e61ee81ff22b01348
2020-12-15 17:04:47 +05:30
Pedro Silva
56e2b1dc28 Sidebar: avoid using two sidebars by fixing bottom position
- set a fixed bottom position only when on calc (due to tabs)

Signed-off-by: Pedro Silva <pedro.silva@collabora.com>
Change-Id: I9f98cdc65e83c06da814fe7b89b43ebbe6760f40
2020-11-26 16:12:51 +01:00
Pedro Pinto Silva
993aed9180 Loleaflet: contextMenu: Fix submenu style and arrow on hover
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Id4a1c4c61b433108b30e348ee1c6573e2fa1f509
2020-11-10 13:02:04 +01:00
Pedro Pinto Silva
081b503a10 Loleaflet: contextMenu: Fix single action entry style
E.g.: right click; paste (single entry with action) was not changing color

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ib3889859f4210ac01a1c308ac15e383a511aa067
2020-11-10 13:02:04 +01:00
Pedro Pinto Silva
46446f2dd4 Tooltips: improve upon PR #513, plus add rule-only css
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I2a6868e25ceddc9a6f5d383e6ecf41836ecdfc28
2020-11-09 16:18:38 +01:00
Pedro Pinto Silva
869ae7fb97 Fix unusual tooltip styles...
- Annotations: 3 dot menu tooltip
- Ruler: left/right margin tooltip
- follow the same rules as everywhere else (from jquery-ui-lightness file)

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ia2dbe80e6550641e58c013679382de29bb0991ef
2020-11-04 18:45:50 +01:00
Pedro Pinto Silva
eee430a4ef Fixes issue 237
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I2c05bfc1a8906d6b67e3736174132e5cac9d0052
2020-11-03 13:24:21 +01:00
Pedro Pinto Silva
9b352038f2 Document name input: Add label, hide it but make sure screen readers can use it
Change-Id: I7f1d0c248829c61726f0083cfc6196fd20066c4c
2020-10-07 10:17:40 +02:00
Pedro Pinto Silva
d42e41ce04 leaflet: cursor: bucket-cursor: fix inconsistencies
use similar asset as the icon that triggers it:
- so we have a paintbrush icon that triggers also a paintbrush cursor (instead of a bucket)
- and adjust position accordingly

Change-Id: I2fa84f0a961e5a98de6fe8fc34c14ccac63344d0
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102382
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-09-10 16:52:02 +02:00
Pedro Pinto Silva
bef32043d6 CSS lint: add more rules and fix problems
- Fix duplicated properties (ignore cases where it's needed
for browser compatibility);
- Fix space inconsistencies before !
- Fix space inconsistencies after colon
- Fix space inconsistencies after and before combinator (>, +, ~)
- Invalid calc
- Many rules added to json, namely no-extra-semicolons

Change-Id: I78af6bc546aeb1d7d7090e2ef278c895f0393a07
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102289
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-09-09 11:48:31 +02:00
Pedro Pinto Silva
175ac6e740 CSS lint: Code refactoring
- Detected many duplicated selectors within the same file (squashed them)
- Detected inconsistency (sometimes spaces sometimes tabs). Tabify as in JS.
- Detected quotes' inconsistency (sometimes none, sometimes '', sometimes ""). Use '' as in JS
- Avoid touching on files from 3rd party sources (jquery, w2ui), ignore files

Change-Id: Idd82945f29ac6c5c9f522e5d5df4a783a367654d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102009
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-09-08 17:02:30 +02:00
Pedro Pinto Silva
79d99156dc leaflet: cursor: bucket-cursor fix alignment
Change-Id: Iafe8dea3d379b6c1fe9241063bab4ab4b7c17e8e
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102247
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-09-08 14:34:46 +02:00
Szymon Kłos
ab53fcbca1 Fix blinking cursor
Change-Id: I723dcfc06e07d3d5a83e64eee812d3084dc8378c
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101728
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Szymon Kłos <szymon.klos@collabora.com>
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101822
Tested-by: Jenkins
2020-09-01 11:55:04 +02:00
Szymon Kłos
bb015fe41e Don't allow to open multiple dialogs
and blink active dialog to inform user that he needs
to close dialog first...

Change-Id: I6c9ee662ae2ab935f03ee8fdd0cf7327703e2170
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100457
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101820
Tested-by: Jenkins
Reviewed-by: Szymon Kłos <szymon.klos@collabora.com>
2020-09-01 11:54:25 +02:00
Pedro Pinto Silva
1c4dcc1f58 Document Name Input: make it flexible (dynamic width) and
* convert var colors to rgb
* use the var colors for shadow + alpha (rgba)
* .document-title container: remove table display and add min width

Change-Id: Id4289af91562790edd23c83d4e70a16688e44fe3
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101048
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-08-25 12:55:50 +02:00
Pranam Lashkari
cb5e5b3e50 leaflet: changing cursor according to objects selected
text cursor only if cursor is visible
appropriate cursor for drag markers
move cursor for selected object

Change-Id: If750ac91fc870a0d730d4455c51bde0423c55e4a
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98425
Tested-by: Andras Timar <andras.timar@collabora.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>
2020-08-20 09:55:19 +02:00
gokaysatir
745f4a5287 leaflet: truncate long links in the popup
Change-Id: I82ab8d35e0c57aa82b130a89d0d4c7b3ba0b50e6
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100547
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Aron Budea <aron.budea@collabora.com>
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101020
Tested-by: Jenkins
Reviewed-by: Andras Timar <andras.timar@collabora.com>
2020-08-19 21:40:53 +02:00
gokaysatir
091df95ac1 loleaflet: Wrap long words on hyperlink open dialog.
Change-Id: I944b2314c766f7e3f7f313a5afea3b022b637c05
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100416
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
2020-08-11 16:13:56 +02:00
Szymon Kłos
0f1b05bf8b Center progressbar using css
Simplify progressbar code and center it using
css instead of JS code.

Change-Id: Ie5877dcbc0614b889f436cc598c7069fda135a3d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99600
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Szymon Kłos <szymon.klos@collabora.com>
2020-07-29 11:27:50 +02:00
Pedro Pinto Silva
a8db0d749f Notebookbar: Fix tab shadow so it does bleed out when collapsed and
* increase distinction between disabled and enabled buttons,
* make the Selected buttons to use the same main blue color
* make the Selected buttons with text to change their text color as well
* Use --gray-bg-color across all files

Change-Id: I50b8ab86216211de37ef6c4d2b2c6baddc783ae7
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99349
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-07-24 11:01:10 +02:00
Pedro Pinto Silva
515fee128b Notebookbar: styling
- Overall styling
- Fix tab’ alignment and paddings
- Fix tabs’ states
- Make use of text-shadow to emphasize instead of changing font-weight in order to avoid changes in size
- Add document-type class in notebookbar (similar to what I did for menubar)
- Style jquery-ui tooltips
- Style .unolabel
- Start to use css --var for font and colors (still no changes in the code per sea [like reducing the values etc] just start using it)
-- add comments
-- Use it depending on doc-type for notebookbar tab unolabel
- Add missing icons
- Fix extra border (toolbar-wrapper)
- Add document-header

Change-Id: I24552b118657d8ead47a74a6d189bd2448aac808
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98721
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
2020-07-20 09:35:25 +02:00
gokaysatir
e0a27002f0 loleaflet: sidebar overlap issue.
Change-Id: Iff2184725c49c24900865d9865237e9747a050cb
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98555
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Tested-by: Henry Castro <hcastro@collabora.com>
Reviewed-by: Henry Castro <hcastro@collabora.com>
2020-07-16 00:19:50 +02:00