Skip to content

Commit 8b19248

Browse files
ywarnierywarnier
committed
Merge branch 'master' of github.com:chamilo/chamilo-lms
2 parents 332ede3 + 013a9cb commit 8b19248

File tree

19 files changed

+342
-301
lines changed

19 files changed

+342
-301
lines changed

‎assets/css/app.scss

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -272,12 +272,7 @@
272272
@apply w-auto;
273273
}
274274

275-
// Forms
276-
input {
277-
appearance: auto !important;
278-
border-width: 1px !important;
279-
}
280-
275+
// Form
281276
.has-error input, .has-error select {
282277
border-color: red !important;
283278
}

‎assets/css/scss/_exercise.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@
295295
}
296296

297297
.feedback-red {
298-
@apply text-danger line-through;
298+
@apply text-error line-through;
299299
}
300300

301301
.question-list-description-block {

‎assets/css/scss/atoms/_color_picker.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.color-picker {
2+
@apply flex flex-col justify-center gap-0 relative;
3+
4+
label {
5+
@apply absolute -top-2.5 left-2 text-caption px-1 bg-white text-primary z-[2] max-w-full truncate;
6+
}
7+
8+
input[type="color"] {
9+
@apply h-auto w-12 cursor-pointer p-2 bg-white border-support-3 border border-r-0 transition-none;
10+
}
11+
12+
.p-inputgroup .p-inputtext {
13+
@apply w-24 transition-none grow-0 shrink-0;
14+
}
15+
16+
&:hover {
17+
input[type="color"],
18+
.p-inputgroup .p-inputtext {
19+
@apply border-primary;
20+
}
21+
}
22+
23+
&:has(.p-inputtext:focus) {
24+
input[type="color"],
25+
input[type="color"] {
26+
@apply border-primary;
27+
}
28+
}
29+
}

‎assets/css/scss/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import "atoms/buttons";
2020
@import "atoms/calendar";
2121
@import "atoms/checkbox";
22+
@import "atoms/color_picker";
2223
@import "atoms/divider";
2324
@import "atoms/dropdown";
2425
@import "atoms/fieldset";

‎assets/vue/components/admin/ColorThemePreview.vue

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<script setup>
2+
import { provide, ref } from "vue"
3+
import { useI18n } from "vue-i18n"
4+
import BaseInputDate from "../basecomponents/BaseInputDate.vue"
5+
import BaseButton from "../basecomponents/BaseButton.vue"
6+
import BaseMenu from "../basecomponents/BaseMenu.vue"
7+
import BaseDialogConfirmCancel from "../basecomponents/BaseDialogConfirmCancel.vue"
8+
import BaseDropdown from "../basecomponents/BaseDropdown.vue"
9+
import BaseRadioButtons from "../basecomponents/BaseRadioButtons.vue"
10+
import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
11+
import BaseInputText from "../basecomponents/BaseInputText.vue"
12+
import BaseToggleButton from "../basecomponents/BaseToggleButton.vue"
13+
14+
const { t } = useI18n()
15+
16+
// properties for example components
17+
const menu = ref("menu")
18+
const menuItems = [{ label: t("Item 1") }, { label: t("Item 2") }, { label: t("Item 3") }]
19+
20+
const toggle = (event) => {
21+
menu.value.toggle(event)
22+
}
23+
24+
const dropdown = ref("")
25+
26+
const checkbox1 = ref(true)
27+
const checkbox2 = ref(false)
28+
29+
const radioButtons = [
30+
{ label: t("Value 1"), value: "value1" },
31+
{ label: t("Value 2"), value: "value2" },
32+
{ label: t("Value 3"), value: "value3" },
33+
]
34+
const radioValue = ref("value1")
35+
36+
const isDialogVisible = ref(false)
37+
38+
const toggleState = ref(true)
39+
40+
// needed for course tool
41+
const isSorting = ref(false)
42+
const isCustomizing = ref(false)
43+
44+
provide("isSorting", isSorting)
45+
provide("isCustomizing", isCustomizing)
46+
</script>
47+
48+
<template>
49+
<div class="admin-colors__settings-preview">
50+
<h6>{{ t("You can see examples of how chamilo will look here") }}</h6>
51+
52+
<div>
53+
<p class="mb-3 text-lg">{{ t("Buttons") }}</p>
54+
<div class="flex flex-row flex-wrap mb-3">
55+
<BaseButton
56+
:label="t('Primary')"
57+
class="mr-2 mb-2"
58+
icon="eye-on"
59+
type="primary"
60+
/>
61+
<BaseButton
62+
:label="t('Primary alternative')"
63+
class="mr-2 mb-2"
64+
icon="eye-on"
65+
type="primary-alternative"
66+
/>
67+
<BaseButton
68+
:label="t('Secondary')"
69+
class="mr-2 mb-2"
70+
icon="eye-on"
71+
type="secondary"
72+
/>
73+
<BaseButton
74+
:label="t('Tertiary')"
75+
class="mr-2 mb-2"
76+
icon="eye-on"
77+
type="black"
78+
/>
79+
</div>
80+
<div class="flex flex-row flex-wrap mb-3">
81+
<BaseButton
82+
:label="t('Success')"
83+
class="mr-2 mb-2"
84+
icon="send"
85+
type="success"
86+
/>
87+
<BaseButton
88+
:label="t('Info')"
89+
class="mr-2 mb-2"
90+
icon="send"
91+
type="info"
92+
/>
93+
<BaseButton
94+
:label="t('Warning')"
95+
class="mr-2 mb-2"
96+
icon="send"
97+
type="warning"
98+
/>
99+
<BaseButton
100+
:label="t('Danger')"
101+
class="mr-2 mb-2"
102+
icon="delete"
103+
type="danger"
104+
/>
105+
</div>
106+
<div class="flex flex-row flex-wrap mb-3">
107+
<BaseButton
108+
:label="t('Disabled')"
109+
class="mr-2 mb-2"
110+
disabled
111+
icon="eye-on"
112+
type="primary"
113+
/>
114+
<BaseButton
115+
class="mr-2 mb-2"
116+
icon="cog"
117+
only-icon
118+
type="primary"
119+
/>
120+
</div>
121+
</div>
122+
123+
<div>
124+
<p class="mb-3 text-lg">{{ t("Dropdowns") }}</p>
125+
<div class="flex flex-row gap-3">
126+
<BaseButton
127+
class="mr-3 mb-2"
128+
icon="cog"
129+
only-icon
130+
popup-identifier="menu"
131+
type="primary"
132+
@click="toggle"
133+
/>
134+
<BaseMenu
135+
id="menu"
136+
ref="menu"
137+
:model="menuItems"
138+
/>
139+
<BaseDropdown
140+
v-model="dropdown"
141+
:label="t('Dropdown')"
142+
:options="[
143+
{
144+
label: t('Option 1'),
145+
value: 'option_1',
146+
},
147+
{
148+
label: t('Option 2'),
149+
value: 'option_2',
150+
},
151+
{
152+
label: t('Option 3'),
153+
value: 'option_3',
154+
},
155+
]"
156+
class="w-36"
157+
input-id="dropdown"
158+
name="dropdown"
159+
option-label="label"
160+
option-value="value"
161+
/>
162+
</div>
163+
</div>
164+
165+
<div>
166+
<p class="mb-3 text-lg">{{ t("Checkbox and radio buttons") }}</p>
167+
<div class="flex flex-col md:flex-row gap-3 md:gap-5">
168+
<BaseRadioButtons
169+
v-model="radioValue"
170+
:initial-value="radioValue"
171+
:options="radioButtons"
172+
name="radio"
173+
/>
174+
<div>
175+
<BaseCheckbox
176+
id="check1"
177+
v-model="checkbox1"
178+
:label="t('Checkbox 1')"
179+
name="checkbox1"
180+
/>
181+
<BaseCheckbox
182+
id="check2"
183+
v-model="checkbox2"
184+
:label="t('Checkbox 2')"
185+
name="checkbox2"
186+
/>
187+
</div>
188+
</div>
189+
</div>
190+
191+
<div>
192+
<p class="mb-3 text-lg">{{ t("Toggle") }}</p>
193+
<BaseToggleButton
194+
:model-value="toggleState"
195+
:off-label="t('Show all')"
196+
:on-label="t('Hide all')"
197+
off-icon="eye-on"
198+
on-icon="eye-off"
199+
size="normal"
200+
without-borders
201+
@update:model-value="toggleState = !toggleState"
202+
/>
203+
</div>
204+
205+
<div>
206+
<p class="mb-3 text-lg">{{ t("Forms") }}</p>
207+
<BaseInputText
208+
:label="t('This is the default form')"
209+
:model-value="null"
210+
/>
211+
<BaseInputText
212+
:is-invalid="true"
213+
:label="t('This is a form with an error')"
214+
:model-value="null"
215+
/>
216+
<BaseInputDate
217+
id="date"
218+
:label="t('Date')"
219+
class="w-32"
220+
/>
221+
</div>
222+
223+
<div>
224+
<p class="mb-3 text-lg">{{ t("Dialogs") }}</p>
225+
<BaseButton
226+
:label="t('Show dialog')"
227+
icon="eye-on"
228+
type="black"
229+
@click="isDialogVisible = true"
230+
/>
231+
<BaseDialogConfirmCancel
232+
:is-visible="isDialogVisible"
233+
:title="t('Dialog example')"
234+
@confirm-clicked="isDialogVisible = false"
235+
@cancel-clicked="isDialogVisible = false"
236+
/>
237+
</div>
238+
<div>
239+
<p class="mb-3 text-lg">{{ t("Some more elements") }}</p>
240+
<div class="course-tool cursor-pointer">
241+
<div class="course-tool__link hover:primary-gradient hover:bg-primary-gradient/10">
242+
<span
243+
aria-hidden="true"
244+
class="course-tool__icon mdi mdi-bookshelf"
245+
/>
246+
</div>
247+
<p class="course-tool__title">{{ t("Documents") }}</p>
248+
</div>
249+
</div>
250+
</div>
251+
</template>

