iconograph-ui 1.7.18 → 1.7.20
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/+page.svelte +2 -0
- package/example/src/routes/user/+page.svelte +12 -2
- package/example/static/css/testapp.css +8 -3
- package/lib/form/ActionButton.svelte +53 -18
- package/lib/form/Checkbox.svelte +2 -0
- package/lib/navigation/Button.svelte +10 -2
- package/lib/navigation/NavBar.svelte +8 -7
- package/package.json +1 -1
|
@@ -67,10 +67,20 @@
|
|
|
67
67
|
<span class="margin-l-s" style="text-transform: uppercase; color: #888; font-weight: 600;"></span>
|
|
68
68
|
</div>
|
|
69
69
|
<div style="margin-right: 0px; display: flex; gap: 8px;">
|
|
70
|
-
<ActionButton options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
|
|
70
|
+
<ActionButton options={[{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}}]} outline={true} ></ActionButton>
|
|
71
|
+
<ActionButton options={[{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}}]}></ActionButton>
|
|
71
72
|
<Button label={'Enregistrer'} icon={loaderIcon}></Button>
|
|
72
73
|
<Button label={'Enregistrer'} style={"outline"} icon={iconV}></Button>
|
|
73
|
-
<
|
|
74
|
+
<Button label={''} style={"min"} icon={loaderIcon}></Button>
|
|
75
|
+
<Button label={''} style={"outline min"} icon={iconV}></Button>
|
|
76
|
+
<ActionButton style={"icon"} options={[
|
|
77
|
+
{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}},
|
|
78
|
+
{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}},
|
|
79
|
+
{separator: true},
|
|
80
|
+
{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}},
|
|
81
|
+
{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}}
|
|
82
|
+
]}></ActionButton>
|
|
83
|
+
<ActionButton style={"icon"} options={[{label: "Supprimer les derniers", action: () => {alert();}}]} outline={true}></ActionButton>
|
|
74
84
|
</div>
|
|
75
85
|
</div>
|
|
76
86
|
</div>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
--background-color: #fcfcfc;
|
|
3
3
|
--main-bg-color: #ffffff;
|
|
4
4
|
--main-border-color: #e4e4e4;
|
|
5
|
+
--button-border-color: #e1e1e1;
|
|
5
6
|
|
|
6
7
|
--disabled-background-color: #555555;
|
|
7
8
|
|
|
@@ -13,20 +14,24 @@
|
|
|
13
14
|
--theme-text-darkgrey: #555555;
|
|
14
15
|
|
|
15
16
|
/** Inputs */
|
|
16
|
-
--theme-input-bg-color: #
|
|
17
|
+
--theme-input-bg-color: #f7f7f9;
|
|
17
18
|
--theme-input-bg-highlight: #efeff5;
|
|
18
|
-
--theme-input-bg-hover: #
|
|
19
|
+
--theme-input-bg-hover: #f2f2f2;
|
|
19
20
|
--theme-input-border: none; /*2px solid ebebed*/
|
|
20
21
|
--theme-input-outline: 2px solid var(--theme-main-color);
|
|
21
22
|
--theme-input-outline-offset: 2px;
|
|
22
23
|
--theme-input-border-failure: 2px solid #f95959;
|
|
23
24
|
--theme-input-height: 40px;
|
|
24
|
-
--theme-input-text-color: #
|
|
25
|
+
--theme-input-text-color: #121212;
|
|
25
26
|
|
|
26
27
|
/** Icons */
|
|
27
28
|
--logo-minimized: url('/favicon.svg');
|
|
28
29
|
--logo-large: url('/logo.svg');
|
|
29
30
|
|
|
31
|
+
/** Shadows */
|
|
32
|
+
--button-box-shadow: #77777733 0px 0px 0px 0px !important;
|
|
33
|
+
--button-hover-box-shadow: #77777733 0px 0px 0px 0px !important;
|
|
34
|
+
|
|
30
35
|
/** Fonts */
|
|
31
36
|
--theme-main-font: 'Montserrat';
|
|
32
37
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
export let options = [];
|
|
9
9
|
export let style = "classic";
|
|
10
|
+
export let outline = false;
|
|
10
11
|
|
|
11
12
|
let open = false;
|
|
12
13
|
let dropdownEl;
|
|
@@ -26,7 +27,7 @@
|
|
|
26
27
|
|
|
27
28
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
28
29
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
29
|
-
<div class="dropdown {open ? 'open' : ''} {style == "icon" ? 'icon' : ''}"
|
|
30
|
+
<div class="dropdown {open ? 'open' : ''} {style == "icon" ? 'icon' : ''} {outline ? 'outline' : '' }"
|
|
30
31
|
bind:this={dropdownEl} use:clickOutside on:click_outside={() => {open = false}}
|
|
31
32
|
on:click|preventDefault|stopPropagation={openDropdown}>
|
|
32
33
|
{#if style == "icon"}
|
|
@@ -38,12 +39,16 @@
|
|
|
38
39
|
<!-- Liste déroulante -->
|
|
39
40
|
{#if open}
|
|
40
41
|
<Portal target="#main-container" position={"top: 0px; right: 0px"}>
|
|
41
|
-
<div class="list" style="position: absolute; top:{coords.top +
|
|
42
|
+
<div class="list" style="position: absolute; top:{coords.top + 6}px; right:{coords.right - 0}px; width: {coords.width}px;" >
|
|
42
43
|
<!-- Options -->
|
|
43
44
|
{#each options as opt}
|
|
44
|
-
|
|
45
|
+
{#if opt.separator }
|
|
46
|
+
<hr />
|
|
47
|
+
{:else}
|
|
48
|
+
<div class="option" on:click={opt.action} style:background-image={`url("${opt.icon}")`} >
|
|
45
49
|
<span>{opt.label}</span>
|
|
46
50
|
</div>
|
|
51
|
+
{/if}
|
|
47
52
|
{/each}
|
|
48
53
|
</div>
|
|
49
54
|
</Portal>
|
|
@@ -67,27 +72,34 @@
|
|
|
67
72
|
}
|
|
68
73
|
.dropdown > div:first-of-type {
|
|
69
74
|
background-color: var(--theme-input-bg-highlight);
|
|
75
|
+
box-shadow: var(--button-box-shadow);
|
|
70
76
|
height: 32px;
|
|
71
77
|
border: none;
|
|
72
|
-
border-radius:
|
|
78
|
+
border-radius: 7px;
|
|
73
79
|
cursor: pointer;
|
|
74
80
|
padding: 0px 8px;
|
|
75
81
|
font-size: 14px;
|
|
76
|
-
line-height:
|
|
77
|
-
font-weight:
|
|
82
|
+
line-height: 32px;
|
|
83
|
+
font-weight: 500;
|
|
78
84
|
font-family: var(--theme-text-font);
|
|
79
|
-
color: #
|
|
85
|
+
color: #121212;
|
|
80
86
|
flex: 1;
|
|
81
|
-
min-width: 76px;
|
|
82
87
|
background-size: 14px auto;
|
|
83
88
|
background-repeat: no-repeat;
|
|
84
|
-
background-position: center right
|
|
85
|
-
padding-left:
|
|
86
|
-
|
|
89
|
+
background-position: center right 12px;
|
|
90
|
+
padding-left: 18px;
|
|
91
|
+
padding-right: 32px;
|
|
87
92
|
transition: all ease-in-out 0.17s;
|
|
88
93
|
}
|
|
94
|
+
.dropdown.outline > div:first-of-type {
|
|
95
|
+
height: 30px;
|
|
96
|
+
line-height: 30px;
|
|
97
|
+
border: 1px solid var(--button-border-color);
|
|
98
|
+
background-color: var(--main-bg-color);
|
|
99
|
+
}
|
|
89
100
|
.dropdown > div:first-of-type:hover {
|
|
90
101
|
background-color: var(--theme-input-bg-hover);
|
|
102
|
+
box-shadow: var(--button-hover-box-shadow);
|
|
91
103
|
}
|
|
92
104
|
.dropdown > div:first-of-type.icon {
|
|
93
105
|
min-width: 1px;
|
|
@@ -99,30 +111,45 @@
|
|
|
99
111
|
padding: 0px;
|
|
100
112
|
height: 32px;
|
|
101
113
|
}
|
|
114
|
+
.dropdown.outline > div:first-of-type.icon {
|
|
115
|
+
height: 30px;
|
|
116
|
+
line-height: 30px;
|
|
117
|
+
max-width: 30px;
|
|
118
|
+
border: 1px solid var(--button-border-color);
|
|
119
|
+
background-color: var(--main-bg-color);
|
|
120
|
+
}
|
|
121
|
+
.dropdown.outline > div:first-of-type:hover {
|
|
122
|
+
background-color: var(--theme-input-bg-highlight);
|
|
123
|
+
}
|
|
102
124
|
.list {
|
|
103
125
|
position: absolute;
|
|
104
126
|
top: 100%;
|
|
105
127
|
right: 0px;
|
|
106
128
|
background: #ffffff; /*var(--theme-input-bg-highlight, #ebebed);*/
|
|
107
|
-
border-radius:
|
|
129
|
+
border-radius: 7px;
|
|
108
130
|
padding: 8px 0px;
|
|
109
131
|
max-height: 220px;
|
|
110
132
|
overflow-y: auto;
|
|
111
133
|
z-index: 9999;
|
|
112
|
-
min-width:
|
|
113
|
-
border: 1px solid
|
|
114
|
-
box-shadow: #
|
|
134
|
+
min-width: 260px;
|
|
135
|
+
border: 1px solid var(--button-border-color);
|
|
136
|
+
box-shadow: #77777715 0 3px 10px;
|
|
115
137
|
}
|
|
116
138
|
.option {
|
|
117
139
|
display: flex;
|
|
118
140
|
align-items: center;
|
|
119
|
-
padding: 8px
|
|
141
|
+
padding: 8px 12px 8px 36px;
|
|
142
|
+
margin: 0px 8px;
|
|
120
143
|
gap: 8px;
|
|
121
144
|
cursor: pointer;
|
|
145
|
+
border-radius: 5px;
|
|
146
|
+
background-size: 20px auto;
|
|
147
|
+
background-repeat: no-repeat;
|
|
148
|
+
background-position: center left 8px;
|
|
122
149
|
}
|
|
123
150
|
.option > span {
|
|
124
151
|
font-size: 14px;
|
|
125
|
-
line-height:
|
|
152
|
+
line-height: 20px;
|
|
126
153
|
font-weight: 400;
|
|
127
154
|
font-family: var(--theme-text-font);
|
|
128
155
|
color: var(--theme-input-text-color);
|
|
@@ -131,6 +158,14 @@
|
|
|
131
158
|
text-overflow: ellipsis;
|
|
132
159
|
}
|
|
133
160
|
.option:hover {
|
|
134
|
-
background: var(--theme-input-bg-
|
|
161
|
+
background-color: var(--theme-input-bg-color);
|
|
162
|
+
}
|
|
163
|
+
hr {
|
|
164
|
+
color: var(--button-border-color);
|
|
165
|
+
height: 0;
|
|
166
|
+
line-height: 0;
|
|
167
|
+
margin: 7px 12px;
|
|
168
|
+
border-top: 1px solid var(--button-border-color);
|
|
169
|
+
border-bottom: 0px solid var(--button-border-color);
|
|
135
170
|
}
|
|
136
171
|
</style>
|
package/lib/form/Checkbox.svelte
CHANGED
|
@@ -34,9 +34,9 @@ a, button {
|
|
|
34
34
|
display: inline-block;
|
|
35
35
|
background-color: var(--theme-main-color);
|
|
36
36
|
color: #ffffff !important;
|
|
37
|
-
|
|
37
|
+
box-shadow: var(--button-box-shadow);
|
|
38
38
|
border: 1px solid var(--theme-main-color);
|
|
39
|
-
border-radius:
|
|
39
|
+
border-radius: 7px;
|
|
40
40
|
height: 30px;
|
|
41
41
|
line-height: 30px !important;
|
|
42
42
|
font-size: 13px;
|
|
@@ -86,6 +86,14 @@ a:disabled {
|
|
|
86
86
|
background-size: 18px;
|
|
87
87
|
padding-left: 36px;
|
|
88
88
|
}
|
|
89
|
+
.min {
|
|
90
|
+
min-width: 30px;
|
|
91
|
+
border: 1px solid var(--theme-main-color);
|
|
92
|
+
padding: 0px 0px;
|
|
93
|
+
background-position: center center;
|
|
94
|
+
background-size: 18px;
|
|
95
|
+
padding-left: 0px;
|
|
96
|
+
}
|
|
89
97
|
.disabled {
|
|
90
98
|
background-color: #eee;
|
|
91
99
|
color: #888 !important;
|
|
@@ -4,16 +4,17 @@
|
|
|
4
4
|
export let tabs;
|
|
5
5
|
export let currentTab;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
history.replaceState(null, '', `#${currentTab}`);
|
|
9
|
-
}*/
|
|
10
|
-
|
|
11
|
-
/*onMount(() => {
|
|
7
|
+
onMount(() => {
|
|
12
8
|
const hash = window.location.hash.replace('#', '');
|
|
13
9
|
|
|
14
10
|
if (hash && Object.keys(tabs).includes(hash))
|
|
15
11
|
currentTab = hash;
|
|
16
|
-
})
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
function onChangeTab(key) {
|
|
15
|
+
currentTab = key;
|
|
16
|
+
history.replaceState({}, "", `#${key}`);
|
|
17
|
+
}
|
|
17
18
|
|
|
18
19
|
</script>
|
|
19
20
|
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
{#each Object.keys(tabs) as key}
|
|
22
23
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
23
24
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
24
|
-
<div on:click={() => {
|
|
25
|
+
<div on:click={() => {onChangeTab(key)}} class="{currentTab == key ? 'selected' : ''}">
|
|
25
26
|
{tabs[key]}
|
|
26
27
|
</div>
|
|
27
28
|
{/each}
|