Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Indienet
Site
Commits
e3cb7d82
Verified
Commit
e3cb7d82
authored
Mar 27, 2018
by
Aral Balkan
Browse files
Refactor: move Settings component into Settings page
parent
9c5a7d56
Changes
2
Hide whitespace changes
Inline
Side-by-side
client/components/settings.vue
deleted
100644 → 0
View file @
9c5a7d56
<
template
>
<div>
<form
@
submit.prevent
>
<b-field
label=
'Name'
>
<b-input
v-model=
'name'
placeholder=
'Anonymous'
></b-input>
</b-field>
<b-field
label=
'Bio'
>
<b-input
v-model=
'bio'
placeholder=
'Anonymous'
></b-input>
</b-field>
<label
class=
'label'
for=
'profile-image-upload'
>
Profile image
</label>
<b-field>
<img
:src=
'profileImage'
class=
'profile-image-preview'
/>
<input
id=
'profile-image-upload'
type=
'file'
/>
</b-field>
<label
class=
'label'
for=
'background-image-upload'
>
Background image
</label>
<b-field>
<img
:src=
'backgroundImage || "/not-available.png"'
:alt=
'backgroundImage ? "Preview of background image" : "No background image set"'
class=
'background-image-preview'
/>
<input
id=
'background-image-upload'
type=
'file'
/>
</b-field>
<label
class=
'label'
for=
'background-colour-input'
>
Background colour
</label>
<b-field>
<div
class=
'background-colour'
:style=
'
{ backgroundColor: backgroundColour }'>
</div>
<vue-color-compact
v-if=
'!backgroundImage'
v-model=
'backgroundColour'
/>
<span
v-if=
'backgroundImage'
>
(Hidden by the background image.)
</span>
</b-field>
</form>
<registrationModal
:isActive=
'registrationModalActive'
/>
</div>
</
template
>
<
script
>
import
vueColorCompact
from
'
~/../node_modules/vue-color/src/components/Compact.vue
'
import
registrationModal
from
'
~/components/registrationModal
'
export
default
{
components
:
{
vueColorCompact
,
registrationModal
},
computed
:
{
registrationModalActive
()
{
return
!
this
.
configured
},
name
:
{
get
()
{
return
this
.
$store
.
state
.
name
},
set
(
value
)
{
this
.
$store
.
commit
(
'
name
'
,
value
)
}
},
bio
:
{
get
()
{
return
this
.
$store
.
state
.
bio
},
set
(
value
)
{
this
.
$store
.
commit
(
'
bio
'
,
value
)
}
},
profileImage
:
{
get
()
{
return
this
.
$store
.
state
.
profileImage
},
set
(
value
)
{
this
.
$store
.
commit
(
'
profileImage
'
,
value
)
}
},
backgroundImage
:
{
get
()
{
return
this
.
$store
.
state
.
backgroundImage
},
set
(
value
)
{
this
.
$store
.
commit
(
'
backgroundImage
'
,
value
)
}
},
backgroundColour
:
{
get
()
{
return
this
.
$store
.
state
.
backgroundColour
},
set
(
value
)
{
this
.
$store
.
commit
(
'
backgroundColour
'
,
value
)
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See default.vue layout for redundancy)
let
style
=
document
.
createElement
(
'
style
'
)
document
.
head
.
appendChild
(
style
)
let
sheet
=
style
.
sheet
console
.
log
(
'
Background colour:
'
+
value
.
hex
)
sheet
.
insertRule
(
`.tabs li.is-active a { color:
${
value
.
hex
}
; border-bottom-color:
${
value
.
hex
}
; }`
)
sheet
.
insertRule
(
`.button.is-primary { background-color:
${
value
.
hex
}
; }`
)
sheet
.
insertRule
(
`.button.is-primary:hover { background-color:
${
value
.
hex
}
; }`
)
}
},
configured
:
{
get
()
{
return
this
.
$store
.
state
.
configured
},
set
(
value
)
{
this
.
$store
.
commit
(
'
configured
'
,
value
)
}
}
},
data
()
{
return
{
}
},
methods
:
{
}
}
</
script
>
<
style
>
.background-colour
{
width
:
100px
;
height
:
65px
;
margin-right
:
.75em
;
border
:
1px
solid
#333
;
}
.background-image-preview
{
width
:
100px
;
height
:
65px
;
margin-right
:
.75em
;
border
:
1px
solid
#333
;
}
div
.control
{
margin-bottom
:
1em
;
}
div
.card-content
{
padding-top
:
1em
;
}
.modal-card-title
{
margin
:
0
;
}
.modal-card-body
{
padding-top
:
0
;
/* padding-bottom: 0; */
}
div
.vc-compact
{
width
:
246px
;
}
.profile-image-preview
{
width
:
100px
;
height
:
100px
;
margin-right
:
.75em
;
border
:
1px
solid
#333
;
}
</
style
>
client/pages/settings.vue
View file @
e3cb7d82
<
template
>
<div
class=
'page'
>
<indie-header
/>
<main>
<settings
/>
<form
@
submit.prevent
>
<b-field
label=
'Name'
>
<b-input
v-model=
'name'
placeholder=
'Anonymous'
></b-input>
</b-field>
<b-field
label=
'Bio'
>
<b-input
v-model=
'bio'
placeholder=
'Anonymous'
></b-input>
</b-field>
<label
class=
'label'
for=
'profile-image-upload'
>
Profile image
</label>
<b-field>
<img
:src=
'profileImage'
class=
'profile-image-preview'
/>
<input
id=
'profile-image-upload'
type=
'file'
/>
</b-field>
<label
class=
'label'
for=
'background-image-upload'
>
Background image
</label>
<b-field>
<img
:src=
'backgroundImage || "/not-available.png"'
:alt=
'backgroundImage ? "Preview of background image" : "No background image set"'
class=
'background-image-preview'
/>
<input
id=
'background-image-upload'
type=
'file'
/>
</b-field>
<label
class=
'label'
for=
'background-colour-input'
>
Background colour
</label>
<b-field>
<div
class=
'background-colour'
:style=
'
{ backgroundColor: backgroundColour }'>
</div>
<vue-color-compact
v-if=
'!backgroundImage'
v-model=
'backgroundColour'
/>
<span
v-if=
'backgroundImage'
>
(Hidden by the background image.)
</span>
</b-field>
</form>
<registrationModal
:isActive=
'registrationModalActive'
/>
</main>
</div>
</
template
>
<
script
>
import
indieHeader
from
'
~/components/indieHeader
'
import
settings
from
'
~/components/settings
'
export
default
{
components
:
{
indieHeader
,
settings
import
indieHeader
from
'
~/components/indieHeader
'
import
vueColorCompact
from
'
~/../node_modules/vue-color/src/components/Compact.vue
'
import
registrationModal
from
'
~/components/registrationModal
'
export
default
{
components
:
{
indieHeader
,
vueColorCompact
,
registrationModal
},
computed
:
{
registrationModalActive
()
{
return
!
this
.
configured
},
name
:
{
get
()
{
return
this
.
$store
.
state
.
name
},
set
(
value
)
{
this
.
$store
.
commit
(
'
name
'
,
value
)
}
},
bio
:
{
get
()
{
return
this
.
$store
.
state
.
bio
},
set
(
value
)
{
this
.
$store
.
commit
(
'
bio
'
,
value
)
}
},
profileImage
:
{
get
()
{
return
this
.
$store
.
state
.
profileImage
},
set
(
value
)
{
this
.
$store
.
commit
(
'
profileImage
'
,
value
)
}
},
backgroundImage
:
{
get
()
{
return
this
.
$store
.
state
.
backgroundImage
},
set
(
value
)
{
this
.
$store
.
commit
(
'
backgroundImage
'
,
value
)
}
},
backgroundColour
:
{
get
()
{
return
this
.
$store
.
state
.
backgroundColour
},
set
(
value
)
{
this
.
$store
.
commit
(
'
backgroundColour
'
,
value
)
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See default.vue layout for redundancy)
let
style
=
document
.
createElement
(
'
style
'
)
document
.
head
.
appendChild
(
style
)
let
sheet
=
style
.
sheet
console
.
log
(
'
Background colour:
'
+
value
.
hex
)
sheet
.
insertRule
(
`.tabs li.is-active a { color:
${
value
.
hex
}
; border-bottom-color:
${
value
.
hex
}
; }`
)
sheet
.
insertRule
(
`.button.is-primary { background-color:
${
value
.
hex
}
; }`
)
sheet
.
insertRule
(
`.button.is-primary:hover { background-color:
${
value
.
hex
}
; }`
)
}
},
configured
:
{
get
()
{
return
this
.
$store
.
state
.
configured
},
set
(
value
)
{
this
.
$store
.
commit
(
'
configured
'
,
value
)
}
}
},
data
()
{
return
{
}
},
methods
:
{
}
}
}
</
script
>
<
style
>
.background-colour
{
width
:
100px
;
height
:
65px
;
margin-right
:
.75em
;
border
:
1px
solid
#333
;
}
.background-image-preview
{
width
:
100px
;
height
:
65px
;
margin-right
:
.75em
;
border
:
1px
solid
#333
;
}
div
.control
{
margin-bottom
:
1em
;
}
div
.card-content
{
padding-top
:
1em
;
}
.modal-card-title
{
margin
:
0
;
}
.modal-card-body
{
padding-top
:
0
;
/* padding-bottom: 0; */
}
div
.vc-compact
{
width
:
246px
;
}
.profile-image-preview
{
width
:
100px
;
height
:
100px
;
margin-right
:
.75em
;
border
:
1px
solid
#333
;
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment