1/*
2 * Copyright (C) 2022 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17import {Color} from 'app/colors';
18import {selectedElementStyle} from './selected_element.styles';
19
20export const nodeStyles =
21  `
22    .node {
23        position: relative;
24        display: inline-flex;
25        padding: 1px 0;
26        width: 100%;
27    }
28
29    .node.clickable {
30        cursor: pointer;
31    }
32
33    .node:not(.selected).added,
34    .node:not(.selected).addedMove {
35        background: ${Color.ADDED_ELEMENT_BACKGROUND};
36    }
37
38    .node:not(.selected).deleted,
39    .node:not(.selected).deletedMove {
40        background: ${Color.DELETED_ELEMENT_BACKGROUND};
41    }
42
43    .node:not(.selected).modified {
44        background: ${Color.MODIFIED_ELEMENT_BACKGROUND};
45    }
46
47    .node:hover:not(.selected) {
48        background-color: ${Color.HOVER_ELEMENT_BACKGROUND};
49    }
50
51    .node.addedMove:after,
52    .node.deletedMove:after {
53        content: 'moved';
54        font: 14px 'Roboto', sans-serif;
55        margin: 0 5px;
56        background: ${Color.CHIP_BLUE};
57        border-radius: 5px;
58        height: fit-content;
59        padding: 3px;
60        color: white;
61    }
62` + selectedElementStyle;
63
64// FIXME: child-hover selector is not working.
65export const treeNodeDataViewStyles = `
66    .node + .children:not(.flattened):not(.with-gutter) {
67        margin-left: 12px;
68        padding-left: 11px;
69    }
70
71    .node + .children:not(.flattened).with-gutter {
72        margin-left: 23px;
73    }
74
75    .node + .children:not(.flattened) {
76        border-left: 1px solid var(--border-color);
77    }
78
79    .node.selected + .children {
80        border-left: 1px solid rgb(150, 150, 150);
81    }
82
83    .node.child-selected + .children {
84        border-left: 1px solid rgb(100, 100, 100);
85    }
86
87    .node:hover + .children {
88        border-left: 1px solid rgba(150, 150, 150, 0.75);
89    }
90
91    .node.child-hover + .children {
92        border-left: 1px solid #b4b4b4;
93    }
94`;
95
96export const nodeInnerItemStyles = `
97    .leaf-node-icon {
98        content: '';
99        display: inline-block;
100        margin-left: 40%;
101        margin-top: 40%;
102        height: 5px;
103        width: 5px;
104        border-radius: 50%;
105        background-color: ${Color.TEXT_GRAY};
106    }
107
108    .icon-wrapper, .description {
109        position: relative;
110        display: inline-block;
111    }
112
113    .icon-wrapper-show-state {
114      position: absolute;
115    }
116
117    .toggle-tree-btn, .expand-tree-btn, .pin-node-btn, .toggle-rect-show-state-btn {
118        padding: 0;
119    }
120
121    .toggle-rect-show-state-btn {
122        transform: scale(0.75);
123    }
124
125    .pin-node-btn {
126        transform: scale(0.7);
127    }
128
129    .description {
130        align-items: center;
131        flex: 1 1 auto;
132        vertical-align: middle;
133        word-break: break-all;
134        flex-basis: 0;
135    }
136
137    .leaf-node-icon-wrapper {
138        margin-left: 6px;
139        min-height: 24px;
140        width: 24px;
141    }
142
143    .icon-button {
144        background: none;
145        border: none;
146        display: inline-block;
147        vertical-align: middle;
148        color: inherit;
149        cursor: pointer;
150    }
151
152    .expand-tree-btn {
153        float: right;
154    }
155
156    .expand-tree-btn.modified {
157        background: ${Color.MODIFIED_ELEMENT_BACKGROUND};
158    }
159
160    .expand-tree-btn.deleted,
161    .expand-tree-btn.deletedMove {
162        background: ${Color.DELETED_ELEMENT_BACKGROUND};
163    }
164
165    .expand-tree-btn.added,
166    .expand-tree-btn.addedMove {
167        background: ${Color.ADDED_ELEMENT_BACKGROUND};
168    }
169`;
170