Replace dir-dependent margin/margin-left/margin-right with logical properties
*Please note:* This is another step in what will, time permitting, become a series of patches to simplify/modernize the viewer CSS. Rather than having to manually specify ltr/rtl-specific margin-values in the CSS, we can use logical margin instead (and similar for some related left/right occurrences). These logical properties depend on, among other things, the direction of the HTML document which we *always* specify in the viewer. Given that most of these logical CSS properties are fairly new, and that cross-browser support is thus somewhat limited (see below), we need to use a couple of PostCSS plugins (see below) in order to support this in the GENERIC viewer. - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#browser_compatibility - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility --- - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class
This commit is contained in:
Jonas Jenwald
parent
764ccd9d34
commit
c99d558646
43
gulpfile.js
43
gulpfile.js
@ -17,7 +17,9 @@
|
||||
"use strict";
|
||||
|
||||
const autoprefixer = require("autoprefixer");
|
||||
const calc = require("postcss-calc");
|
||||
const postcssCalc = require("postcss-calc");
|
||||
const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
|
||||
const postcssLogical = require("postcss-logical");
|
||||
const fs = require("fs");
|
||||
const gulp = require("gulp");
|
||||
const postcss = require("gulp-postcss");
|
||||
@ -849,7 +851,14 @@ function buildGeneric(defines, dir) {
|
||||
|
||||
preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
|
||||
preprocessCSS("web/viewer.css", defines)
|
||||
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
|
||||
.pipe(
|
||||
postcss([
|
||||
postcssCalc(),
|
||||
postcssLogical({ preserve: true }),
|
||||
postcssDirPseudoClass(),
|
||||
autoprefixer(AUTOPREFIXER_CONFIG),
|
||||
])
|
||||
)
|
||||
.pipe(gulp.dest(dir + "web")),
|
||||
|
||||
gulp
|
||||
@ -925,7 +934,14 @@ function buildComponents(defines, dir) {
|
||||
createComponentsBundle(defines).pipe(gulp.dest(dir)),
|
||||
gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")),
|
||||
preprocessCSS("web/pdf_viewer.css", defines)
|
||||
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
|
||||
.pipe(
|
||||
postcss([
|
||||
postcssCalc(),
|
||||
postcssLogical({ preserve: true }),
|
||||
postcssDirPseudoClass(),
|
||||
autoprefixer(AUTOPREFIXER_CONFIG),
|
||||
])
|
||||
)
|
||||
.pipe(gulp.dest(dir)),
|
||||
]);
|
||||
}
|
||||
@ -1015,7 +1031,14 @@ function buildMinified(defines, dir) {
|
||||
|
||||
preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
|
||||
preprocessCSS("web/viewer.css", defines)
|
||||
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
|
||||
.pipe(
|
||||
postcss([
|
||||
postcssCalc(),
|
||||
postcssLogical({ preserve: true }),
|
||||
postcssDirPseudoClass(),
|
||||
autoprefixer(AUTOPREFIXER_CONFIG),
|
||||
])
|
||||
)
|
||||
.pipe(gulp.dest(dir + "web")),
|
||||
|
||||
gulp
|
||||
@ -1338,7 +1361,11 @@ gulp.task(
|
||||
),
|
||||
preprocessCSS("web/viewer.css", defines)
|
||||
.pipe(
|
||||
postcss([autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] })])
|
||||
postcss([
|
||||
postcssLogical({ preserve: true }),
|
||||
postcssDirPseudoClass(),
|
||||
autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] }),
|
||||
])
|
||||
)
|
||||
.pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")),
|
||||
|
||||
@ -1873,7 +1900,11 @@ gulp.task("dev-css", function createDevCSS() {
|
||||
|
||||
preprocessCSS("web/viewer.css", defines)
|
||||
.pipe(
|
||||
postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })])
|
||||
postcss([
|
||||
postcssLogical({ preserve: true }),
|
||||
postcssDirPseudoClass(),
|
||||
autoprefixer({ overrideBrowserslist: ["last 2 versions"] }),
|
||||
])
|
||||
)
|
||||
.pipe(gulp.dest(cssDir)),
|
||||
]);
|
||||
|
||||
45
package-lock.json
generated
45
package-lock.json
generated
@ -48,6 +48,8 @@
|
||||
"needle": "^3.0.0",
|
||||
"postcss": "^8.4.7",
|
||||
"postcss-calc": "^8.2.4",
|
||||
"postcss-dir-pseudo-class": "^6.0.4",
|
||||
"postcss-logical": "^5.0.4",
|
||||
"prettier": "^2.5.1",
|
||||
"puppeteer": "^13.4.1",
|
||||
"rimraf": "^3.0.2",
|
||||
@ -14980,6 +14982,21 @@
|
||||
"postcss": "^8.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-dir-pseudo-class": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
|
||||
"integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"postcss-selector-parser": "^6.0.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^12 || ^14 || >=16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-load-config": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
|
||||
@ -15006,6 +15023,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-logical": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
|
||||
"integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12 || ^14 || >=16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-media-query-parser": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
|
||||
@ -30222,6 +30251,15 @@
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"postcss-dir-pseudo-class": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
|
||||
"integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss-selector-parser": "^6.0.9"
|
||||
}
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
|
||||
@ -30233,6 +30271,13 @@
|
||||
"yaml": "^1.10.2"
|
||||
}
|
||||
},
|
||||
"postcss-logical": {
|
||||
"version": "5.0.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
|
||||
"integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"postcss-media-query-parser": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
|
||||
|
||||
@ -41,6 +41,8 @@
|
||||
"needle": "^3.0.0",
|
||||
"postcss": "^8.4.7",
|
||||
"postcss-calc": "^8.2.4",
|
||||
"postcss-dir-pseudo-class": "^6.0.4",
|
||||
"postcss-logical": "^5.0.4",
|
||||
"prettier": "^2.5.1",
|
||||
"puppeteer": "^13.4.1",
|
||||
"rimraf": "^3.0.2",
|
||||
|
||||
106
web/viewer.css
106
web/viewer.css
@ -355,18 +355,11 @@ html[dir="rtl"] #toolbarSidebar {
|
||||
0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
html[dir="ltr"] #toolbarSidebar .toolbarButton {
|
||||
margin-right: 2px !important;
|
||||
#toolbarSidebar .toolbarButton {
|
||||
margin-inline-end: 2px !important;
|
||||
}
|
||||
html[dir="rtl"] #toolbarSidebar .toolbarButton {
|
||||
margin-left: 2px !important;
|
||||
}
|
||||
|
||||
html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
|
||||
margin-right: 3px !important;
|
||||
}
|
||||
html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
|
||||
margin-left: 3px !important;
|
||||
#toolbarSidebarRight .toolbarButton {
|
||||
margin-inline-end: 3px !important;
|
||||
}
|
||||
|
||||
#sidebarResizer {
|
||||
@ -510,14 +503,7 @@ html[dir="rtl"] .findbar {
|
||||
|
||||
.findbar .splitToolbarButton {
|
||||
margin-top: 3px;
|
||||
}
|
||||
html[dir="ltr"] .findbar .splitToolbarButton {
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
html[dir="rtl"] .findbar .splitToolbarButton {
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
margin-inline: 0 5px;
|
||||
}
|
||||
|
||||
.findbar .splitToolbarButton > .toolbarButton {
|
||||
@ -627,7 +613,7 @@ html[dir="rtl"] .secondaryToolbar {
|
||||
.doorHangerRight:after,
|
||||
.doorHangerRight:before {
|
||||
bottom: 100%;
|
||||
border: solid rgba(0, 0, 0, 0);
|
||||
border: 8px solid rgba(0, 0, 0, 0);
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
@ -635,14 +621,14 @@ html[dir="rtl"] .secondaryToolbar {
|
||||
pointer-events: none;
|
||||
opacity: var(--doorhanger-triangle-opacity-whcm);
|
||||
}
|
||||
.doorHanger:after,
|
||||
.doorHangerRight:after {
|
||||
border-width: 8px;
|
||||
}
|
||||
.doorHanger:after {
|
||||
inset-inline-start: 10px;
|
||||
margin-inline-start: -8px;
|
||||
border-bottom-color: var(--toolbar-bg-color);
|
||||
}
|
||||
.doorHangerRight:after {
|
||||
inset-inline-end: 10px;
|
||||
margin-inline-end: -8px;
|
||||
border-bottom-color: var(--doorhanger-bg-color);
|
||||
}
|
||||
.doorHanger:before,
|
||||
@ -650,29 +636,13 @@ html[dir="rtl"] .secondaryToolbar {
|
||||
border-bottom-color: var(--doorhanger-border-color);
|
||||
border-width: 9px;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .doorHanger:after,
|
||||
html[dir="rtl"] .doorHangerRight:after {
|
||||
left: 10px;
|
||||
margin-left: -8px;
|
||||
.doorHanger:before {
|
||||
inset-inline-start: 10px;
|
||||
margin-inline-start: -9px;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .doorHanger:before,
|
||||
html[dir="rtl"] .doorHangerRight:before {
|
||||
left: 10px;
|
||||
margin-left: -9px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .doorHanger:after,
|
||||
html[dir="ltr"] .doorHangerRight:after {
|
||||
right: 10px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .doorHanger:before,
|
||||
html[dir="ltr"] .doorHangerRight:before {
|
||||
right: 10px;
|
||||
margin-right: -9px;
|
||||
.doorHangerRight:before {
|
||||
inset-inline-end: 10px;
|
||||
margin-inline-end: -9px;
|
||||
}
|
||||
|
||||
#findResultsCount {
|
||||
@ -788,9 +758,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
|
||||
position: relative;
|
||||
}
|
||||
html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
|
||||
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child,
|
||||
html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
|
||||
html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
|
||||
margin: 0;
|
||||
@ -834,15 +802,13 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
|
||||
html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
|
||||
margin-left: 2px;
|
||||
#toolbarViewerLeft > .toolbarButton:first-child {
|
||||
margin-inline-start: 2px;
|
||||
}
|
||||
#toolbarViewerRight > .toolbarButton:last-child {
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
|
||||
html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
|
||||
html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.toolbarButton:hover,
|
||||
.toolbarButton:focus-visible {
|
||||
background-color: var(--button-hover-color);
|
||||
@ -1178,12 +1144,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
|
||||
width: 1px;
|
||||
background-color: var(--separator-color);
|
||||
}
|
||||
html[dir="ltr"] .verticalToolbarSeparator {
|
||||
margin-left: 2px;
|
||||
}
|
||||
html[dir="rtl"] .verticalToolbarSeparator {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.horizontalToolbarSeparator {
|
||||
display: block;
|
||||
@ -1213,14 +1173,8 @@ html[dir="rtl"] .verticalToolbarSeparator {
|
||||
opacity: 0;
|
||||
position: absolute !important;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .toolbarField[type="checkbox"] {
|
||||
margin: 10px 0 3px 7px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .toolbarField[type="checkbox"] {
|
||||
margin: 10px 7px 3px 0;
|
||||
margin: 10px 0 3px;
|
||||
margin-inline-start: 7px;
|
||||
}
|
||||
|
||||
.toolbarField.pageNumber {
|
||||
@ -1288,7 +1242,6 @@ html[dir="rtl"] .thumbnail {
|
||||
#thumbnailView > a:last-of-type > .thumbnail {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
@ -1346,14 +1299,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .treeWithDeepNesting > .treeItem,
|
||||
html[dir="ltr"] .treeItem > .treeItems {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .treeWithDeepNesting > .treeItem,
|
||||
html[dir="rtl"] .treeItem > .treeItems {
|
||||
margin-right: 20px;
|
||||
.treeWithDeepNesting > .treeItem,
|
||||
.treeItem > .treeItems {
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
|
||||
.treeItem > a {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user