Skip to content

Commit f42a120

Browse files
calixtemancalixteman
committed
Fix some css in the tree view
It's a follow-up of #20493. And simplify a bit the js to have only one click listener in the tree instead of having one on each toggler.
1 parent 6c74626 commit f42a120

4 files changed

Lines changed: 73 additions & 69 deletions

File tree

‎web/base_tree_viewer.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
*/
1515

1616
import { removeNullCharacters } from "./ui_utils.js";
17+
import { stopEvent } from "pdfjs-lib";
1718

1819
const TREEITEM_OFFSET_TOP = -100; // px
1920
const TREEITEM_SELECTED_CLASS = "selected";
@@ -39,10 +40,10 @@ class BaseTreeViewer {
3940
this._currentTreeItem = null;
4041

4142
// Remove the tree from the DOM.
42-
this.container.textContent = "";
43+
this.container.replaceChildren();
4344
// Ensure that the left (right in RTL locales) margin is always reset,
4445
// to prevent incorrect tree alignment if a new document is opened.
45-
this.container.classList.remove("treeWithDeepNesting");
46+
this.container.classList.remove("withNesting");
4647
}
4748

4849
/**
@@ -84,15 +85,6 @@ class BaseTreeViewer {
8485
if (hidden) {
8586
toggler.classList.add("treeItemsHidden");
8687
}
87-
toggler.onclick = evt => {
88-
evt.stopPropagation();
89-
toggler.classList.toggle("treeItemsHidden");
90-
91-
if (evt.shiftKey) {
92-
const shouldShowAll = !toggler.classList.contains("treeItemsHidden");
93-
this._toggleTreeItem(div, shouldShowAll);
94-
}
95-
};
9688
div.prepend(toggler);
9789
}
9890

@@ -128,9 +120,20 @@ class BaseTreeViewer {
128120
*/
129121
_finishRendering(fragment, count, hasAnyNesting = false) {
130122
if (hasAnyNesting) {
131-
this.container.classList.add("treeWithDeepNesting");
132-
123+
this.container.classList.add("withNesting");
133124
this._lastToggleIsShow = !fragment.querySelector(".treeItemsHidden");
125+
this.container.addEventListener("click", e => {
126+
const { target } = e;
127+
if (!target.classList.contains("treeItemToggler")) {
128+
return;
129+
}
130+
stopEvent(e);
131+
target.classList.toggle("treeItemsHidden");
132+
if (e.shiftKey) {
133+
const shouldShowAll = !target.classList.contains("treeItemsHidden");
134+
this._toggleTreeItem(this.container, shouldShowAll);
135+
}
136+
});
134137
}
135138
// Pause translation when inserting the tree into the DOM.
136139
this._l10n.pause();

‎web/pdf_layer_viewer.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,12 @@ class PDFLayerViewer extends BaseTreeViewer {
171171
queue.push({ parent: itemsDiv, groups: groupId.order });
172172
} else {
173173
const group = optionalContentConfig.getGroup(groupId);
174-
174+
const label = document.createElement("label");
175175
const input = document.createElement("input");
176+
label.append(
177+
input,
178+
document.createTextNode(this._normalizeTextContent(group.name))
179+
);
176180
this._bindLink(element, { groupId, input });
177181
input.type = "checkbox";
178182
input.checked = group.visible;
@@ -182,10 +186,6 @@ class PDFLayerViewer extends BaseTreeViewer {
182186
visible: input.checked,
183187
});
184188

185-
const label = document.createElement("label");
186-
label.textContent = this._normalizeTextContent(group.name);
187-
188-
label.append(input);
189189
element.append(label);
190190
layersCount++;
191191
}

‎web/tree.css‎

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
* limitations under the License.
1414
*/
1515

