Skip to content
Snippets Groups Projects
Commit 18e8748d authored by Tögl, Christina's avatar Tögl, Christina
Browse files

Change styling of breadcrumb menu and scrollbar position

parent 591add20
No related branches found
No related tags found
No related merge requests found
......@@ -65,6 +65,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
this.isInFilteredRecent = false;
this.isInRecent = false;
this.userName = '';
this.menuHeightBreadcrumb = -1;
this.menuHeightAdditional = -1;
this.boundCloseBreadcrumbMenuHandler = this.hideBreadcrumbMenu.bind(this);
this.initateOpenBreadcrumbMenu = false;
......@@ -1909,7 +1911,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
shortcrumb[0] = htmlpath[0];
shortcrumb[1] = html`<span> › </span>
<span class="breadcrumb">
<a class="extended-breadcrumb-link" @click="${() => { this.toggleBreadcrumbMenu(); }}" title="TODO"><dbp-icon name="more-filled" class="more-filled"></dbp-icon></a>
<a class="extended-breadcrumb-link" @click="${() => { this.toggleBreadcrumbMenu(); }}" title="TODO">. . .</a>
<div class="breadcrumb-menu"><ul class='extended-breadcrumb-menu hidden'>${path_temp}</ul></div>
</span>`;
......@@ -1933,15 +1935,28 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
menu.classList.toggle('hidden'); //sets hidden or removes it
// computations for overflow - begin
if (this.menuHeight === -1) {
this.menuHeight = menu.clientHeight;
if (this.menuHeightBreadcrumb === -1) {
this.menuHeightBreadcrumb = menu.clientHeight;
console.log("menuheight: ", this.menuHeightBreadcrumb);
}
let topValue = menuStart.getBoundingClientRect().bottom;
let isMenuOverflow = this.menuHeight + topValue >= window.innerHeight ? true : false;
let isMenuOverflow = this.menuHeightBreadcrumb + topValue >= this._('.wrapper').offsetHeight ? true : false; //replaced window.innerHeight
console.log("modal.offsetHeight: ", this._('.wrapper').offsetHeight);
console.log("menuoverflow: ", isMenuOverflow);
console.log("menu height: ", this._('.nextcloud-nav').offsetHeight);
//set max-width to window with
let maxWidth = this._('.wrapper').offsetWidth;
console.log ("offsetWidth", maxWidth);
let actualHeight = this._('.wrapper').offsetHeight - this._('.nextcloud-nav').offsetHeight;
console.log("actual height: ", actualHeight);
if (isMenuOverflow && !menu.classList.contains('hidden')) {
menu.setAttribute('style', 'position: fixed;top: ' + topValue + 'px;bottom: 0;border-bottom: 0;overflow-y: auto;');
menu.setAttribute('style', 'position: fixed;top: ' + topValue + 'px;height: ' + actualHeight + 'px;max-width: ' + maxWidth + 'px;overflow-y: auto;'); //TODO do we want border-bottom = 0 and bottom: 0?
menu.scrollTop = 0;
document.body.setAttribute('style', 'overflow:hidden;');
} else if (isMenuOverflow && menu.classList.contains('hidden')) {
......@@ -1991,12 +2006,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
menu.classList.toggle('hidden'); //sets hidden or removes it
// computations for overflow - begin
if (this.menuHeight === -1) {
this.menuHeight = menu.clientHeight;
if (this.menuHeightAdditional === -1) {
this.menuHeightAdditional = menu.clientHeight;
}
let topValue = menuStart.getBoundingClientRect().bottom;
let isMenuOverflow = this.menuHeight + topValue >= window.innerHeight ? true : false;
let isMenuOverflow = this.menuHeightAdditional + topValue >= window.innerHeight ? true : false;
if (isMenuOverflow && !menu.classList.contains('hidden')) {
menu.setAttribute('style', 'position: fixed;top: ' + topValue + 'px;bottom: 0;border-bottom: 0;overflow-y: auto;');
......@@ -2039,9 +2054,19 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getRadioAndCheckboxCss()}
${fileHandlingStyles.getFileHandlingCss()}
.extended-breadcrumb-menu li a {
max-width: none;
display: inline;
}
.breadcrumb.extended-breadcrumb-link a {
display: contents;
.nextcloud-nav { /** sticky header **/
position: absolute; /** relative **/
width: 100%;
}
.nextcloud-header {
padding-bottom: 10px;
height: 33px; /** TODO verify or change **/
}
.breadcrumb-menu {
......@@ -2051,12 +2076,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.extended-breadcrumb-menu li {
padding: 7px;
padding-right: 46px;
overflow: hidden;
}
.extended-breadcrumb-menu li.active {
background-color: var(--dbp-dark);
color: var(--dbp-light);
}
.extended-breadcrumb-menu li.active a:hover {
color: var(--dbp-light);
}
......@@ -2067,16 +2094,14 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
cursor: default;
}
.extended-breadcrumb-menu a {
padding: 8px;
}
.extended-breadcrumb-menu {
list-style: none;
border: black 1px solid;
position: absolute;
background-color: white;
z-index: 1000;
/** display: grid; **/
/** max-width: 87.5%; TODO does not work everywhere, find a better solution **/
}
.extended-breadcrumb-menu a:hover {
......@@ -2197,7 +2222,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.nextcloud-header {
margin-bottom: 2rem;
/**margin-bottom: 2rem;**/
display: inline-grid;
width: 100%;
grid-template-columns: auto auto;
......@@ -2287,7 +2312,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.additional-menu {
white-space: nowrap;
height: 33px;
margin-right: 10px; /** 5px */
/** margin-right: 10px; 5px */
}
.nextcloud-nav p {
......@@ -2391,10 +2416,6 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
background-color: white;
}
.nextcloud-nav {
position: relative;
}
.inline-block {
position: absolute;
right: 0px;
......@@ -2520,6 +2541,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
@media only screen
and (orientation: portrait)
and (max-width: 768px) {
.breadcrumb .extended-breadcrumb-menu a {
/** overflow: visible; **/
display: inherit;
}
.additional-menu button {
float: right;
}
......@@ -2527,13 +2554,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.additional-menu {
position: absolute;
right: 0px;
margin-right: 10px;
/** margin-right: 10px; **/
}
/* .nextcloud-nav {
display: block; TODO verify if this is enough
} */
.additional-menu {
position: inherit;
}
......@@ -2562,6 +2585,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.nextcloud-nav a {
font-size: 1rem;
/** max-width: max-content; **/
}
.nextcloud-nav .home-link {
......@@ -2705,7 +2729,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</div>
</div>
<div class="nextcloud-content ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-header ${classMap({hidden: !this.isPickerActive})}">
<div class="nextcloud-nav">
<p>${this.getBreadcrumb()}</p>
......@@ -2753,6 +2777,9 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
</ul>
</div>
</div>
</div>
<div class="nextcloud-content ${classMap({hidden: !this.isPickerActive})}">
<div class="table-wrapper">
<table id="directory-content-table" class="force-no-select"></table>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment