Initially we had only a simple text label with an outline but due to
user feedback we end up increasing its contrast and displaying the input
field outline as a box plus adding an icon so to emphasize that it's
possible to edit the document. See this for context:
https://github.com/CollaboraOnline/online/issues/2310
Since this feature is not new to our user base:
This change aims to
- Fix some quirkiness of that component (too heavy element floating
in the toolbar)
- Getting rid of pencil icon inside of input field
- Which avoid problems in responsive mode (cropping pencil icon) and
- helps to use the space more efficiently
- Helps users understanding that we are still in presence of something
more than a simple static label
- by keep it with a white background and with a hover state
- Improves look and feel
- Use the same size as used for tabs
- Use app color
- Use rounded corners so to appear less bulky
- and so it looks like the title of the window (text centered aligned)
- on hover shows shadow (is clickable)
- on focus text is left aligned and outline appears, showing that
is ready for accepting key strokes
- Also changes on device-tablet.css fixes
- cropped or juxtaposition of document name and close button
- easier to interact with the document name input field on a tablet
- This affects both Notebookbar and Classic mode
- When in classic mode use the same font-size as the neighboring
elements (10pt)
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Iff17b32bf9cf95968fdb387de856b377a23a116a
We cannot use jQuery.get (a.k.a. $.get) in the mobile apps as that
uses some XMLHttpRequest thing that obviously won't work when there is
no web server involved, but loleaflet.html has been loaded from a
file: URL. Simply store the help file into a global variable and use
that instead.
A small refactoring of the showHelp function was needed to factor out
the call of vex.open into a separate function. That is called directly
from showHelp in the mobile app case. Otherwise, it is called from a
short function passed to $.get, as before.
Note that in the mobile apps we cannot use window.open (which in the
mobile apps has been redefined to send a "HYPERLINK <url>" message to
the native app code) to open the help file, because the HYPERLINK
message is for opening a web page in a browser, completely separately
from the app. It is used to display the commit log for the Help>About
functionality.
And anyway, the old idea (that didn't work) to take a shortcut in the
mobile app case and just display the help file in showHelp will not
work anyway as we need the code that edits the contents before it is
displayed, and handles the close button in the help file.
This fixes https://github.com/CollaboraOnline/online/issues/400
This fixes https://github.com/CollaboraOnline/online/issues/401
Change-Id: I16dc960f26af7e6e89663c3ac0523ce5c3d41c34
Signed-off-by: Tor Lillqvist <tml@collabora.com>
Remove "spreadsheet-row-column-frame" div. Since row & column headers and groups are drawn onto the same canvas with tiles, that div shouldn't exist.
Signed-off-by: Gökay Şatır <gokaysatir@collabora.com>
This will enable notebookbar for tables
smaller devices will continue on classic mode
Change-Id: Ib74b8a0ad161d83300d807fff1fd8b3ffba11399
Signed-off-by: mert <mert.tumer@collabora.com>
Often loleaflet.html is loaded via POST requests. This
new sample demonstrates and exercises this approach and
is a handy way to load documents.
Change-Id: I065a946413ab08d399ac5704c67f6f1ba37bdd9e
Signed-off-by: Ashod Nakashian <ashod.nakashian@collabora.co.uk>
This should make this sample much more useful by documenting
the proper usage and helping the user avoid common pitfalls.
Change-Id: I965bed0e4ab685dd2a68f7b246dd9a409d296337
Signed-off-by: Ashod Nakashian <ashod.nakashian@collabora.co.uk>
3rd party cookies or localstorage can be blocked
on the browser settings, especially is on chrome incognito
mode. This causes the document fail to load.
Change-Id: Ia2a182262a754c76aec58cbbce60a0298320df33
Signed-off-by: mert <mert.tumer@collabora.com>
This adds the infrastructure to be able to pass the info which elements
like the statusbar / ruler / sidebar are supposed to be shown or hidden
on startup of the editor.
Change-Id: I188264dec6961074444934ff5fd7088e23b170d4
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/103169
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Mert Tumer <mert.tumer@collabora.com>
- to be displayed after the toolbar appears
- only when it's possible to edit the name of the document
- only when not in presence of android app and hidden (display: none) by default so it does show up before input field
Change-Id: I5c78593b1229da1682832a46e6fc8f1b09b31e12
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102675
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
This is a quite complicated change that should both fix tdf#133284
(cursor keys on a hardware keyboard do not work in a spreadsheet
document) and also improve the interaction with
CollaboraOnlineWebViewKeyboardManager that manages the on-screen
keyboard. We need to jump through complicated hoops in order to get
the hardware cursor keys handled right after loading a spreadsheet
document.
In the CollaboraOnlineWebViewKeyboardManager case we try harder to
keep loleaflet's _textArea buffer in sync with what the UITextView in
CollaboraOnlineWebViewKeyboardManager uses to provide suggestions
above the on-screen keyboard.
Also merges in related changes from today to
CollaboraOnlineWebViewKeyboardManager.
Change-Id: Ic4acb54bd4e815aa8bfb2bf40b08493446ae5ab0
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101878
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
* 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>
There has apparently been confusion with the unrelated
Window.postMessage() method.
Do it for the iOS app case but presumably the same can be done for the
Android app case, too.
Change-Id: Iabb259b618426cbbb9f4ed2a9a97ad907bc09c39
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100773
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
Instead, set brandProductName from the MOBILEAPPNAME. Now the mobile
app name shows up in the progress bar.
This reverts commit 24a0c7c3dc.
Change-Id: I91c7ea3d21f5362fc6a4d777b041089413e921ee
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98205
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Tested-by: Jenkins
Reviewed-by: Tor Lillqvist <tml@collabora.com>
Can be changed:
* configure --with-app-name
* brandProductName in loleaflet/dist/branding.js
When there is no brandProductName defined, this message will
appear in About box:
"The Personal edition is supported by volunteers and
intended for individual use."
Change-Id: Iec5aa2df7e734bdbc1dd8037656334f0016a7a82
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/97837
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>
This allows us to re-direct web traffic via a proxy quite simply
during fetch, instead of changing the service root.
Change-Id: I28d348467e48394d581fca4da4c199348a2ca8e0
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92804
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
Now we have window.enableWelcomeMessage on the JS side to avoid any
queries at all when the feature is disabled.
Change-Id: I8420089f775bfbf5bcd557c7c720172fbce8c22e
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/92338
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
Besides, the loleaflet.html isn't passed through any file server that
would replace it anyway.
Change-Id: Ie8c4a58d83e697d441b9a34236092fe3240a7e25
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91931
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
(So that it is easier to copy them freshly in the configure script.)
Change-Id: Ib8210850abcb259cb6be7ff0d708de0cf05c135d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91838
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
The problem is that the @media-based detection often disagrees with the
JS-based detection which then leads to many problems - most notably that
part of the UI behaves as if it was a tablet, and the other part as if
was a mobile phone, leading to a terrible user experience.
This commit changes it so that there is only one way how to detect if
we are on mobile phone, tablet or desktop: using the JavaScript, and we
will load the appropriate css accordingly.
Only one @media-based rule is converted as an example, the rest will
follow.
Change-Id: Id7bfb58ca12264904b3329db1542ae6b54893f11
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91416
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tamás Zolnai <tamas.zolnai@collabora.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
So that the browser can cache the large css, instead of loading it anew
each time we are loading loleaflet.html.
Change-Id: I322bf9d62e4c899dbeffbca52aca83b6cd427ce4
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91415
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
Revert more of b62dcc0255, and also
revert 418181411f.
Now I seem to get a visualViewport with scale 1 and width 768
consistently, which is a relief.
Change-Id: Ia619a51047dd2a05ba32d6a203c3095198d3b4d5
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91436
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
This seems to make the w2ui-scroll-right button appear every time, as
expected, on my 9.7" iPad Pro running the latest iPadOS. I don't fully
understand why and how, though... (It used to appear only maybe a
third of the times when one opened a text document.)
My naïve expectation would have been that having maximum-scale=1.0,
minimum-scale=1.0 in the viewport meta tag would have caused the
visualViewport object's scale attribute to be 1, and its width x height
to be 768 x 1024, i.e. exactly the same as the CSS pixel size,
screen.width x screen.height. Or at least that visualViewport.width
would have been 768. But no. visualViewport.scale is now *either*
0.9481481313705444 or 0.9733840227127075, with width x height being
correspondingly either 810 x 1059 or 789 x 1031.
Note that scale * width in both cases *does* equal the CSS pixel
width, 768. Presumably in the height direction it excludes the status
bar (the one with time, date, mobile data, WiFi, and battery state).
This change fixes the problem only in the iOS app on iPad, though, not
in Safari on iPad, against a "make run". (No idea whether the issue
with the missing w2ui-scroll-right button is even reproducible in the
Android app or in an Android browser on an Android tablet.)
Change-Id: I0735d0a79bdfe31775f694e11b3215e784ebd798
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91410
Tested-by: Tor Lillqvist <tml@collabora.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
