_svgtree.scss 8.47 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
:root {
    --svgtree-drag-info-bg: #fff;

    --svgtree-drag-info-color: #{color-contrast(#fff)};

    --svgtree-drag-info-icon-size: 16px;

    --svgtree-drag-info-border-radius: 2px;

    --svgtree-drag-info-padding-y: 0.5rem;

    --svgtree-drag-info-padding-x: 0.75rem;

    --svgtree-drag-dropindicator-color: #{tint-color($primary, 20%)};

    --svgtree-structure-line-color: #ddd;

    --svgtree-node-color: #000;

    --svgtree-node-bg: transparent;

    --svgtree-node-border-color: transparent;

    --svgtree-node-version-bg: #{rgba(#f7c898, 0.5)};

    --svgtree-node-version-border-color: #{shade-color(#f7c898, 20%)};

    --svgtree-node-focus-bg: #{rgba(tint-color($primary, 90%), 0.5)};

    --svgtree-node-focus-border-color: #{tint-color($primary, 20%)};

    --svgtree-node-hover-bg: #{rgba(#fafafa, 0.5)};

    --svgtree-node-hover-border-color: #d7d7d7;

    --svgtree-node-selected-bg: #{rgba(#fff, 0.5)};

    --svgtree-node-selected-border-color: #d7d7d7;

    --svgtree-highlight-color: #{$primary};

    --svgtree-info-bg: #{tint-color($info, 60%)};

    --svgtree-info-color: #{color-contrast(tint-color($info, 60%))};
}
46
47
48
49
50
51
52
53
54

.svg-tree {
    position: relative;
}

