localized vue login, added language switcher block
This commit is contained in:
parent
a8c8d04408
commit
1c040f261e
File diff suppressed because one or more lines are too long
|
|
@ -33,8 +33,39 @@ import 'theme/assets/styles/main.scss'
|
|||
}
|
||||
|
||||
function initUserVBlock(){
|
||||
let props = {
|
||||
title: ""
|
||||
};
|
||||
let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
|
||||
switch (mount_point) {
|
||||
case '#block-userlogin':
|
||||
let $block = document.querySelector(mount_point);
|
||||
props = {
|
||||
title: $block.querySelector('h2').textContent,
|
||||
form: {
|
||||
ph_email: $block.querySelector('input#edit-name').getAttribute('placeholder'),
|
||||
ph_pass: $block.querySelector('input#edit-pass').getAttribute('placeholder'),
|
||||
btn_value: $block.querySelector('input#edit-submit').getAttribute('value'),
|
||||
register: {
|
||||
title: $block.querySelector('a.create-account-link').textContent,
|
||||
href: $block.querySelector('a.create-account-link').getAttribute('href')
|
||||
},
|
||||
reset: {
|
||||
title: $block.querySelector('a.request-password-link').textContent,
|
||||
href: $block.querySelector('a.request-password-link').getAttribute('href')
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
case '#block-userblock':
|
||||
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
console.log(props);
|
||||
v_user_block = new Vue({
|
||||
// data: data,
|
||||
store,
|
||||
computed: {
|
||||
...mapState({
|
||||
|
|
@ -47,8 +78,9 @@ import 'theme/assets/styles/main.scss'
|
|||
this.$store.dispatch('User/getUser')
|
||||
}
|
||||
},
|
||||
render: h => h(VUserBlock)
|
||||
render: h => h(VUserBlock, {props:props})
|
||||
}).$mount(mount_point)
|
||||
console.log('initUserVBlock', v_user_block);
|
||||
}
|
||||
|
||||
function initTestVContent(){
|
||||
|
|
@ -56,7 +88,7 @@ import 'theme/assets/styles/main.scss'
|
|||
store,
|
||||
render: h => h(VTestContent)
|
||||
}).$mount('#block-pagetitle')
|
||||
console.log('initTestVContent', v_test_content);
|
||||
// console.log('initTestVContent', v_test_content);
|
||||
}
|
||||
|
||||
init()
|
||||
|
|
|
|||
|
|
@ -30,10 +30,14 @@ header[role="banner"]{
|
|||
.header-block{
|
||||
min-height: 15px;
|
||||
font-size: 0;
|
||||
&.header-right{
|
||||
text-align: right;
|
||||
}
|
||||
&>*{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: $base_font_size;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,21 +32,29 @@ aside.messages{
|
|||
// |_||_\___\__,_\__,_\___|_|
|
||||
|
||||
header[role="banner"]{
|
||||
padding:0.2em 0 0 0;
|
||||
#block-sitebranding{
|
||||
h1{
|
||||
margin:0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#block-userlogin{
|
||||
width:8em;
|
||||
overflow: visible;
|
||||
h2{
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
&>section{
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
width:14em;
|
||||
height:1px;
|
||||
padding:0.01em 1em;
|
||||
// margin:0 0 0 -1em;
|
||||
box-sizing:content-box;
|
||||
transition: all 0.4s ease-in-out;
|
||||
// outline: 1px solid blue;
|
||||
|
|
@ -55,10 +63,62 @@ header[role="banner"]{
|
|||
&:hover{
|
||||
&>section{
|
||||
transition-delay: 0s;
|
||||
height:16em;
|
||||
height:12em;
|
||||
padding:1em 1em;
|
||||
box-shadow: 0 0 10px #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#block-languageswitcher{
|
||||
h2{
|
||||
margin: 0.1em 0 0 0;
|
||||
font-size: 0.756em;
|
||||
font-weight: 400;
|
||||
padding:0.1em 0.4em 0.2em;
|
||||
border-radius: 3px;
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
&>ul.links{
|
||||
// background-color: #fff;
|
||||
overflow: hidden;
|
||||
width:5em;
|
||||
height:1px;
|
||||
padding:0.01em 0;
|
||||
margin:0;
|
||||
box-sizing:content-box;
|
||||
transition: all 0.4s ease-in-out;
|
||||
// outline: 1px solid blue;
|
||||
// transition-delay: 2s;
|
||||
}
|
||||
&:hover{
|
||||
&>ul.links{
|
||||
transition-delay: 0s;
|
||||
height:2em;
|
||||
padding:0.3em 0;
|
||||
// box-shadow: 0 0 10px #ccc;
|
||||
}
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
padding:0;
|
||||
&.is-active{
|
||||
display:none;
|
||||
}
|
||||
a{
|
||||
margin: 0;
|
||||
font-size: 0.756em;
|
||||
font-weight: 400;
|
||||
padding:0.2em 0.4em;
|
||||
border-radius: 3px;
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,8 +117,8 @@ function materiotheme_preprocess_image_formatter(&$vars){
|
|||
|
||||
function materiotheme_preprocess_links__language_block(&$vars){
|
||||
// dpm($vars);
|
||||
foreach ($vars['links'] as $lang_code => $link) {
|
||||
$vars['links'][$lang_code]['text'] = $lang_code;
|
||||
$vars['links'][$lang_code]['link']['#title'] = $lang_code;
|
||||
}
|
||||
// foreach ($vars['links'] as $lang_code => $link) {
|
||||
// $vars['links'][$lang_code]['text'] = $lang_code;
|
||||
// $vars['links'][$lang_code]['link']['#title'] = $lang_code;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template lang="html">
|
||||
<div id="block-userlogin" class="">
|
||||
<h2>Login Hello!</h2>
|
||||
<h2>{{ title }}</h2>
|
||||
<section>
|
||||
<input
|
||||
id="edit-name"
|
||||
class="form-email"
|
||||
type="text"
|
||||
placeholder="Email" name="name"
|
||||
v-bind:placeholder="form.ph_email" name="name"
|
||||
v-model="mail"
|
||||
@keyup.enter="login"
|
||||
/>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
id="edit-pass"
|
||||
class="form-text"
|
||||
type="password"
|
||||
placeholder="Password" name="pass"
|
||||
v-bind:placeholder="form.ph_pass" name="pass"
|
||||
v-model="password"
|
||||
@keyup.enter="login"
|
||||
/>
|
||||
|
|
@ -23,17 +23,27 @@
|
|||
class="button"
|
||||
@click.stop="login"
|
||||
>
|
||||
login
|
||||
{{ form.btn_value }}
|
||||
</button>
|
||||
<ul>
|
||||
<li><a
|
||||
v-bind:href="form.register.href"
|
||||
>
|
||||
{{ form.register.title }}
|
||||
</a></li>
|
||||
<li><a
|
||||
v-bind:href="form.reset.href"
|
||||
>
|
||||
{{ form.reset.title }}
|
||||
</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// https://github.com/alvar0hurtad0/drupal-vuejs-todo
|
||||
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -41,6 +51,7 @@ export default {
|
|||
password: ''
|
||||
}
|
||||
},
|
||||
props: ['title', 'form'],
|
||||
computed: {
|
||||
...mapState(['User'])
|
||||
},
|
||||
|
|
@ -48,14 +59,6 @@ export default {
|
|||
...mapActions({
|
||||
userLogin: 'User/userLogin'
|
||||
}),
|
||||
|
||||
// usernameInputHandler(input) {
|
||||
// this.username = input;
|
||||
// },
|
||||
// passwordInputHandler(input) {
|
||||
// this.password = input;
|
||||
// },
|
||||
|
||||
login () {
|
||||
this.userLogin({
|
||||
mail: this.mail,
|
||||
|
|
@ -63,10 +66,29 @@ export default {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
section{
|
||||
max-width:300px;
|
||||
}
|
||||
input{
|
||||
display:block;
|
||||
max-width:100%;
|
||||
margin:0.5em 0 0 0;
|
||||
}
|
||||
button{
|
||||
margin:0.5em 0 0 0;
|
||||
}
|
||||
ul{
|
||||
margin:0; padding:0.5em 0 0 0;
|
||||
}
|
||||
li{
|
||||
list-style:none;
|
||||
margin:0.5em 0 0 0; padding:0;
|
||||
font-size:0.882em;
|
||||
}
|
||||
a{
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<UserTools v-if="isloggedin" />
|
||||
<Login v-else />
|
||||
<Login v-bind:title="title" v-bind:form="form" v-else />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -10,9 +10,7 @@ import Login from 'vuejs/components/User/Login'
|
|||
import UserTools from 'vuejs/components/User/UserTools'
|
||||
|
||||
export default {
|
||||
// data () {
|
||||
// return {}
|
||||
// },
|
||||
props: ['title', 'form'],
|
||||
computed: {
|
||||
...mapState({
|
||||
isloggedin: state => state.User.isloggedin
|
||||
|
|
|
|||
|
|
@ -43,7 +43,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
#user-tools{
|
||||
margin-right:0.5em;
|
||||
padding-right:0.5em;
|
||||
border-right:1px solid #222;
|
||||
}
|
||||
h4{
|
||||
margin:0;
|
||||
display:inline-block;
|
||||
font-size:inherited;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue