Skip to content

Use logical positioning instead of physical for bidirectional text support #47343

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

Merged
skjnldsv merged 7 commits into from
Aug 29, 2024
Merged

Use logical positioning instead of physical for bidirectional text support #47343

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
723780d
feat: Add bidi support in core directory
ahangarha Dec 19, 2023
66fab3f
Fix: background position based on direction
ahangarha Dec 23, 2023
26f4b97
Fix: shorthand paddings and margins
ahangarha Dec 23, 2023
c5baf3d
Fix: float and clear
ahangarha Dec 23, 2023
7b048e0
fix: Adjust some minor styles issues
susnux Aug 20, 2024
aea0e8d
fix: Adjust more places for logical position
susnux Aug 20, 2024
faeb2f0
chore: Add stylelint rules to verify we only use logical properties
susnux Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix: float and clear 
Fix other background-positions
Minor fix in link button icon position
Update header left and right to start and end

Signed-off-by: Mostafa Ahangarha <[email protected]>
  • Loading branch information
@ahangarha @nextcloud-command
ahangarha authored and nextcloud-command committed Aug 29, 2024
commit c5baf3d7ef2715def79ff7734d505c56bb20012c
7 changes: 7 additions & 0 deletions apps/settings/css/settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,13 @@ select {
}
}

body[dir='ltr'] .link-button.icon-file {
background-position: left 24px center;
}
body[dir='rtl'] .link-button.icon-file {
background-position: right 24px center;
}

.personal-settings-container {
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
Expand Down
66 changes: 60 additions & 6 deletions core/css/apps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,6 @@ kbd {
width: 100%;
padding: 10px;
padding-inline-start: 34px;
background-position: 10px center;
text-align: start;
margin: 0;
}
Expand Down Expand Up @@ -321,7 +320,6 @@ kbd {
/* Main entry link */
> a {
background-size: 16px 16px;
background-position: 14px center;
background-repeat: no-repeat;
display: block;
justify-content: space-between;
Expand Down Expand Up @@ -358,7 +356,7 @@ kbd {
/* counter can also be inside the link */
> .app-navigation-entry-utils {
display: inline-block;
float: right;
/* Check Floating fix below */
.app-navigation-entry-utils-counter {
padding-inline-end: 0 !important;
}
Expand Down Expand Up @@ -662,6 +660,40 @@ kbd {
}
}

/* Floating and background-position fix */
/* Cannot use inline-start and :dir to support Samsung Internet */
body[dir='ltr'] {
.app-navigation-personal,
.app-navigation-administration {
.app-navigation-new button {
background-position: left 10px center;
}

> ul > li > ul > li > a {
background-position: left 14px center;

> .app-navigation-entry-utils {
float: right;
}
}
}
}
body[dir='rtl'] {
.app-navigation-personal,
.app-navigation-administration {
.app-navigation-new button {
background-position: right 10px center;
}

> ul > li > ul > li > a {
background-position: right 14px center;

> .app-navigation-entry-utils {
float: left;
}
}
}
}

/* CONTENT --------------------------------------------------------- */
#content {
Expand Down Expand Up @@ -857,7 +889,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -

&::before {
background-image: var(--icon-settings-dark);
background-position: 14px center;
background-repeat: no-repeat;
content: '';
width: var(--default-clickable-area);
Expand All @@ -869,11 +900,27 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -

&:focus-visible {
box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
background-position: 12px center;
}
}
}

/* Background-position fix */
body[dir='ltr'] #app-settings-header .settings-button {
&::before {
background-position: left 14px center;
}
&:focus-visible {
background-position: left 12px center;
}
}
body[dir='rtl'] #app-settings-header .settings-button {
&::before {
background-position: right 14px center;
}
&:focus-visible {
background-position: right 12px center;
}
}
/* GENERAL SECTION ------------------------------------------------------------ */
.section {
display: block;
Expand Down Expand Up @@ -971,12 +1018,19 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
}
}
.tabsContainer {
clear: left;
.tab {
padding: 0 15px 15px;
}
}

/* Cannot use inline-start to support Samsung Internet*/
body[dir='ltr'] .tabsContainer {
clear: left;
}
body[dir='rtl'] .tabsContainer {
clear: right;
}

/* POPOVER MENU ------------------------------------------------------------ */
$popoveritem-height: 34px;
$popovericon-size: 16px;
Expand Down
52 changes: 42 additions & 10 deletions core/css/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,52 @@

/* Global Components */