‎assets/vue/components/basecomponents/BaseColorPicker.vue

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
11
<template>
2-
<div class="flex flex-col justify-center gap-0">
3-
<p
2+
<div class="color-picker">
3+
<label
44
v-if="label"
5-
class="text-body-2 mb-1.5"
65
v-text="label"
76
/>
8-
<div class="flex flex-row gap-2 h-10">
7+
<InputGroup>
98
<input
109
:value="hexColor"
11-
class="h-12 w-12 cursor-pointer rounded-lg"
1210
type="color"
1311
@input="inputColorPicked($event.target.value)"
1412
/>
15-
<BaseInputText
16-
label=""
17-
class="w-32"
18-
input-class="mb-0"
13+
<InputText
14+
:invalid="inputHexError !== ''"
1915
:model-value="inputText"
20-
:error-text="inputHexError"
21-
:is-invalid="inputHexError !== ''"
22-
:form-submitted="inputHexError !== ''"
2316
@update:model-value="inputColorPickedFromInputText"
2417
/>
25-
</div>
18+
</InputGroup>
2619
<small
2720
v-if="error"
28-
class="text-danger h-4"
21+
class="p-error"
2922
>
3023
{{ error }}
3124
</small>
32-
<div
33-
v-else
34-
class="h-4"
35-
></div>
3625
</div>
3726
</template>
3827

3928
<script setup>
4029
import Color from "colorjs.io"
4130
import { computed, onMounted, ref, watch } from "vue"
4231
import { useI18n } from "vue-i18n"
43-
import BaseInputText from "./BaseInputText.vue"
32+
import InputGroup from "primevue/inputgroup"
33+
import InputText from "primevue/inputtext"
4434
4535
const { t } = useI18n()
4636

0 commit comments

Comments
 (0)