dlg-ui 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/addon/components/navbar.hbs +7 -4
- package/addon/components/navbar.js +13 -3
- package/addon/components/radio.js +17 -17
- package/addon/styles/addon.css +133 -129
- package/package.json +1 -1
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
<div class='navbar-wrapper'>
|
|
2
2
|
<div class='navbar-container'>
|
|
3
|
-
<div
|
|
4
|
-
|
|
3
|
+
<div
|
|
4
|
+
class='navbar-title cursor-pointer'
|
|
5
|
+
{{on 'click' (fn this.onSelect this.homeRoute)}}
|
|
6
|
+
>
|
|
7
|
+
{{this.title}}
|
|
5
8
|
</div>
|
|
6
9
|
<div class='navbar-elements'>
|
|
7
10
|
{{#each this.navbarOptions as |option|}}
|
|
8
11
|
{{#if (eq option.type 'link')}}
|
|
9
12
|
<div
|
|
10
|
-
class='navbar-selection'
|
|
13
|
+
class='navbar-selection cursor-pointer'
|
|
11
14
|
{{on 'click' (fn this.onSelect option)}}
|
|
12
15
|
>
|
|
13
16
|
{{option.label}}
|
|
14
17
|
</div>
|
|
15
18
|
{{/if}}
|
|
16
19
|
{{#if (eq option.type 'dropdown')}}
|
|
17
|
-
<div class='navbar-selection'>
|
|
20
|
+
<div class='navbar-selection cursor-pointer'>
|
|
18
21
|
<HeaderDropdown
|
|
19
22
|
@class='navbar-dropdown'
|
|
20
23
|
@options={{option.dropdownOptions}}
|
|
@@ -5,6 +5,16 @@ import { service } from '@ember/service';
|
|
|
5
5
|
export default class NavbarComponent extends Component {
|
|
6
6
|
@service router;
|
|
7
7
|
|
|
8
|
+
get title() {
|
|
9
|
+
return this.args.title || 'dlg-ui';
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
get homeRoute() {
|
|
13
|
+
return {
|
|
14
|
+
route: this.args.homeRoute || 'index',
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
8
18
|
get navbarOptions() {
|
|
9
19
|
let options = this.args.options;
|
|
10
20
|
return options.sort((a, b) => b.index - a.index);
|
|
@@ -24,10 +34,10 @@ export default class NavbarComponent extends Component {
|
|
|
24
34
|
if (this.args.onSelect) {
|
|
25
35
|
this.args.onSelect(value);
|
|
26
36
|
}
|
|
27
|
-
if (!this.args.preventDefault && !
|
|
37
|
+
if (!this.args.preventDefault && !value.param) {
|
|
28
38
|
this.router.transitionTo(value.route);
|
|
29
|
-
} else if (!this.args.preventDefault &&
|
|
30
|
-
this.router.transitionTo(value.route,
|
|
39
|
+
} else if (!this.args.preventDefault && value.param) {
|
|
40
|
+
this.router.transitionTo(value.route, value.param);
|
|
31
41
|
}
|
|
32
42
|
}
|
|
33
43
|
}
|
|
@@ -3,23 +3,23 @@ import { action } from '@ember/object';
|
|
|
3
3
|
import { tracked } from '@glimmer/tracking';
|
|
4
4
|
|
|
5
5
|
export default class RadioComponent extends Component {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
@tracked
|
|
7
|
+
selectedOption = this.args.defaultOption || {};
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
get options() {
|
|
10
|
+
let options = [];
|
|
11
|
+
this.args.options.forEach((option) => {
|
|
12
|
+
if (option.label === this.selectedOption.label) {
|
|
13
|
+
option.isChecked = true;
|
|
14
|
+
}
|
|
15
|
+
options.push(option);
|
|
16
|
+
});
|
|
17
|
+
return this.args.options || [];
|
|
18
|
+
}
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
@action
|
|
21
|
+
onChange(option) {
|
|
22
|
+
this.selectedOption = option;
|
|
23
|
+
this.args.onChange(option);
|
|
24
|
+
}
|
|
25
25
|
}
|
package/addon/styles/addon.css
CHANGED
|
@@ -1,211 +1,215 @@
|
|
|
1
|
+
.cursor-pointer {
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.dropdown-option {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
border-bottom-style: solid;
|
|
7
|
+
border-width: 2px;
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding-left: 8px;
|
|
10
|
+
padding-right: 8px;
|
|
11
|
+
padding-top: 6px;
|
|
12
|
+
padding-bottom: 6px;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
cursor: pointer;
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
.dropdown-option:hover {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
background-color: black;
|
|
19
|
+
color: white;
|
|
20
|
+
border: black;
|
|
17
21
|
}
|
|
18
22
|
|
|
19
23
|
.dropdown-options {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
white-space: normal;
|
|
25
|
+
overflow-wrap: break-word;
|
|
26
|
+
border-style: solid;
|
|
27
|
+
border-top-style: none;
|
|
28
|
+
border-bottom-style: none;
|
|
29
|
+
border-width: 2px;
|
|
30
|
+
background-color: #f6f6f6;
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
.dropdown-placeholder {
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
font-style: italic;
|
|
35
|
+
color: #444;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
.dropdown-select {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
39
|
+
width: 100%;
|
|
40
|
+
padding-left: 8px;
|
|
41
|
+
padding-top: 8px;
|
|
42
|
+
padding-bottom: 8px;
|
|
43
|
+
padding-right: 20px;
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
position: relative;
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
text-overflow: ellipsis;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
border-style: solid;
|
|
51
|
+
border-width: 2px;
|
|
52
|
+
background-color: #eee;
|
|
53
|
+
user-select: none;
|
|
50
54
|
}
|
|
51
55
|
|
|
52
56
|
.dropdown-select::after {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
content: '\25BC';
|
|
58
|
+
display: block;
|
|
59
|
+
position: absolute;
|
|
60
|
+
right: 0px;
|
|
61
|
+
top: 50%;
|
|
62
|
+
right: 8px;
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
transition: transform 0.3s ease;
|
|
65
|
+
top: 25%;
|
|
62
66
|
}
|
|
63
67
|
|
|
64
68
|
.dropdown-select.open::after {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
69
|
+
transform: rotate(-180deg);
|
|
70
|
+
transform-origin: center;
|
|
71
|
+
padding-right: 0px;
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
.dropdown-wrapper {
|
|
71
|
-
|
|
75
|
+
width: 100%;
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
.header-dropdown-options {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
white-space: normal;
|
|
80
|
+
overflow-wrap: break-word;
|
|
81
|
+
border-style: solid;
|
|
82
|
+
border-top-style: none;
|
|
83
|
+
border-bottom-style: none;
|
|
84
|
+
border-width: 2px;
|
|
85
|
+
background-color: #f6f6f6;
|
|
82
86
|
}
|
|
83
87
|
|
|
84
88
|
.header-dropdown-options.open {
|
|
85
|
-
|
|
89
|
+
border-top-style: solid;
|
|
86
90
|
}
|
|
87
91
|
|
|
88
92
|
.header-dropdown-select {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
width: fit-content;
|
|
94
|
+
max-width: 100%;
|
|
95
|
+
padding-top: 8px;
|
|
96
|
+
padding-bottom: 2px;
|
|
97
|
+
padding-right: 25px;
|
|
98
|
+
box-sizing: border-box;
|
|
99
|
+
position: relative;
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
text-overflow: ellipsis;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
border-bottom-style: solid;
|
|
105
|
+
border-width: 2px;
|
|
106
|
+
user-select: none;
|
|
103
107
|
}
|
|
104
108
|
|
|
105
109
|
.header-dropdown-select.open {
|
|
106
|
-
|
|
110
|
+
border-bottom-style: none;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
.header-dropdown-select::after {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
content: '\25BE';
|
|
115
|
+
display: block;
|
|
116
|
+
position: absolute;
|
|
117
|
+
right: 0px;
|
|
118
|
+
top: 20%;
|
|
119
|
+
pointer-events: none;
|
|
120
|
+
transition: transform 0.3s ease;
|
|
121
|
+
font-size: 1.5rem;
|
|
118
122
|
}
|
|
119
123
|
|
|
120
124
|
.header-dropdown-select.open::after {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
+
transform: rotate(-180deg);
|
|
126
|
+
transform-origin: center;
|
|
127
|
+
padding-right: 0px;
|
|
128
|
+
top: 16%;
|
|
125
129
|
}
|
|
126
130
|
|
|
127
131
|
.header-dropdown-selected {
|
|
128
|
-
|
|
132
|
+
font-weight: bold;
|
|
129
133
|
}
|
|
130
134
|
|
|
131
135
|
.header-dropdown-wrapper {
|
|
132
|
-
|
|
136
|
+
width: 100%;
|
|
133
137
|
}
|
|
134
138
|
|
|
135
139
|
.navbar-container {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
140
|
+
background-color: #eee;
|
|
141
|
+
position: sticky;
|
|
142
|
+
top: 0;
|
|
143
|
+
left: 0;
|
|
144
|
+
width: 100%;
|
|
145
|
+
min-height: 5vh;
|
|
146
|
+
height: fit-content;
|
|
147
|
+
display: flex;
|
|
148
|
+
justify-content: space-between;
|
|
149
|
+
align-items: center;
|
|
150
|
+
z-index: 10;
|
|
147
151
|
}
|
|
148
152
|
|
|
149
153
|
.navbar-dropdown .header-dropdown-options {
|
|
150
|
-
|
|
151
|
-
|
|
154
|
+
position: absolute;
|
|
155
|
+
min-width: 60px !important;
|
|
152
156
|
}
|
|
153
157
|
|
|
154
158
|
.navbar-dropdown .header-dropdown-select {
|
|
155
|
-
|
|
156
|
-
|
|
159
|
+
padding-top: 0px;
|
|
160
|
+
border-bottom-style: none;
|
|
157
161
|
}
|
|
158
162
|
|
|
159
163
|
.navbar-dropdown .header-dropdown-select::after {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
164
|
+
top: 0;
|
|
165
|
+
height: 100%;
|
|
166
|
+
display: flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
padding-top: 2px;
|
|
165
169
|
}
|
|
166
170
|
|
|
167
171
|
.navbar-dropdown .header-dropdown-selected {
|
|
168
|
-
|
|
172
|
+
font-weight: normal;
|
|
169
173
|
}
|
|
170
174
|
|
|
171
175
|
.navbar-elements {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
+
display: flex;
|
|
177
|
+
flex-wrap: wrap;
|
|
178
|
+
width: fit-content;
|
|
179
|
+
margin-right: 10px;
|
|
176
180
|
}
|
|
177
181
|
|
|
178
182
|
.navbar-selection {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
183
|
+
margin: 8px;
|
|
184
|
+
display: flex;
|
|
185
|
+
align-items: center;
|
|
182
186
|
}
|
|
183
187
|
|
|
184
188
|
.navbar-title {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
189
|
+
font-size: clamp(20px, 3vw, 30px);
|
|
190
|
+
margin: 0px 8px 0px 8px;
|
|
191
|
+
width: fit-content;
|
|
192
|
+
white-space: nowrap;
|
|
193
|
+
font-weight: bold;
|
|
190
194
|
}
|
|
191
195
|
|
|
192
196
|
.navbar-wrapper {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
197
|
+
display: flex;
|
|
198
|
+
flex-direction: column;
|
|
199
|
+
min-height: 100vh;
|
|
196
200
|
}
|
|
197
201
|
|
|
198
202
|
.navbar-yield {
|
|
199
|
-
|
|
200
|
-
|
|
203
|
+
flex: 1 1 auto;
|
|
204
|
+
padding-top: 8px;
|
|
201
205
|
}
|
|
202
206
|
|
|
203
207
|
.radio-label {
|
|
204
|
-
|
|
208
|
+
font-weight: bold;
|
|
205
209
|
}
|
|
206
210
|
|
|
207
211
|
.radio-options {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
212
|
+
display: flex;
|
|
213
|
+
flex-direction: column;
|
|
214
|
+
margin: 5px 0px 5px 0px;
|
|
215
|
+
}
|