16-
.treeWithDeepNesting {
16+
.treeView {
1717
--treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
1818
--treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
1919
--treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
@@ -28,17 +28,53 @@
2828
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
2929
--treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
3030

31-
.treeItemToggler::before {
32-
/* All matching images have a size of 16x16
33-
* All relevant containers have a size of 28x28 */
34-
position: absolute;
35-
display: inline-block;
36-
width: 16px;
37-
height: 16px;
31+
&.withNesting {
32+
.treeItemToggler {
33+
&::before {
34+
/* All matching images have a size of 16x16
35+
* All relevant containers have a size of 28x28 */
36+
position: absolute;
37+
display: inline-block;
38+
width: 16px;
39+
height: 16px;
40+
inset-inline-end: 4px;
41+
42+
content: "";
43+
background-color: var(--toolbar-icon-bg-color);
44+
mask-image: var(--treeitem-expanded-icon);
45+
mask-size: cover;
46+
}
47+
48+
position: relative;
49+
float: var(--inline-start);
50+
height: 0;
51+
width: 0;
52+
color: rgb(255 255 255 / 0.5);
53+
54+
&.treeItemsHidden {
55+
&::before {
56+
mask-image: var(--treeitem-collapsed-icon);
57+
transform: scaleX(var(--dir-factor));
58+
}
59+
60+
~ .treeItems {
61+
display: none;
62+
}
63+
}
64+
65+
&:hover + a,
66+
&:hover ~ .treeItems {
67+
background-color: var(--treeitem-bg-color);
68+
background-clip: padding-box;
69+
border-radius: 2px;
70+
color: var(--treeitem-hover-color);
71+
}
72+
}
3873

39-
content: "";
40-
background-color: var(--toolbar-icon-bg-color);
41-
mask-size: cover;
74+
> .treeItem,
75+
.treeItem > .treeItems {
76+
margin-inline-start: 20px;
77+
}
4278
}
4379

4480
&#layersView .treeItem > a {
@@ -47,19 +83,15 @@
4783
}
4884

4985
> label {
86+
display: flex;
87+
align-items: center;
5088
padding-inline-start: 4px;
5189
> input {
52-
float: var(--inline-start);
5390
margin-top: 1px;
5491
}
5592
}
5693
}
5794

58-
> .treeItem,
59-
.treeItem > .treeItems {
60-
margin-inline-start: 20px;
61-
}
62-
6395
.treeItem {
6496
> a {
6597
text-decoration: none;
@@ -76,7 +108,7 @@
76108
line-height: 15px;
77109
user-select: none;
78110
white-space: normal;
79-
cursor: pointer;
111+
cursor: default;
80112

81113
&:hover {
82114
background-color: var(--treeitem-bg-color);
@@ -91,35 +123,4 @@
91123
color: var(--treeitem-selected-color);
92124
}
93125
}
94-
95-
.treeItemToggler {
96-
position: relative;
97-
float: var(--inline-start);
98-
height: 0;
99-
width: 0;
100-
color: rgb(255 255 255 / 0.5);
101-
102-
&::before {
103-
inset-inline-end: 4px;
104-
mask-image: var(--treeitem-expanded-icon);
105-
}
106-
107-
&.treeItemsHidden {
108-
&::before {
109-
mask-image: var(--treeitem-collapsed-icon);
110-
transform: scaleX(var(--dir-factor));
111-
}
112-
113-
~ .treeItems {
114-
display: none;
115-
}
116-
}
117-
118-
&:hover:is(+ a, ~ .treeItems) {
119-
background-color: var(--treeitem-bg-color);
120-
background-clip: padding-box;
121-
border-radius: 2px;
122-
color: var(--treeitem-hover-color);
123-
}
124-
}
125126
}

‎web/viewer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,9 @@
175175
</div>
176176
<div id="sidebarContent">
177177
<div id="thumbnailView"></div>
178-
<div id="outlineView" class="hidden"></div>
178+
<div id="outlineView" class="treeView hidden"></div>
179179
<div id="attachmentsView" class="hidden"></div>
180-
<div id="layersView" class="hidden"></div>
180+
<div id="layersView" class="treeView hidden"></div>
181181
</div>
182182
<div id="sidebarResizer"></div>
183183
</div>

0 commit comments

Comments
 (0)