iconograph-ui 1.5.7 → 1.6.2
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/example/src/routes/+layout.svelte +6 -40
- package/example/static/css/testapp.css +1 -0
- package/lib/layout/SectionContent.svelte +6 -1
- package/lib/navigation/MainMenu.svelte +105 -6
- package/lib/navigation/MenuItem.svelte +25 -7
- package/lib/user/SelectUserInput.svelte +3 -2
- package/lib/user/UserSelect.svelte +6 -1
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
</script>
|
|
28
28
|
|
|
29
|
-
<MainMenu menu={menu} isOpen={isMenuOpen} ></MainMenu>
|
|
29
|
+
<MainMenu menu={menu} bind:isOpen={isMenuOpen} ></MainMenu>
|
|
30
30
|
|
|
31
31
|
<div id="main-container" class="{isMenuOpen ? 'menu-open' : ''}" >
|
|
32
32
|
<div style="display: contents">
|
|
@@ -49,53 +49,19 @@
|
|
|
49
49
|
transition: 0.3s all ease-in-out;
|
|
50
50
|
padding-bottom: 48px;
|
|
51
51
|
}
|
|
52
|
+
/* TODO: Integrate as a component
|
|
52
53
|
#main-container.menu-open {
|
|
53
|
-
width: calc(100% -
|
|
54
|
-
left:
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
#main-container section > article {
|
|
59
|
-
width: calc(100% - 48px);
|
|
60
|
-
max-width: min(calc(100% - 24px), 1100px) !important;
|
|
61
|
-
margin-bottom: 30px;
|
|
62
|
-
padding: 24px 24px;
|
|
63
|
-
background-color: #ffffff;
|
|
64
|
-
box-sizing: border-box;
|
|
65
|
-
border: 1px solid #e4e4e4;
|
|
66
|
-
border-radius: 8px;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
@media (max-width: 1040px) {
|
|
70
|
-
#main-container.menu-open > section {
|
|
71
|
-
width: 100%;
|
|
72
|
-
min-width: 300px;
|
|
73
|
-
}
|
|
74
|
-
nav {
|
|
75
|
-
z-index: 50;
|
|
76
|
-
}
|
|
77
|
-
#main-container.menu-open section > article {
|
|
78
|
-
width: calc(100% - 88px);
|
|
79
|
-
}
|
|
54
|
+
width: calc(100% - 285px);
|
|
55
|
+
left: 285px;
|
|
80
56
|
}
|
|
57
|
+
*/
|
|
81
58
|
|
|
82
59
|
@media (max-width: 780px) {
|
|
83
60
|
#main-container {
|
|
84
61
|
left: 0px;
|
|
62
|
+
width: 100%;
|
|
85
63
|
margin-top: 0px;
|
|
86
64
|
}
|
|
87
|
-
#main-container.menu-open {
|
|
88
|
-
width: 100vw;
|
|
89
|
-
left: 0px;
|
|
90
|
-
}
|
|
91
|
-
article {
|
|
92
|
-
width: calc(100% - 88px);
|
|
93
|
-
margin-bottom: 30px;
|
|
94
|
-
padding: 24px 24px;
|
|
95
|
-
}
|
|
96
|
-
#main-container section > article {
|
|
97
|
-
width: calc(100% - 88px);
|
|
98
|
-
}
|
|
99
65
|
}
|
|
100
66
|
</style>
|
|
101
67
|
|
|
@@ -8,7 +8,15 @@
|
|
|
8
8
|
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
<nav class="{isOpen ? '' : '
|
|
11
|
+
<nav class="{isOpen ? 'menu-open' : ''}">
|
|
12
|
+
<header>
|
|
13
|
+
<div class="{isOpen ? 'menu-open' : ''}" >
|
|
14
|
+
<div on:click={() => isOpen = !isOpen}>
|
|
15
|
+
<div></div><div></div><div></div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
12
20
|
<div class="logo" >
|
|
13
21
|
<!-- Logo -->
|
|
14
22
|
</div>
|
|
@@ -16,19 +24,86 @@
|
|
|
16
24
|
<div class="main">
|
|
17
25
|
<ul>
|
|
18
26
|
{#each menu.main as item}
|
|
19
|
-
<MenuItem item={item}></MenuItem>
|
|
27
|
+
<MenuItem item={item} isOpen={isOpen}></MenuItem>
|
|
20
28
|
{/each}
|
|
21
29
|
</ul>
|
|
22
30
|
</div>
|
|
23
31
|
|
|
24
32
|
<div class="bottom" >
|
|
25
33
|
{#each menu.bottom as item}
|
|
26
|
-
<MenuItem item={item}></MenuItem>
|
|
34
|
+
<MenuItem item={item} isOpen={isOpen} ></MenuItem>
|
|
27
35
|
{/each}
|
|
28
36
|
</div>
|
|
29
37
|
</nav>
|
|
30
38
|
|
|
31
39
|
<style>
|
|
40
|
+
header {
|
|
41
|
+
background-color: transparent;
|
|
42
|
+
height: 36px;
|
|
43
|
+
padding: 14px;
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 10px;
|
|
46
|
+
right: -11px;
|
|
47
|
+
z-index: 300;
|
|
48
|
+
}
|
|
49
|
+
header > div {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 10px;
|
|
52
|
+
left: 0px;
|
|
53
|
+
width: 32px;
|
|
54
|
+
height: 32px;
|
|
55
|
+
border-radius: 30px;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
background-color: #fff;
|
|
58
|
+
border: 1px solid var(--main-border-color);
|
|
59
|
+
transition: all ease-in-out 0.3s;
|
|
60
|
+
align-self: flex-end;
|
|
61
|
+
}
|
|
62
|
+
header > div > div {
|
|
63
|
+
position: relative;
|
|
64
|
+
top: -4px;
|
|
65
|
+
left: -2px;
|
|
66
|
+
width: 32px;
|
|
67
|
+
height: 32px;
|
|
68
|
+
}
|
|
69
|
+
header > div.menu-open {
|
|
70
|
+
background-color: #fff;
|
|
71
|
+
box-shadow: inset;
|
|
72
|
+
}
|
|
73
|
+
header > div > div > div{
|
|
74
|
+
display: inline-block;
|
|
75
|
+
position: absolute;
|
|
76
|
+
vertical-align: top;
|
|
77
|
+
background-color: #333;
|
|
78
|
+
border-radius: 0px;
|
|
79
|
+
height: 2px;
|
|
80
|
+
width: 16px;
|
|
81
|
+
transition: all 0.3s;
|
|
82
|
+
border-radius: 0px;
|
|
83
|
+
}
|
|
84
|
+
header > div > div > div:nth-of-type(1){
|
|
85
|
+
top: 15px;
|
|
86
|
+
left: 10px;
|
|
87
|
+
}
|
|
88
|
+
header > div > div > div:nth-of-type(2){
|
|
89
|
+
top: 20px;
|
|
90
|
+
left: 10px;
|
|
91
|
+
}
|
|
92
|
+
header > div > div > div:nth-of-type(3){
|
|
93
|
+
top: 24px;
|
|
94
|
+
left: 10px;
|
|
95
|
+
}
|
|
96
|
+
header > div.menu-open > div > div:nth-of-type(1){
|
|
97
|
+
top: 20px;
|
|
98
|
+
transform: rotate(45deg);
|
|
99
|
+
}
|
|
100
|
+
header > div.menu-open > div > div:nth-of-type(2){
|
|
101
|
+
display: none;
|
|
102
|
+
}
|
|
103
|
+
header > div.menu-open > div > div:nth-of-type(3){
|
|
104
|
+
top: 20px;
|
|
105
|
+
transform: rotate(-45deg);
|
|
106
|
+
}
|
|
32
107
|
nav {
|
|
33
108
|
background-color: var(--main-bg-color);
|
|
34
109
|
position: fixed;
|
|
@@ -44,14 +119,15 @@
|
|
|
44
119
|
transition: all ease-in-out 0.4s;
|
|
45
120
|
display: flex;
|
|
46
121
|
flex-direction: column;
|
|
47
|
-
align-items:
|
|
122
|
+
align-items: flex-start;
|
|
48
123
|
z-index: 200;
|
|
49
124
|
}
|
|
50
|
-
nav.
|
|
125
|
+
nav.menu-open {
|
|
51
126
|
transform: translateX(0px);
|
|
127
|
+
width: 285px;
|
|
52
128
|
}
|
|
53
129
|
nav > .logo {
|
|
54
|
-
width:
|
|
130
|
+
width: 48px;
|
|
55
131
|
height: 40px;
|
|
56
132
|
min-height: 40px;
|
|
57
133
|
background-image: var(--logo-minimized);
|
|
@@ -59,6 +135,7 @@
|
|
|
59
135
|
background-repeat: no-repeat;
|
|
60
136
|
background-position: center center;
|
|
61
137
|
margin-bottom: 32px;
|
|
138
|
+
margin-left: 17px;
|
|
62
139
|
}
|
|
63
140
|
|
|
64
141
|
nav > .main {
|
|
@@ -81,4 +158,26 @@
|
|
|
81
158
|
width: 30px;
|
|
82
159
|
}
|
|
83
160
|
|
|
161
|
+
|
|
162
|
+
@media (max-width: 780px) {
|
|
163
|
+
nav{
|
|
164
|
+
transform: translateX(-85px);
|
|
165
|
+
}
|
|
166
|
+
nav.menu-open {
|
|
167
|
+
transform: translateX(0px);
|
|
168
|
+
width: 285px;
|
|
169
|
+
}
|
|
170
|
+
header {
|
|
171
|
+
top: 10px;
|
|
172
|
+
right: initial;
|
|
173
|
+
left: 105px;
|
|
174
|
+
}
|
|
175
|
+
nav.menu-open > header {
|
|
176
|
+
left: 20px;
|
|
177
|
+
}
|
|
178
|
+
header > div {
|
|
179
|
+
border: none;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
84
183
|
</style>
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
export let item;
|
|
3
|
+
export let isOpen = false;
|
|
3
4
|
let isHover = false;
|
|
4
5
|
</script>
|
|
5
6
|
|
|
6
7
|
<li>
|
|
7
8
|
<a aria-label="{item.name} tab menu" href="{item.uri}" class="menu-item {item.selected ? 'selected' : ''}"
|
|
8
9
|
on:mouseenter={() => isHover = true} on:mouseleave={() => isHover = false} data-sveltekit-preload-data="off">
|
|
9
|
-
<div>
|
|
10
|
+
<div class="{isOpen ? 'menu-open' : ''}">
|
|
10
11
|
<div><!-- Lateral Color Border --></div>
|
|
11
|
-
<div style="background-image: url({item.selected || isHover ? item.iconHover: item.icon})"
|
|
12
|
+
<div style="background-image: url({item.selected || isHover ? item.iconHover: item.icon})">
|
|
13
|
+
{item.name}
|
|
14
|
+
</div>
|
|
12
15
|
</div>
|
|
13
16
|
</a>
|
|
14
17
|
</li>
|
|
@@ -39,26 +42,41 @@
|
|
|
39
42
|
.menu-item > div > div:nth-of-type(1) {
|
|
40
43
|
height: 100%;
|
|
41
44
|
width: 5px;
|
|
45
|
+
min-width: 5px;
|
|
42
46
|
background-color: transparent;
|
|
43
|
-
transition: all
|
|
47
|
+
transition: all linear 0.17s;
|
|
44
48
|
border-top-right-radius: 8px;
|
|
45
49
|
border-bottom-right-radius: 8px;
|
|
46
50
|
}
|
|
47
51
|
.menu-item > div > div:nth-of-type(2) {
|
|
48
52
|
height: 48px;
|
|
49
|
-
width:
|
|
53
|
+
width: 0px;
|
|
50
54
|
margin: 0px 12px;
|
|
51
55
|
border-radius: 12px;
|
|
52
56
|
background-size: 26px auto;
|
|
53
|
-
background-position:
|
|
57
|
+
background-position: 11px center;
|
|
54
58
|
background-repeat: no-repeat;
|
|
55
|
-
transition: all
|
|
59
|
+
transition: all linear 0.17s;
|
|
60
|
+
line-height: 48px;
|
|
61
|
+
padding-left: 48px;
|
|
62
|
+
overflow-x: hidden;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
color: var(--theme-text-darkgrey);
|
|
65
|
+
font-family: var(--theme-title-font);
|
|
66
|
+
}
|
|
67
|
+
.menu-item > div.menu-open > div:nth-of-type(2) {
|
|
68
|
+
height: 48px;
|
|
69
|
+
width: 200px;
|
|
70
|
+
display: flex;
|
|
56
71
|
}
|
|
57
|
-
|
|
58
72
|
.menu-item.selected > div > div:nth-of-type(1) {
|
|
59
73
|
background-color: var(--theme-main-color);
|
|
60
74
|
}
|
|
75
|
+
.menu-item.selected > div > div:nth-of-type(2) {
|
|
76
|
+
color: var(--theme-main-color);
|
|
77
|
+
}
|
|
61
78
|
.menu-item:hover > div > div:nth-of-type(2) {
|
|
62
79
|
background-color: var(--theme-bg-color-light);
|
|
80
|
+
color: var(--theme-main-color);
|
|
63
81
|
}
|
|
64
82
|
</style>
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
export let name;
|
|
7
7
|
export let value = null;
|
|
8
8
|
export let multiple = false;
|
|
9
|
+
export let parentId = null;
|
|
9
10
|
|
|
10
11
|
if (multiple && !value)
|
|
11
12
|
value = [];
|
|
@@ -41,13 +42,13 @@
|
|
|
41
42
|
</div>
|
|
42
43
|
{/each}
|
|
43
44
|
<div>
|
|
44
|
-
<UserSelect uri={'/user'} on:selectUser={handleSelect}></UserSelect>
|
|
45
|
+
<UserSelect uri={'/user'} on:selectUser={handleSelect} parentId={parentId}></UserSelect>
|
|
45
46
|
</div>
|
|
46
47
|
</div>
|
|
47
48
|
{:else}
|
|
48
49
|
<div id="single-select-wrapper" name={name} >
|
|
49
50
|
{#if !value}
|
|
50
|
-
<UserSelect uri={'/user'} bind:selected={value} ></UserSelect>
|
|
51
|
+
<UserSelect uri={'/user'} bind:selected={value} parentId={parentId}></UserSelect>
|
|
51
52
|
{:else}
|
|
52
53
|
<div class="user-label">
|
|
53
54
|
<UserPicture size={24} user={value}></UserPicture>
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
export let uri = '/user';
|
|
12
12
|
export let selected;
|
|
13
|
+
export let parentId = null;
|
|
13
14
|
|
|
14
15
|
let users = [];
|
|
15
16
|
let waiting = false;
|
|
@@ -23,7 +24,11 @@
|
|
|
23
24
|
async function handleFilter() {
|
|
24
25
|
waiting = true;
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
uri = `${uri}?contains=${search}&limit=15&page=1`
|
|
28
|
+
if (parentId)
|
|
29
|
+
uri = `${uri}&parentId=${parentId}`
|
|
30
|
+
|
|
31
|
+
const response = await fetch(uri, {
|
|
27
32
|
method: 'GET',
|
|
28
33
|
headers: { 'Content-Type': 'application/json' }
|
|
29
34
|
});
|