218583ce22
The input field is already being hidden for mobile. For Tablet and
with the increased amount of UI elements on the top bar best to hide
it also. Renaming the document is a quite rare used action when
compared to any of the other top bar actions (switching tabs, open
sidebar etc). Better to hide the #document-name-input when on tablets
instead of trying to fit everything (and end up obstructing tabs for example)
Tablet user can always:
- Use the integration (already used to do many other file manipulations) to rename the file
- Use the in-app Save as can still be used to save a copy of the current
document with a different name
----
Possible future improvements would be to add the possibility to rename
the file when using a tablet:
- Add menu entry and tabbed view button
- Control.Menubar.js something like {name: _('Rename Document'), id: 'renamedocumentbtn'}
- Control.NotebookbarWriter.js add bigtoolitem Rename Document
- Maybe in Control.UIManager.js add a renameDocumentBtn function that
- Creates a JSDialog with document-name-input element + Cancel btn +
OK btn
- Ideally that input element would re-use the functionality from L.control.documentNameInput() -> Control.DocumentNameInput.js
Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I968e806a4a9e0018b38b87fc249a57e5af099c78
139 lines
3 KiB
CSS
139 lines
3 KiB
CSS
/* CSS specific for tablets. */
|
|
|
|
/* Disable tooltips when on touch devices */
|
|
.w2ui-tag .w2ui-tag-top {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Make the upper toolbar scrollable using swipe as on phones. */
|
|
#toolbar-up > .w2ui-scroll-wrapper {
|
|
overflow-x: scroll !important;
|
|
scrollbar-width: none; /*css draft (firefox only)*/
|
|
-ms-scrollbar: none; /*ie*/
|
|
}
|
|
#toolbar-up > .w2ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
|
|
display: none;
|
|
}
|
|
#toolbar-up .w2ui-scroll-left, #toolbar-up .w2ui-scroll-right{
|
|
background: none;
|
|
height: 100%;
|
|
width: 0px;
|
|
top: 0%;
|
|
box-shadow: 8px 0 13px 2px var(--color-primary), -6px 0px 6px 6px var(--color-primary);
|
|
border-radius: 0px;
|
|
}
|
|
#toolbar-up .w2ui-scroll-right{
|
|
right: 0;
|
|
-webkit-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Additions for the main menu. */
|
|
.main-nav {
|
|
margin: 0;
|
|
}
|
|
.main-nav.hasnotebookbar {
|
|
overflow: visible; /*make sure #Menubar's contents are visible*/
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
flex-direction: row;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
}
|
|
.hasnotebookbar{
|
|
overflow: auto hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.hasnotebookbar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.cool-annotation-img {
|
|
box-sizing: content-box !important;
|
|
}
|
|
|
|
/* pan tabs & overflow indicator */
|
|
|
|
.notebookbar-tabs-container > div {
|
|
white-space: nowrap;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1 0 auto;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.notebookbar-tabs-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.notebookbar-tabs-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-pack: start;
|
|
-webkit-justify-content: flex-start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
-webkit-overflow-scrolling: touch;
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
-ms-autohiding-scrollbar: none;
|
|
scrollbar-width: none;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
word-wrap: nowrap;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar .notebookbar-tabs-container {
|
|
display: none;
|
|
}
|
|
|
|
.hasnotebookbar #document-titlebar {
|
|
position: static;
|
|
display: inline-flex;
|
|
margin: 0 32px 0 4px;
|
|
width: auto;
|
|
}
|
|
|
|
.main-nav:not(.readonly) #document-name-input {
|
|
display: none;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar #document-titlebar {
|
|
width: auto;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar #document-name-input {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.main-nav.readonly.hasnotebookbar #document-title-pencil {
|
|
min-width: var(--btn-size);
|
|
margin: 0;
|
|
}
|
|
|
|
#coolwsd-version span:before,
|
|
#lokit-version > span:before {
|
|
content: ' (';
|
|
white-space: pre;
|
|
}
|
|
#coolwsd-version span:after,
|
|
#lokit-version > span:after {
|
|
content: ')';
|
|
}
|