Skip to content

K
karname-ui
Commit 51143539 authored by Reza Sahebgharan's avatar Reza Sahebgharan
Browse files
Options

main layout LTR Mode

parent 9c95e5db
Show whitespace changes
Inline Side-by-side
Showing with 289 additions and 61 deletions
client/App.vue
View file @ 51143539
<template> <template>
<v-app> <v-app>
<v-content>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<keep-alive> <keep-alive>
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
</transition> </transition>
</v-content>
</v-app> </v-app>
</template> </template>
......
client/components/AppFooter.vue
View file @ 51143539
<template> <template>
<v-footer elevation="24" app class="d-flex" color="teal lighten-3"> <v-footer inset elevation="24" color="teal lighten-3" app height="70">
<v-row justify="center" align="center" class="text-center red--text"> <v-row justify="center" align="center" class="text-center red--text">
<v-menu transition="slide-x-transition"> <v-menu transition="slide-x-transition">
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
...@@ -46,7 +46,6 @@ export default { ...@@ -46,7 +46,6 @@ export default {
.changeLangBtn { .changeLangBtn {
position: absolute; position: absolute;
left: 0; left: 0;
top: 19px;
} }
</style>> </style>>
......
client/components/AppHeader.vue
View file @ 51143539
<template> <template>
<v-app-bar app elevation="24" color="teal lighten-3"> <div>
<v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title> <v-navigation-drawer v-model="drawerRight" app clipped right>
<v-spacer></v-spacer> <v-list dense>
<v-btn text color="red red--text" :to="btnTo"> <v-list-item @click.stop="right = !right">
<v-icon left>{{ btnIconName }}</v-icon> <v-list-item-action>
<strong>{{$t(btnLabel)}}</strong> <v-icon>mdi-exit-to-app</v-icon>
</v-btn> </v-list-item-action>
<v-list-item-content>
<v-list-item-title>Open Temporary Drawer</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar app clipped-right color="blue-grey" dark>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Toolbar</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
</v-app-bar> </v-app-bar>
</template>
<script> <v-navigation-drawer v-model="drawer" app>
export default { <v-list dense>
name: "app-header", <v-list-item @click.stop="left = !left">
data() { <v-list-item-action>
return { <v-icon>mdi-exit-to-app</v-icon>
btnTo: null </v-list-item-action>
}; <v-list-item-content>
}, <v-list-item-title>Open Temporary Drawer</v-list-item-title>
props: ["btnToProp", "btnLabel", "btnIconName"], </v-list-item-content>
created() { </v-list-item>
this.btnTo = "/" + this.btnToProp; </v-list>
} </v-navigation-drawer>
};
</script> <v-navigation-drawer v-model="left" fixed temporary></v-navigation-drawer>
\ No newline at end of file
<v-content>
<v-container class="fill-height" fluid>
<v-row justify="center" align="center">
<v-col class="shrink">
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="source" icon large target="_blank" v-on="on">
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn
icon
large
href="https://codepen.io/johnjleider/pen/QewYYx"
target="_blank"
v-on="on"
>
<v-icon large>mdi-codepen</v-icon>
</v-btn>
</template>
<span>Codepen</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</v-content>
<v-navigation-drawer v-model="right" fixed right temporary></v-navigation-drawer>
<v-footer app color="blue-grey" class="white--text">
<span>Vuetify</span>
<div class="flex-grow-1"></div>
<span>&copy; 2019</span>
</v-footer>
</div>
</template>
\ No newline at end of file
client/components/AuthHeader.vue 0 → 100644
View file @ 51143539
<template>
<v-app-bar app elevation="24" color="teal lighten-3">
<v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text color="red red--text" :to="btnTo">
<v-icon left>{{ btnIconName }}</v-icon>
<strong>{{$t(btnLabel)}}</strong>
</v-btn>
</v-app-bar>
</template>
<script>
export default {
name: "app-header",
data() {
return {
btnTo: null
};
},
props: ["btnToProp", "btnLabel", "btnIconName"],
created() {
this.btnTo = "/" + this.btnToProp;
}
};
</script>
\ No newline at end of file
client/main.js
View file @ 51143539
...@@ -8,6 +8,10 @@ Vue.use(VueMeteorTracker); ...@@ -8,6 +8,10 @@ Vue.use(VueMeteorTracker);
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
Vue.use(VueRouter); Vue.use(VueRouter);
import { Plugin } from 'vue-fragment'
Vue.use(Plugin)
import routes from './plugins/routes'; import routes from './plugins/routes';
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
......
client/plugins/i18n.js
View file @ 51143539
...@@ -67,8 +67,8 @@ const messages = { ...@@ -67,8 +67,8 @@ const messages = {
}; };
const i18n = new VueI18n({ const i18n = new VueI18n({
locale: 'fa', // set locale locale: 'en', // set locale
fallbackLocale: 'en', // set fallback locale fallbackLocale: 'fa', // set fallback locale
messages, // set locale messages messages, // set locale messages
}); });
......
client/plugins/routes.js
View file @ 51143539
import Login from '../views/Login.vue'; import Login from '../views/Login.vue';
import Home from '../views/Home.vue'; import Home from '../views/Home.vue';
import Register from '../views/Register.vue'; import Register from '../views/Register.vue';
import Main from '../views/Main.vue';
const routes = [{ const routes = [{
path: '/', path: '/',
...@@ -16,6 +17,11 @@ const routes = [{ ...@@ -16,6 +17,11 @@ const routes = [{
path: '/register', path: '/register',
component: Register, component: Register,
name: 'register' name: 'register'
},
{
path: '/main',
component: Main,
name: 'main'
} }
]; ];
......
client/plugins/vuetify.js
View file @ 51143539
...@@ -16,13 +16,11 @@ Vue.use(VueI18n); ...@@ -16,13 +16,11 @@ Vue.use(VueI18n);
import messages from './i18n'; import messages from './i18n';
const i18n = new VueI18n( const i18n = new VueI18n({
{
locale: 'fa', // set locale locale: 'fa', // set locale
fallbackLocale: 'en', // set fallback locale fallbackLocale: 'en', // set fallback locale
messages, // set locale messages messages, // set locale messages
} });
);
export default new Vuetify({ export default new Vuetify({
...@@ -34,5 +32,5 @@ export default new Vuetify({ ...@@ -34,5 +32,5 @@ export default new Vuetify({
icons: { icons: {
iconfont: 'mdi', // default - only for display purposes iconfont: 'mdi', // default - only for display purposes
}, },
rtl: true, rtl: false,
}); });
\ No newline at end of file
client/store/modules/appSetting.js
View file @ 51143539
const state = { const state = {
lang: 'fa' lang: 'en'
} }
const mutations = { const mutations = {
'SET_LANG' (state, lang) { 'SET_LANG' (state, lang) {
state.lang = lang; state.lang = lang;
} }
} }
......
client/views/Home.vue
View file @ 51143539
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<script> <script>
export default { export default {
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
next(vm => { next(vm => {
vm.$router.push('/login'); vm.$router.push('/login');
}); });
......
client/views/Login.vue
View file @ 51143539
<template> <template>
<div style="height:100%"> <!-- <fragment> -->
<app-header btnToProp="register" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></app-header> <!-- <div style="height:100%"> -->
<v-container fluid class="align-start fill-height backgroundImg"> <v-content class="fill-height">
<auth-header btnToProp="register" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></auth-header>
<v-container fluid class="align-center fill-height backgroundImg">
<img src="../../public/img/radio2.png" /> <img src="../../public/img/radio2.png" />
<v-row justify="center" class="loginCard"> <v-row justify="center" class="loginCard">
<v-col xs="12" sm="8" md="4"> <v-col xs="12" sm="8" md="4">
...@@ -29,7 +32,7 @@ ...@@ -29,7 +32,7 @@
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="light-green white--text"> <v-btn color="light-green white--text" to="/main">
<v-icon left>mdi-login</v-icon> <v-icon left>mdi-login</v-icon>
<small>{{$t('Login.loginBtn')}}</small> <small>{{$t('Login.loginBtn')}}</small>
</v-btn> </v-btn>
...@@ -38,17 +41,20 @@ ...@@ -38,17 +41,20 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<app-footer></app-footer> <app-footer></app-footer>
</div> <!-- </fragment> -->
<!-- </div> -->
</v-content>
</template> </template>
<script> <script>
import AppFooter from "../components/AppFooter.vue"; import AppFooter from "../components/AppFooter.vue";
import AppHeader from "../components/AppHeader.vue"; import AuthHeader from "../components/AuthHeader.vue";
export default { export default {
components: { components: {
"app-footer": AppFooter, "app-footer": AppFooter,
"app-header": AppHeader "auth-header": AuthHeader
}, },
data() { data() {
return { return {
...@@ -56,8 +62,7 @@ export default { ...@@ -56,8 +62,7 @@ export default {
rules: { rules: {
required: value => !!value || this.$t("Login.required"), required: value => !!value || this.$t("Login.required"),
min: v => { min: v => {
if (v==undefined) if (v == undefined) return true;
return true
return v.length >= 8 || this.$t("Login.min8Character"); return v.length >= 8 || this.$t("Login.min8Character");
} }
} }
......
client/views/Main.vue 0 → 100644
View file @ 51143539
<template>
<div class="fill-height">
<!-- <v-content class="fill-height"> -->
<template v-if="!$vuetify.rtl">
<v-navigation-drawer v-model="drawerRight" app right clipped>
<v-list dense>
<v-list-item @click.stop="right = !right">
<v-list-item-action>
<v-icon>mdi-exit-to-app</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Open Temporary Drawer</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>right
</v-navigation-drawer>
<v-app-bar app clipped-right color="teal lighten-3" dark>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
<v-toolbar-title>Toolbar</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer v-model="drawer" app>
<v-list dense>
<v-list-item @click.stop="left = !left">
<v-list-item-action>
<v-icon>mdi-exit-to-app</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Open Temporary Drawer</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>left
</v-navigation-drawer>
</template>
<template v-if="$vuetify.rtl">
<v-navigation-drawer v-model="drawer" app clipped>
<v-list dense>
<v-list-item @click.stop="left = !left">
<v-list-item-action>
<v-icon>mdi-exit-to-app</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Open Temporary Drawer</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>left
</v-navigation-drawer>
<v-app-bar app clipped-left color="teal lighten-3" dark>
<v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Toolbar</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer v-model="drawerRight" app right>
<v-list dense>
<v-list-item @click.stop="right = !right">
<v-list-item-action>
<v-icon>mdi-exit-to-app</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Open Temporary Drawer</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>right
</v-navigation-drawer>
</template>
<v-navigation-drawer v-model="left" fixed temporary></v-navigation-drawer>
<v-content class="fill-height">
<v-container class="fill-height" fluid>
<v-row justify="center" align="center">
<v-col class="shrink">
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="source" icon large target="_blank" v-on="on">
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn
icon
large
href="https://codepen.io/johnjleider/pen/QewYYx"
target="_blank"
v-on="on"
>
<v-icon large>mdi-codepen</v-icon>
</v-btn>
</template>
<span>Codepen</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</v-content>
<v-navigation-drawer v-model="right" fixed right temporary></v-navigation-drawer>
<app-footer></app-footer>
</div>
<!-- </v-content> -->
</template>
<script>
import { Fragment } from "vue-fragment";
import AppFooter from "../components/AppFooter.vue";
export default {
components: {
"app-footer": AppFooter,
"fragment": Fragment
},
props: {
source: String
},
data: () => ({
drawer: null,
drawerRight: null,
right: false,
left: false
})
};
</script>
\ No newline at end of file
client/views/Register.vue
View file @ 51143539
<template> <template>
<div style="height:100%"> <!-- <div class="fill-height"> -->
<app-header btnToProp="login" btnLabel="Register.loginBtn" btnIconName="mdi-login"></app-header> <v-content class="fill-height">
<v-container fluid class="align-start fill-height backgroundImg"> <auth-header btnToProp="login" btnLabel="Register.loginBtn" btnIconName="mdi-login"></auth-header>
<v-container fluid class="align-center fill-height backgroundImg">
<img src="../../public/img/radio2.png" /> <img src="../../public/img/radio2.png" />
<v-row justify="center" class="loginCard"> <v-row justify="center" class="loginCard">
<v-col xs="12" sm="8" md="4"> <v-col xs="12" sm="8" md="4">
...@@ -14,7 +15,8 @@ ...@@ -14,7 +15,8 @@
<v-text-field <v-text-field
:label="$t('Register.username')" :label="$t('Register.username')"
prepend-icon="mdi-account-circle" prepend-icon="mdi-account-circle"
:rules="[rules.required]" /> :rules="[rules.required]"
/>
<v-text-field <v-text-field
:type="!showPassword1?'password' :'text'" :type="!showPassword1?'password' :'text'"
:label="$t('Register.password')" :label="$t('Register.password')"
...@@ -47,16 +49,17 @@ ...@@ -47,16 +49,17 @@
</v-row> </v-row>
</v-container> </v-container>
<app-footer></app-footer> <app-footer></app-footer>
</div> </v-content>
<!-- </div> -->
</template> </template>
<script> <script>
import AppFooter from "../components/AppFooter.vue"; import AppFooter from "../components/AppFooter.vue";
import AppHeader from "../components/AppHeader.vue"; import AuthHeader from "../components/AuthHeader.vue";
export default { export default {
components: { components: {
"app-footer": AppFooter, "app-footer": AppFooter,
"app-header": AppHeader "auth-header": AuthHeader
}, },
data() { data() {
return { return {
...@@ -67,14 +70,12 @@ export default { ...@@ -67,14 +70,12 @@ export default {
rules: { rules: {
required: value => !!value || this.$t("Register.required"), required: value => !!value || this.$t("Register.required"),
min: v => { min: v => {
if (v==undefined) if (v == undefined) return true;
return true
return v.length >= 8 || this.$t("Register.min8Character"); return v.length >= 8 || this.$t("Register.min8Character");
}, },
matchPass: v => { matchPass: v => {
return ( return (
this.firstPass === this.secondPass || this.firstPass === this.secondPass || this.$t("Register.matchPass")
this.$t('Register.matchPass')
); );
} }
} }
......
package-lock.json
View file @ 51143539
{ {
"name": "karname", "name": "karname-ui",
"requires": true, "requires": true,
"lockfileVersion": 1, "lockfileVersion": 1,
"dependencies": { "dependencies": {
...@@ -4286,9 +4286,9 @@ ...@@ -4286,9 +4286,9 @@
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
}, },
"minipass": { "minipass": {
"version": "2.4.0", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.4.0.tgz", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.5.0.tgz",
"integrity": "sha512-6PmOuSP4NnZXzs2z6rbwzLJu/c5gdzYg1mRI/WIYdx45iiX7T+a4esOzavD6V/KmBzAaopFSTZPZcUx73bqKWA==", "integrity": "sha512-9FwMVYhn6ERvMR8XFdOavRz4QK/VJV8elU1x50vYexf9lslDcWe/f4HBRxCPd185ekRSjU6CfYyJCECa/CQy7Q==",
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -6284,6 +6284,11 @@ ...@@ -6284,6 +6284,11 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==" "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
}, },
"vue-fragment": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.1.tgz",
"integrity": "sha512-ig6eES6TcMBbANW71ylB+AJgRN+Zksb3f50AxjGpAk6hMzqmeuD80qeh4LJP0jVw2dMBMjgRUfIkrvxygoRgtQ=="
},
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
......
package.json
View file @ 51143539
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"meteor-node-stubs": "^1.0.0", "meteor-node-stubs": "^1.0.0",
"valid-url": "^1.0.9", "valid-url": "^1.0.9",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-fragment": "^1.5.1",
"vue-i18n": "^8.14.0", "vue-i18n": "^8.14.0",
"vue-meta": "^2.2.1", "vue-meta": "^2.2.1",
"vue-meteor-tracker": "^2.0.0-beta.5", "vue-meteor-tracker": "^2.0.0-beta.5",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment