* Create BaseButton to create a consistent button across all code * Create BaseIcon to restrict the icons used across all code * Create BaseMenu as starting point for menu component consistent across all code * Fix not loaded header logo of chamilo, importing in the component make the url resolution correctly * Fix colors of tailwind according to figma * Disable vuetify due to a crash with tailwind stylespull/4713/head
Daniel Gayoso González
2 years ago
parent
90ac8fd7a1
commit
af02b6b1b0
@ -0,0 +1,114 @@ |
||||
<template> |
||||
<Button |
||||
class="cursor-pointer" |
||||
plain |
||||
:label="label" |
||||
:class="buttonClass" |
||||
:outlined="primeOutlinedProperty" |
||||
:text="primeTextProperty" |
||||
:severity="primeSeverityProperty" |
||||
@click="$emit('click', $event)" |
||||
> |
||||
<BaseIcon class="text-inherit" :icon="icon"/> |
||||
<span |
||||
v-if="!props.onlyIcon" |
||||
class="hidden md:block text-inherit" |
||||
> |
||||
{{ label }} |
||||
</span> |
||||
</Button> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import Button from "primevue/button"; |
||||
import {chamiloIconToClass} from "./ChamiloIcons"; |
||||
import BaseIcon from "./BaseIcon.vue"; |
||||
import {computed} from "vue"; |
||||
|
||||
const props = defineProps({ |
||||
label: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
icon: { |
||||
type: String, |
||||
required: true, |
||||
validator: (value) => { |
||||
if (typeof (value) !== "string") { |
||||
return false; |
||||
} |
||||
return Object.keys(chamiloIconToClass).includes(value); |
||||
} |
||||
}, |
||||
type: { |
||||
type: String, |
||||
required: true, |
||||
validator: (value) => { |
||||
if (typeof (value) !== "string") { |
||||
return false |
||||
} |
||||
return ["primary", "secondary", "black"].includes(value); |
||||
} |
||||
}, |
||||
// associate this button to a popup through its identifier, this will make this button toggle the popup |
||||
popupIdentifier: { |
||||
type: String, |
||||
default: "" |
||||
}, |
||||
onlyIcon: { |
||||
type: Boolean, |
||||
default: false, |
||||
} |
||||
}); |
||||
|
||||
defineEmits(["click"]); |
||||
|
||||
const buttonClass = computed(() => { |
||||
if (props.onlyIcon) { |
||||
return "p-3"; |
||||
} |
||||
let result = "py-2.5 px-4 "; |
||||
switch (props.type) { |
||||
case "primary": |
||||
result += "border-primary hover:bg-primary text-primary hover:text-white"; |
||||
break; |
||||
case "secondary": |
||||
result += "bg-secondary hover:bg-secondary-gradient text-white"; |
||||
break; |
||||
} |
||||
return result; |
||||
}); |
||||
|
||||
// https://primevue.org/button/#outlined |
||||
const primeOutlinedProperty = computed(() => { |
||||
if (props.onlyIcon) { |
||||
return false; |
||||
} |
||||
switch (props.type) { |
||||
case "primary": |
||||
return true; |
||||
case "black": |
||||
return true; |
||||
default: |
||||
return false; |
||||
} |
||||
}); |
||||
|
||||
// https://primevue.org/button/#text |
||||
const primeTextProperty = computed(() => { |
||||
return props.onlyIcon; |
||||
}); |
||||
|
||||
// https://primevue.org/button/#severity primary and secondary modified by chamilo |
||||
const primeSeverityProperty = computed(() => { |
||||
if (props.onlyIcon) { |
||||
return "primary"; |
||||
} |
||||
switch (props.type) { |
||||
case "secondary": |
||||
return "danger"; |
||||
default: |
||||
return "primary"; |
||||
} |
||||
}); |
||||
</script> |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<i class="text-xl/4" :class="iconClass"/> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import {computed} from "vue"; |
||||
import {chamiloIconToClass} from "./ChamiloIcons"; |
||||
|
||||
|
||||
const props = defineProps({ |
||||
icon: { |
||||
type: String, |
||||
required: true, |
||||
validator: (value) => { |
||||
if (typeof (value) !== "string") { |
||||
return false |
||||
} |
||||
return Object.keys(chamiloIconToClass).includes(value) |
||||
} |
||||
}, |
||||
}); |
||||
|
||||
const iconClass = computed(() => { |
||||
return chamiloIconToClass[props.icon]; |
||||
}); |
||||
</script> |
||||
@ -0,0 +1,45 @@ |
||||
<template> |
||||
<Menu |
||||
:id="id" |
||||
ref="menu" |
||||
:model="innerModel" |
||||
:popup="true" |
||||
class="app-topbar__user-submenu" |
||||
/> |
||||
<!-- this class should use tailwind in the future --> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import Menu from "primevue/menu"; |
||||
import {ref, computed} from "vue"; |
||||
|
||||
const props = defineProps({ |
||||
id: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
model: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}) |
||||
|
||||
const innerModel = computed(() => { |
||||
return props.model.map(e => { |
||||
return { |
||||
...e, |
||||
'class': 'text-primary', |
||||
}; |
||||
}); |
||||
}) |
||||
|
||||
const menu = ref(null); |
||||
|
||||
const toggle = (event) => { |
||||
menu.value.toggle(event); |
||||
}; |
||||
|
||||
defineExpose({ |
||||
toggle, |
||||
}); |
||||
</script> |
||||
@ -0,0 +1,55 @@ |
||||
/** |
||||
* Use it like chamiloIconToClass['eye'] to get the correct class for an icon |
||||
* |
||||
* Transform name of icons according to https://github.com/chamilo/chamilo-lms/wiki/Graphical-design-guide#default-icons-terminology
|
||||
* to the classes needed for represent every icon |
||||
*/ |
||||
export const chamiloIconToClass = { |
||||
"pencil": "mdi mdi-pencil", |
||||
"delete": "", |
||||
"hammer-wrench": "", |
||||
"download": "", |
||||
"download-box": "", |
||||
"upload": "", |
||||
"arrow-left-bold-box": "", |
||||
"account-multiple-plus": "", |
||||
"cursor-move": "", |
||||
"chevron-left": "", |
||||
"chevron-right": "", |
||||
"arrow-up-bold": "", |
||||
"arrow-down-bold": "", |
||||
"arrow-right-bold": "", |
||||
"magnify-plus-outline": "", |
||||
"archive-arrow-up": "", |
||||
"folder-multiple-plus": "", |
||||
"folder-plus": "", |
||||
"alert": "", |
||||
"checkbox-marked": "", |
||||
"pencil-off": "", |
||||
"eye": "mdi mdi-eye", |
||||
"eye-off": "", |
||||
"checkbox-multiple-blank": "", |
||||
"checkbox-multiple-blank-outline": "", |
||||
"sync": "", |
||||
"sync-circle": "", |
||||
"fullscreen": "", |
||||
"fullscreen-exit": "", |
||||
"overscan": "", |
||||
"play-box-outline": "", |
||||
"fit-to-screen": "", |
||||
"bug-check": "", |
||||
"bug-outline": "", |
||||
"package": "", |
||||
"text-box-plus": "", |
||||
"rocket-launch": "", |
||||
"file-pdf-box": "", |
||||
"content-save": "", |
||||
"send": "", |
||||
"file-plus": "", |
||||
"cloud-upload": "", |
||||
"dots-vertical": "", |
||||
"information": "", |
||||
"account-key": "", |
||||
"cog": "mdi mdi-cog", |
||||
"plus": "mdi mdi-plus", |
||||
}; |
||||
Loading…
Reference in new issue