Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility: change table layout in toolbar #8587

Merged
merged 6 commits into from May 2, 2024
Merged

Accessibility: change table layout in toolbar #8587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e892687
Change table layout to CSS base table structure
Darshan-upadhyay1110 Mar 20, 2024
0a24589
Adjust table elements for mobile view.
Darshan-upadhyay1110 Mar 20, 2024
b4d08ae
Mobile: remove legacy hamburger (opened state) rules (css refactor)
pedropintosilva Mar 28, 2024
5629c06
Mobile: Hamburger and back btn: Fix height after table to div
pedropintosilva Mar 28, 2024
133addb
Fix calc-mobile top toolbar and formula bar which are broken
pedropintosilva Mar 28, 2024
e96e22d
Fix toolbar up section after w2ui rework
Darshan-upadhyay1110 Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions browser/css/cool.css
View file
Open in desktop
Expand Up @@ -325,6 +325,8 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
z-index: 11 !important;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-background-lighter);
display: flex;
flex-direction: column;
}
#toolbar-wrapper:not(.mobile) {
padding: 3px 0;
Expand Down
19 changes: 12 additions & 7 deletions browser/css/device-mobile.css
View file
Open in desktop
Expand Up @@ -15,13 +15,11 @@ html[dir='rtl'] .sub-menu-arrow {
/* Related to cool.css */
#toolbar-hamburger {
width: 36px;
height: 36px;
height: 42px;
position: relative;
z-index: 1002;
}
#toolbar-hamburger.menuwizard-opened {
width: 36px;
height: 36px;
display: flex;
align-items: center; /* Align items vertically */
}

.logo {
Expand All @@ -39,8 +37,7 @@ html[dir='rtl'] .sub-menu-arrow {

/* Related to back button */
#toolbar-mobile-back {
width: 36px;
height: 36px;
width: 42px;
position: relative;
z-index: 1003;
}
Expand Down Expand Up @@ -170,6 +167,12 @@ textarea.cool-annotation-textarea {
#toolbar-wrapper.mobile{
border-top: none;
z-index: auto !important;
flex-direction: column;
}
.toolbar-row {
display: flex;
flex-direction: row;
height: 38px !important;
}

.insertshape-grid {
Expand All @@ -185,6 +188,7 @@ textarea.cool-annotation-textarea {
padding-top: 0px;
padding-bottom: 0px;
background: transparent;
align-self: end;
}
nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolbar {
border-color: transparent;
Expand All @@ -210,6 +214,7 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
#formulabar {
padding: 0px !important;
border-top: 1px solid #bbbbbb !important;
margin-bottom: 5px;
}
#formulabar > div > div {
grid-template-columns: 70px auto;
Expand Down
4 changes: 4 additions & 0 deletions browser/css/notebookbar.css
View file
Open in desktop
Expand Up @@ -179,6 +179,10 @@ button.ui-tab.notebookbar {
z-index: 11;
}

#toolbar-row {
height: 74px;
}

.vertical.notebookbar {
width: max-content;
display: grid;
Expand Down
6 changes: 5 additions & 1 deletion browser/css/toolbar.css
View file
Open in desktop
@@ -1,6 +1,6 @@
#toolbar-up {
z-index: 11;
height: 38px;
align-self: center;
}

#document-name-input-loading-bar {
Expand Down Expand Up @@ -247,6 +247,10 @@ w2ui-toolbar {
top: 3px;
}

.main-nav:not(.hasnotebookbar) ~ #toolbar-wrapper .toolbar-row {
height: 42px;
}

/* center the toolbar */
#tb_presentation-toolbar_item_left {
width: 50%;
Expand Down
29 changes: 14 additions & 15 deletions browser/html/cool.html.m4
View file
Open in desktop
Expand Up @@ -201,21 +201,20 @@ m4_ifelse(MOBILEAPP,[true],
</div>
</nav>

<table id="toolbar-wrapper">
<tr>
<td id="toolbar-logo"></td>
<td id="toolbar-mobile-back" class="editmode-off"></td>
<td id="toolbar-up"></td>
<td id="toolbar-hamburger">
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon" id="main-menu-btn-icon"></span>
</label>
</td>
</tr>
<tr>
<td colspan="4" id="formulabar" style="display: none"></td>
</tr>
</table>
<div id="toolbar-wrapper">
<div id="toolbar-row" class="toolbar-row">
<div id="toolbar-logo"></div>
<div id="toolbar-mobile-back" class="editmode-off"></div>
<div class="jsdialog ui-spacer"></div>
<div id="toolbar-up"></div>
<div id="toolbar-hamburger">
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon" id="main-menu-btn-icon"></span>
</label>
</div>
Comment on lines +210 to +214
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As another follow up we should probably simplify this to have just a simple button with icon

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please prepare only after my PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

</div>
<div colspan="4" id="formulabar" style="display: none"></div>
</div>

<input id="insertgraphic" aria-labelledby="menu-insertgraphic" type="file" accept="image/*" style="position: fixed; top: -100em">
<input id="selectbackground" aria-labelledby="menu-selectbackground" type="file" accept="image/*" style="position: fixed; top: -100em">
Expand Down