Skip to content

Commit

Permalink
Merge pull request #6187 from nextcloud-libraries/fix/rtl/NcAppSidebar
Browse files Browse the repository at this point in the history
fix(NcAppSidebar): RTL support
  • Loading branch information
hamza221 authored Nov 5, 2024
2 parents 9fd3d56 + ba66cc6 commit e2128f0
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions src/components/NcAppSidebar/NcAppSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1284,14 +1284,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation

z-index: 1500;
top: 0;
right: 0;
inset-inline-end: 0;
display: flex;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
flex-shrink: 0;
height: 100%;
border-left: 1px solid var(--color-border);
border-inline-start: 1px solid var(--color-border);
background: var(--color-main-background);
// Make close button positioned relative to the header
position: relative;
Expand All @@ -1309,7 +1309,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
position: absolute;
z-index: 100;
top: $top-buttons-spacing;
right: $top-buttons-spacing;
inset-inline-end: $top-buttons-spacing;
width: var(--default-clickable-area);
height: var(--default-clickable-area);
opacity: $opacity_normal;
Expand Down Expand Up @@ -1337,26 +1337,26 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
flex: 0 0 auto;
}
.app-sidebar-header__desc {
padding-left: 0;
padding-inline-start: 0;
flex: 1 1 auto;
min-width: 0;
padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
padding-inline-end: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
padding-top: var(--app-sidebar-padding);

&.app-sidebar-header__desc--without-actions {
padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);
}

.app-sidebar-header__tertiary-actions {
z-index: 3; // above star
position: absolute;
top: calc(var(--app-sidebar-padding) / 2);
left: calc(-1 * var(--default-clickable-area));
inset-inline-start: calc(-1 * var(--default-clickable-area));
gap: 0; // override gap
}
.app-sidebar-header__menu {
top: $top-buttons-spacing;
right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
inset-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
position: absolute;
}
}
Expand All @@ -1369,14 +1369,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
.app-sidebar-header__menu {
position: absolute;
top: $top-buttons-spacing;
right: calc($top-buttons-spacing + var(--default-clickable-area));
inset-inline-end: calc($top-buttons-spacing + var(--default-clickable-area));
}
// increase the padding to not overlap the menu
.app-sidebar-header__desc {
padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);
padding-inline-end: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);

&.app-sidebar-header__desc--without-actions {
padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);
}
}
}
Expand Down Expand Up @@ -1413,7 +1413,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation

// custom overrides
&--with-tertiary-action {
padding-left: 6px;
padding-inline-start: 6px;
}

&--editable .app-sidebar-header__mainname-form,
Expand Down Expand Up @@ -1487,7 +1487,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation

// main menu
.app-sidebar-header__menu {
margin-left: 5px;
margin-inline-start: 5px;
}
}

Expand Down Expand Up @@ -1534,17 +1534,17 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
.slide-right-leave-active,
.slide-right-enter-active {
transition-duration: var(--animation-quick);
transition-property: margin-right;
transition-property: margin-inline-end;
}

.slide-right-enter-to,
.slide-right-leave {
margin-right: 0;
margin-inline-end: 0;
}

.slide-right-enter,
.slide-right-leave-to {
margin-right: calc(-1 * var(--app-sidebar-width));
margin-inline-end: calc(-1 * var(--app-sidebar-width));
}
</style>

Expand Down

0 comments on commit e2128f0

Please sign in to comment.