.svg-tree-loader {
    display: none;
    position: absolute;
    width: 100%;
55
56
    height: calc(100% - #{$module-docheader-height});
    top: $module-docheader-height;
57
58
59
60
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;
61
    user-select: none;
62

63
64
65
66
67
    .element-browser & {
        height: calc(100% - 39px);
        top: 39px;
    }

68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
    & > * {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}

.node-loader {
    display: none;
    position: absolute;
    width: 100%;
    height: 20px;
    top: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3000;

    & > * {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        margin: auto;
    }
}

98
99
100
101
102
103
104
105
106
107
108
109
110
// toggle to collapse and expand node entries
.node-toggle {
    &-icon {
        transform-origin: 50% 50%;
    }

    &--expanded {
        .node-toggle-icon {
            transform: rotate(90deg);
        }
    }
}

111
112
113
.svg-tree-element {
    display: flex;
    flex-direction: column;
114
    border: 1px solid rgba(0, 0, 0, 0.25);
115
116

    & > .svg-tree-wrapper {
117
118
119
120
121
122
123
124
        flex: 1 0 0;
    }

    typo3-backend-form-selecttree-toolbar {
        display: block;
        background-color: #fafafa;
        position: sticky;
        top: 0;
125
126
        padding: 0.5em;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
127
128
129
    }
}

130
.svg-tree-wrapper {
131
    display: block;
132
    position: relative;
133
134
    overflow-y: scroll;

135
136
137
138
    & > svg {
        margin-top: 15px;
    }

139
140
141
    path.link {
        fill: none;
        shape-rendering: crispEdges;
142
        stroke: var(--svgtree-structure-line-color);
143
        stroke-width: 1;
144
        pointer-events: none;
145
146
147
    }

    .node {
148
        &-bg {
149
150
151
            fill: var(--svgtree-node-bg);
            stroke: var(--svgtree-node-border-color);
            stroke-width: 1px;
152
153
154
155

            &__border {
                display: none;
                pointer-events: none;
156
157
158
159
                fill: var(--svgtree-drag-dropindicator-color);
                stroke: var(--svgtree-drag-dropindicator-color);
                stroke-width: 1;
                shape-rendering: crispedges;
160
161
162
163
164
            }

            &.ver-element,
            &.ver-versions,
            &.ver-page {
165
166
167
                --svgtree-node-bg: var(--svgtree-node-version-bg);

                --svgtree-node-border-color: var(--svgtree-node-version-border-color);
168
169
170
            }
        }

171
172
173
174
175
176
177
178
        &:focus {
            outline: none;
        }

        &-over {
            --svgtree-node-bg: var(--svgtree-node-hover-bg);

            --svgtree-node-border-color: var(--svgtree-node-hover-border-color);
179
180
181
        }

        &-selected {
182
183
184
            --svgtree-node-bg: var(--svgtree-node-selected-bg);

            --svgtree-node-border-color: var(--svgtree-node-selected-border-color);
185
186
        }

187
188
        &-focused {
            --svgtree-node-bg: var(--svgtree-node-focus-bg) !important;
189

190
191
192
            --svgtree-node-border-color: var(--svgtree-node-focus-border-color) !important;
        }
    }
193

194
195
    .nodes-wrapper {
        cursor: pointer;
196

197
198
199
200
201
202
        &--dragging {
            cursor: grabbing;
        }

        &--nodrop {
            cursor: no-drop;
203
204
205
206
207
208
209
210
211
212
        }
    }
}

//node drag & drop tooltip
.node-dd {
    position: fixed;
    display: none;
    padding: 0;
    margin: 0;
213
214
215
216
217
    border: 0;
    color: var(--svgtree-drag-info-color);
    background-color: var(--svgtree-drag-info-bg);
    border-radius: var(--svgtree-drag-info-border-radius);
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.25);
218
219
    z-index: 9999;

220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
    &__ctrl-icon {
        position: absolute;
        top: var(--svgtree-drag-info-padding-y);
        left: var(--svgtree-drag-info-padding-x);
        display: block;
        width: var(--svgtree-drag-info-icon-size);
        height: var(--svgtree-drag-info-icon-size);
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
    }

    &__text {
        display: flex;
        padding: var(--svgtree-drag-info-padding-y) var(--svgtree-drag-info-padding-x);
        gap: 0.25rem;
    }
238

239
    &--nodrop {
240
        & .node-dd__ctrl-icon {
241
            background-image: url(../Images/pagetree-drag-place-denied.png);
242
243
244
245
246
        }
    }

    &--ok-below {
        &.node-dd--copy .node-dd__ctrl-icon {
247
            background-image: url(../Images/pagetree-drag-copy-below.png);
248
249
250
        }

        .node-dd__ctrl-icon {
251
            background-image: url(../Images/pagetree-drag-move-below.png);
252
253
254
255
256
        }
    }

    &--ok-between {
        &.node-dd--copy .node-dd__ctrl-icon {
257
            background-image: url(../Images/pagetree-drag-new-between.png);
258
259
260
        }

        .node-dd__ctrl-icon {
261
            background-image: url(../Images/pagetree-drag-move-between.png);
262
263
264
265
266
        }
    }

    &--ok-append {
        &.node-dd--copy .node-dd__ctrl-icon {
267
            background-image: url(../Images/pagetree-drag-new-inside.png);
268
269
270
        }

        .node-dd__ctrl-icon {
271
            background-image: url(../Images/pagetree-drag-move-into.png);
272
273
274
275
276
        }
    }

    &--ok-above {
        &.node-dd--copy .node-dd__ctrl-icon {
277
            background-image: url(../Images/pagetree-drag-copy-above.png);
278
279
280
        }

        .node-dd__ctrl-icon {
281
            background-image: url(../Images/pagetree-drag-move-above.png);
282
283
284
285
286
        }
    }
}

.nodes-drop-zone {
287
    &[data-open='false']:not(.animating) {
288
289
290
        display: none;
    }

291
    rect {
292
        fill: $danger;
293
        cursor: grabbing;
294
295
296
    }

    text {
297
        fill: color-contrast($danger);
298
299
300
301
        pointer-events: none;
    }
}

302
.node-name {
303
304
    fill: var(--svgtree-node-color);

305
    .node-highlight-text {
306
        fill: var(--svgtree-highlight-color);
307
308
309
310
        font-weight: 700;
    }
}

311
312
313
314
.node-edit {
    position: absolute;
    top: 0;
    left: 0;
315
316
317
    padding: 0.25rem;
    border: 1px solid tint-color($primary, 20%);
    outline: none;
318
319
}

320
.scaffold-content .svg-toolbar {
321
    min-height: $module-docheader-height;
322
323
324
}

.svg-toolbar {
325
    padding: 4px 10px 0;
326
327
    border-bottom: 1px solid $module-docheader-border;
    background-color: $module-docheader-bg;
328

329
330
    .btn-toolbar {
        padding: 0 0.25rem;
331
332
333
    }

    &__menu {
334
335
336
        margin: 0.125rem 0 0.375rem;
        padding-right: 32px;
        display: flex;
337

338
339
        .svg-toolbar__search {
            flex: 1 0 auto;
340
            margin: 0 0.5rem 0 0.25rem;
341
342
343
        }
    }

344
    &__menuitem {
345
        display: inline-block;
346
        padding: 0.25rem;
347
348
349
        border: none;
        background: 0 0;
        font-size: 11px;
350
    }
351
352
353
354
355
356

    &__drag-node {
        cursor: move;
    }

    &__submenu {
357
        margin: 0.125rem 0 0;
358
    }
359
360
}

361
362
363
//
// Info bar displayed above the tree if a page is mounted
//
364
.node-mount-point {
365
    display: flex;
366
    border: 0;
367
368
369
370
371
372
    background-color: var(--svgtree-info-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: var(--svgtree-info-color);
    padding: 0.75em 1.167em;
    gap: 0.5em;
    align-items: center;
373
374

    &__icon {
375
        flex: 0 auto;
376

377
        &.mountpoint-close {
378
379
380
            cursor: pointer;
        }
    }
381
382

    &__text {
383
384
385
        flex: 1 0 0;
        padding: 0 0.5em;
        overflow: hidden;
386
    }
387
}
388
389
390
391
392

.node-action {
    opacity: 0;
    cursor: pointer;

393
    rect {
394
395
396
397
398
399
        opacity: 0;
    }

    &.node-action-over {
        opacity: 1;

400
        rect {
401
402
403
404
            opacity: 1;
        }
    }
}