.pull-left {
float: left;
}
/* The following lines are a hacky way to adjust float and clear based on direction.
Samsung Internet doesn't support `inline-start|end` and :dir.
pull-right|left and clear-right|left are also kept for backward compatibility.
*/
body[dir='ltr'] {
.pull-left,
.pull-start {
float: left;
}

.pull-right {
float: right;
}
.pull-right,
.pull-end {
float: right;
}

.clear-left,
.clear-start {
clear: left;
}

.clear-left {
clear: left;
.clear-right,
.clear-end {
clear: right;
}
}

.clear-right {
clear: right;
body[dir='rtl'] {
.pull-left,
.pull-start {
float: right;
}

.pull-right,
.pull-end {
float: left;
}

.clear-left,
.clear-start {
clear: right;
}

.clear-right,
.clear-end {
clear: left;
}
}

.clear-both {
Expand Down
13 changes: 9 additions & 4 deletions core/css/guest.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,14 +591,19 @@ p.info {
margin-inline-end: 25px;
}

img.float-spinner {
float: left;
}

a.update-show-detailed {
border-bottom: inherit;
}
}

/* Cannot use inline-start and :dir to support Samsung Internet */
body[dir='ltr'] .update img.float-spinner {
float: left;
}
body[dir='rtl'] .update img.float-spinner {
float: right;
}

#update-progress-detailed {
text-align: start;
margin-bottom: 12px;
Expand Down
14 changes: 7 additions & 7 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
bottom: 2px;
}

.header-right {
.header-end {
// Add some spacing so the last entry looks ok
margin-inline-end: calc(3 * var(--default-grid-baseline));

Expand Down Expand Up @@ -88,7 +88,7 @@
/* Header menu */
$header-menu-entry-height: 44px;

.header-right > div > .menu {
.header-end > div > .menu {
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
border-radius: var(--border-radius-large);
Expand Down Expand Up @@ -146,25 +146,25 @@
flex-shrink: 0;
}

#header-left, .header-left,
#header-right, .header-right {
#header-start, .header-start,
#header-end, .header-end {
display: inline-flex;
align-items: center;
}

#header-left, .header-left {
#header-start, .header-start {
flex: 1 0;
white-space: nowrap;
min-width: 0;
}

#header-right, .header-right {
#header-end, .header-end {
justify-content: flex-end;
flex-shrink: 1;
}

/* Right header standard */
.header-right {
.header-end {
> .header-menu__trigger img {
filter: var(--background-image-invert-if-bright);
}
Expand Down
4 changes: 2 additions & 2 deletions core/css/mobile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,15 +132,15 @@
}

@media only screen and (max-width: 480px) {
#header .header-right > div > .menu {
#header .header-end > div > .menu {
max-width: calc(100vw - 10px);
position: fixed;
&::after {
display: none !important;
}
}
/* Arrow directly child of menutoggle */
#header .header-right > div {
#header .header-end > div {
&.openedMenu {
&::after {
display: block;
Expand Down
2 changes: 1 addition & 1 deletion core/css/public.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline));
}

.header-right {
.header-end {

#header-primary-action a {
color: var(--color-primary-element-text);
Expand Down
7 changes: 7 additions & 0 deletions core/css/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,8 +248,15 @@ body {
position: absolute;
inset-inline-end: 1em;
top: .8em;
}

/* Cannot use inline-start and :dir to support Samsung Internet */
body[dir='ltr'] #show, #dbpassword {
float: right;
}
body[dir='ltr'] #show, #dbpassword {
float: left;
}

#show + label, #dbpassword + label {
inset-inline-end: 21px;
Expand Down
4 changes: 2 additions & 2 deletions core/js/public/publicpage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

window.addEventListener('DOMContentLoaded', function () {

$('#body-public').find('.header-right .menutoggle').click(function() {
$('#body-public').find('.header-end .menutoggle').click(function() {
$(this).next('.popovermenu').toggleClass('open');
});

Expand All @@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', function () {
});

$(document).mouseup(function(e) {
var toggle = $('#body-public').find('.header-right .menutoggle');
var toggle = $('#body-public').find('.header-end .menutoggle');
var container = toggle.next('.popovermenu');

// if the target of the click isn't the menu toggle, nor a descendant of the
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/MainMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const setUp = () => {
},
})

const container = document.getElementById('header-left__appmenu')
const container = document.getElementById('header-start__appmenu')
if (!container) {
// no container, possibly we're on a public page
return
Expand Down
4 changes: 2 additions & 2 deletions core/templates/layout.public.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</div>

<header id="header">
<div class="header-left">
<div class="header-start">
<div id="nextcloud" class="header-appname">
<?php if ($_['logoUrl']): ?>
<a href="<?php print_unescaped($_['logoUrl']); ?>"
Expand Down Expand Up @@ -72,7 +72,7 @@
</div>
</div>

<div class="header-right">
<div class="header-end">
<?php
/** @var \OCP\AppFramework\Http\Template\PublicTemplateResponse $template */
if (isset($template) && $template->getActionCount() !== 0) {
Expand Down
6 changes: 3 additions & 3 deletions core/templates/layout.user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,17 +63,17 @@
</div>

<header id="header">
<div class="header-left">
<div class="header-start">
<a href="<?php print_unescaped($_['logoUrl'] ?: link_to('', 'index.php')); ?>"
aria-label="<?php p($l->t('Go to %s', [$_['logoUrl'] ?: $_['defaultAppName']])); ?>"
id="nextcloud">
<div class="logo logo-icon"></div>
</a>

<nav id="header-left__appmenu"></nav>
<nav id="header-start__appmenu"></nav>
</div>

<div class="header-right">
<div class="header-end">
<div id="unified-search"></div>
<div id="notifications"></div>
<div id="contactsmenu"></div>
Expand Down