chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Minor - Update UI

Browse Source
pull/3890/head
Julio Montoya 4 years ago
parent 54f383b204
commit b121368d8c
3 changed files with 255 additions and 144 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 120
      assets/vue/components/sidebar/Header.vue
  2. 271
      assets/vue/components/sidebar/Sidebar.vue
  3. 8
      assets/vue/views/course/Home.vue

120
assets/vue/components/sidebar/Header.vue
Unescape View File

@ -4,18 +4,29 @@
>
<div class="flex items-center" v-if="isAuthenticated">
<q-tabs align="center" dense inline-label no-caps>
<q-route-tab to="/" label="Home" />
<q-route-tab to="/courses" label="My courses" />
<q-route-tab to="/main/calendar/agenda_js.php?type=personal" label="Agenda" />
</q-tabs>
<!-- <router-link :to="{name: 'Home'}" tag="button" class="flex items-center justify-center h-10 px-4 ml-auto text-sm font-medium rounded hover:bg-gray-300">-->
<!-- Home-->
<!-- </router-link>-->
<!-- <router-link :to="{name: 'MyCourses'}" tag="button" class="flex items-center justify-center h-10 px-4 ml-2 text-sm font-medium bg-gray-200 rounded hover:bg-gray-300">-->
<!-- My courses-->
<!-- </router-link>-->
<!-- <q-tabs align="center" dense inline-label no-caps>-->
<!-- <q-route-tab to="/" label="Home" />-->
<!-- <q-route-tab to="/courses" label="My courses" />-->
<!-- <q-route-tab to="/main/calendar/agenda_js.php?type=personal" label="Agenda" />-->
<!-- </q-tabs>-->
<div class="w-full hidden md:flex items-center">
<router-link
:to="{name: 'Home'}"
tag="a"
class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent pr-6"
>
Home
</router-link>
<router-link
:to="{name: 'MyCourses'}"
tag="a"
class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent pr-6"
>
My courses
</router-link>
</div>
</div>
<div class="flex items-center">
@ -145,7 +156,11 @@
<q-item href="/account/edit" tag="a" class="">
<q-item-section>Settings</q-item-section>
</q-item>
<q-item href="/logout" tag="a" clickable class="">
<!-- href="/logout"-->
<q-item
@click.prevent="logoutAction"
tag="a" clickable class="">
<q-item-section>
Sign out
</q-item-section>
@ -155,7 +170,10 @@
</div>
<div v-else class="relative">
<router-link :to="'/login'" tag="button" class="flex items-center justify-center h-10 px-4 ml-2 text-sm font-medium bg-gray-200 rounded hover:bg-gray-300">
<router-link
:to="'/login'"
tag="button"
class="btn btn-primary">
Sign in
</router-link>
</div>
@ -164,17 +182,25 @@
</template>
<script lang="ts">
import { defineComponent, ref, toRefs } from "vue";
import {computed, defineComponent, ref, toRefs} from "vue";
import { useSidebar } from "../../hooks/useSidebar";
import isEmpty from "lodash";
import {mapGetters} from "vuex";
import TabMenu from 'primevue/tabmenu';
import axios from "axios";
import { useStore } from 'vuex';
import {useRouter} from "vue-router";
export default defineComponent({
components: {
TabMenu
},
setup() {
const dropdownOpen = ref(false);
const { isOpen } = useSidebar();
const userAvatar = ref(window.userAvatar);
console.log('defineComponent window.user');
console.log(window.user);
console.log(window.userAvatar);
@ -184,10 +210,71 @@ export default defineComponent({
userAvatar.value = window.userAvatar;
//isAuthenticated = true;
}
const store = useStore();
//const user = computed(() => store.getters['security/getUser']);
const router = useRouter();
async function logoutAction() {
console.log('logout');
await store.dispatch('security/logout');
router.push({path: '/'});
/*axios.get('/logout').then(response => {
console.log(response);
localStorage.removeItem('auth_token');
localStorage.removeItem('vuex');
// remove any other authenticated user data you put in local storage
// Assuming that you set this earlier for subsequent Ajax request at some point like so:
// axios.defaults.headers.common['Authorization'] = 'Bearer ' + auth_token ;
delete axios.defaults.headers.common['Authorization'];
// If using 'vue-router' redirect to login page
//this.$router.go('/login');
})
.catch(error => {
// If the api request failed then you still might want to remove
// the same data from localStorage anyways
// perhaps this code should go in a finally method instead of then and catch
// methods to avoid duplication.
localStorage.removeItem('auth_token');
delete axios.defaults.headers.common['Authorization'];
//this.$router.go('/login');
});*/
}
console.log(userAvatar.value);
const items = ref([
{
label: 'Home',
icon: 'pi pi-fw pi-home',
to: '/'
},
{
label: 'Calendar',
icon: 'pi pi-fw pi-calendar',
to: '/calendar'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
to: '/edit'
},
{
label: 'Documentation',
icon: 'pi pi-fw pi-file',
to: '/documentation'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
to: '/settings'
}
]);
return {
logoutAction,
items,
userAvatar,
isOpen,
dropdownOpen,
@ -198,6 +285,7 @@ export default defineComponent({
'isAuthenticated': 'security/isAuthenticated',
'isAdmin': 'security/isAdmin',
'currentUser': 'security/getUser',
'logout': 'security/logout',
}),
},
});

271
assets/vue/components/sidebar/Sidebar.vue
Unescape View File

@ -15,136 +15,154 @@
<div class="flex items-center justify-center mt-4">
<div class="flex items-center">
<span class="text-white text-2xl mx-2 font-semibold">
<img style="width:200px" src="/build/css/themes/chamilo/images/header-logo.png" />
<img class="" style="width:200px" src="/build/css/themes/chamilo/images/header-logo.png" />
<img class="hidden w-5" src="/build/css/themes/chamilo/images/avatar.svg" />
</span>
</div>
</div>
<nav class="mt-2">
<q-list v-if="isAuthenticated" padding class="text-grey-8">
<q-item class="GNL__drawer-item" v-ripple v-for="link in links1" :key="link.text" :to="link.url" clickable>
<q-item-section avatar>
<!-- <q-icon :name="link.icon" />-->
<span class="w-6 h-6 stroke-current">
<font-awesome-icon :icon="link.icon" size="lg" />
</span>
</q-item-section>
<q-item-section>
<q-item-label>{{ link.text }}</q-item-label>
</q-item-section>
</q-item>
<q-separator inset class="q-my-sm" />
<span v-if="isAdmin">
<q-item class="GNL__drawer-item" v-ripple v-for="link in links2" :key="link.text" :to="link.url" clickable>
<q-item-section avatar>
<!-- <q-icon :name="link.icon" />-->
<span class="w-6 h-6 stroke-current">
<font-awesome-icon :icon="link.icon" size="lg" />
</span>
<div class="overflow-y-auto overflow-x-hidden flex-grow">
<ul class="flex flex-col py-4 space-y-1">
</q-item-section>
<q-item-section>
<q-item-label>{{ link.text }}</q-item-label>
</q-item-section>
</q-item>
</span>
<q-separator inset class="q-my-sm" />
<q-item class="GNL__drawer-item" v-ripple v-for="link in links3" :key="link.text" clickable>
<q-item-section>
<q-item-label>{{ link.text }}
<q-icon v-if="link.icon" :name="link.icon" />
</q-item-label>
</q-item-section>
</q-item>
<div class="q-mt-md">
<div class="flex flex-center q-gutter-xs">
<a class="GNL__drawer-footer-link" href="javascript:void(0)" aria-label="About">Chamilo</a>
</div>
</div>
</q-list>
<q-list v-else padding class="text-grey-8">
<q-item class="GNL__drawer-item" v-ripple v-for="link in linksAnon" :key="link.text" :to="link.url" clickable>
<q-item-section avatar>
<q-icon :name="link.icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ link.text }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<!-- <router-link-->
<!-- class="flex items-center duration-200 mt-4 py-2 px-6 border-l-4"-->
<!-- :class="[$route.name === 'Dashboard' ? activeClass : inactiveClass]"-->
<!-- to="/dashboard"-->
<!-- >-->
<!-- <svg-->
<!-- class="h-5 w-5"-->
<!-- viewBox="0 0 20 20"-->
<!-- fill="none"-->
<!-- xmlns="http://www.w3.org/2000/svg"-->
<!-- >-->
<!-- <path-->
<!-- d="M2 10C2 5.58172 5.58172 2 10 2V10H18C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z"-->
<!-- fill="currentColor"-->
<!-- />-->
<!-- <path-->
<!-- d="M12 2.25195C14.8113 2.97552 17.0245 5.18877 17.748 8.00004H12V2.25195Z"-->
<!-- fill="currentColor"-->
<!-- />-->
<!-- </svg>-->
<!-- <span class="mx-4">Dashboard</span>-->
<!-- </router-link>-->
<!-- <span v-if="!isAuthenticated">-->
<!-- <router-link-->
<!-- class="flex items-center duration-200 mt-4 py-2 px-6 border-l-4"-->
<!-- v-for="link in linksAnon" :to="link.url"-->
<!-- >-->
<!-- <span class="w-6 h-6 stroke-current">-->
<!-- <font-awesome-icon :icon="link.icon" size="lg" />-->
<!-- </span>-->
<!-- <span class="mx-4 ">-->
<!-- {{ link.text }}-->
<!-- </span>-->
<!-- </router-link>-->
<!-- </span>-->
<!-- <span v-if="isAuthenticated">-->
<!-- <router-link-->
<!-- class="flex items-center duration-200 mt-4 py-2 px-6 border-l-4"-->
<!-- v-for="link in links1" :to="link.url"-->
<!-- >-->
<!-- <span class="w-6 h-6 stroke-current">-->
<!-- <font-awesome-icon :icon="link.icon" size="lg" />-->
<!-- </span>-->
<!-- <span class="mx-4 ">-->
<!-- {{ link.text }}-->
<!-- </span>-->
<!-- </router-link>-->
<!-- <router-link-->
<!-- class="flex items-center duration-200 mt-4 py-2 px-6 border-l-4"-->
<!-- v-for="link in links2" :to="link.url">-->
<!-- <span class="w-6 h-6 stroke-current">-->
<!-- <font-awesome-icon :icon="link.icon" size="lg" />-->
<!-- </span>-->
<!-- <span class="mx-4 ">-->
<!-- {{ link.text }}-->
<li v-for="link in linksAnon" :key="link.text" >
<router-link
class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6"
:to="link.url">
<span class="inline-flex justify-center items-center ml-4">
<span class="w-5 h-5">
<font-awesome-icon :icon="link.icon" />
</span>
<span class="ml-2 text-sm tracking-wide truncate">{{ link.text }}</span>
</span>
</router-link>
</li>
<!-- <li class="px-5">-->
<!-- <div class="flex flex-row items-center h-8">-->
<!-- <div class="text-sm font-light tracking-wide text-gray-500">Menu</div>-->
<!-- </div>-->
<!-- </li>-->
<!-- -->
<!-- <li>-->
<!-- <a href="/"-->
<!-- class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">-->
<!-- <span class="inline-flex justify-center items-center ml-4">-->
<!-- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"-->
<!-- xmlns="http://www.w3.org/2000/svg">-->
<!-- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"-->
<!-- d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>-->
<!-- </span>-->
<!-- <span class="ml-2 text-sm tracking-wide truncate">Home</span>-->
<!-- </a>-->
<!-- </li>-->
<!-- -->
<!-- <li>-->
<!-- <a href="#"-->
<!-- class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">-->
<!-- <span class="inline-flex justify-center items-center ml-4">-->
<!-- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"-->
<!-- xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round"-->
<!-- stroke-width="2"-->
<!-- d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>-->
<!-- </span>-->
<!-- <span class="ml-2 text-sm tracking-wide truncate">Inbox</span>-->
<!-- <span-->
<!-- class="px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-indigo-500 bg-indigo-50 rounded-full">New</span>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#"-->
<!-- class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">-->
<!-- <span class="inline-flex justify-center items-center ml-4">-->
<!-- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"-->
<!-- xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round"-->
<!-- stroke-width="2"-->
<!-- d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>-->
<!-- </span>-->
<!-- <span class="ml-2 text-sm tracking-wide truncate">Messages</span>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#"-->
<!-- class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">-->
<!-- <span class="inline-flex justify-center items-center ml-4">-->
<!-- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"-->
<!-- xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round"-->
<!-- stroke-width="2"-->
<!-- d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>-->
<!-- </span>-->
<!-- </router-link>-->
<!-- </span>-->
<!-- <span class="ml-2 text-sm tracking-wide truncate">Notifications</span>-->
<!-- <span class="px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-red-500 bg-red-50 rounded-full">1.2k</span>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class="px-5">-->
<!-- <div class="flex flex-row items-center h-8">-->
<!-- <div class="text-sm font-light tracking-wide text-gray-500">Tasks</div>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#"-->
<!-- class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">-->
<!-- <span class="inline-flex justify-center items-center ml-4">-->
<!-- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"-->
<!-- xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round"-->
<!-- stroke-width="2"-->
<!-- d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>-->
<!-- </span>-->
<!-- <span class="ml-2 text-sm tracking-wide truncate">Available Tasks</span>-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#"-->
<!-- class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6">-->
<!-- <span class="inline-flex justify-center items-center ml-4">-->
<!-- <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"-->
<!-- xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round"-->
<!-- stroke-width="2"-->
<!-- d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>-->
<!-- </span>-->
<!-- <span class="ml-2 text-sm tracking-wide truncate">Clients</span>-->
<!-- <span-->
<!-- class="px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-green-500 bg-green-50 rounded-full">15</span>-->
<!-- </a>-->
<!-- </li>-->
<li v-for="link in topLinks" :key="link.text" >
<router-link
class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6"
:to="link.url">
<span class="inline-flex justify-center items-center ml-4">
<span class="w-5 h-5">
<font-awesome-icon :icon="link.icon" />
</span>
<span class="ml-2 text-sm tracking-wide truncate">{{ link.text }}</span>
</span>
</router-link>
</li>
</nav>
<li class="px-5">
<div class="flex flex-row items-center h-8">
<div class="text-sm font-light tracking-wide text-gray-500">Settings</div>
</div>
</li>
<li v-for="link in settingsLink" :key="link.text" >
<router-link
class="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-50 text-gray-600 hover:text-gray-800 border-l-4 border-transparent hover:border-indigo-500 pr-6"
:to="link.url">
<span class="inline-flex justify-center items-center ml-4">
<span class="w-5 h-5">
<font-awesome-icon :icon="link.icon" />
</span>
<span class="ml-2 text-sm tracking-wide truncate">{{ link.text }}</span>
</span>
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
@ -157,6 +175,8 @@ import {mapGetters} from "vuex";
export default defineComponent({
setup() {
const { isOpen } = useSidebar();
const selected = ref(null);
const activeClass = ref(
"bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100"
);
@ -164,7 +184,7 @@ export default defineComponent({
"border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100"
);
const links1 = [
const topLinks = [
// { icon: 'person', url: '/courses', text: 'My courses' },
// { icon: 'star_border', url: '/sessions', text: 'Sessions' },
//{ icon: 'star_border', url: '/calendar', text: 'My calendar' },
@ -172,7 +192,7 @@ export default defineComponent({
// { icon: 'star_border', url: '/news', text: 'News' },
];
const links2 = [
const settingsLink = [
{ icon: 'users', url: '/main/admin/user_list.php', text: 'Users' },
{ icon: 'book', url: '/main/admin/course_list.php', text: 'Courses' },
{ icon: 'book-open', url: '/main/session/session_list.php', text: 'Sessions' },
@ -185,9 +205,10 @@ export default defineComponent({
];
return {
selected,
linksAnon,
links1,
links2,
topLinks,
settingsLink,
isOpen,
activeClass,
inactiveClass,

8
assets/vue/views/course/Home.vue
Unescape View File

@ -7,8 +7,10 @@
<div v-for="categories in tools" class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
<div v-for="tool in categories" class="bg-gray-100 rounded-xl p-4 shadow-md">
<div class="flex flex-col flex-center">
<q-avatar rounded>
<a :href="goToCourse(course, tool)" class="flex flex-col flex-center">
<q-avatar rounded >
<img
:alt="tool.name"
:src="'/img/tools/' + tool.name + '.png'"
@ -23,7 +25,7 @@
</a>
</div>
</q-item-section>
</div>
</a>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save