mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-16 14:17:22 +01:00
0af1203832
* add colors palette * add secondary menu component and style it * add box shadow to secondary menu * misc css, fixes for secondary menu * client: add equipment page with grouping, css: add some styles * add typography * more equipment * stable: fix linting * equipment: add styles (lots of general styles too) * remove duplicate google fonts loading * add dropdowns * design: white search input background, remove gray from items * start adding drawer and selected indicator * wip equipment * fix equipment * equipment: correctly bind new properties on items.gear.equipped * equipment: fix vue binding. version 2 * equipment: fix vue binding. version 3 * back to first fix for equip op, fix for sourcemaps, send http request when an item is equipped, load bootstrap-vue components where needed * checkboxes and radio buttons * correctly renders selected items in first postion during the first render * add search * general changes, constants part of app state, add popovers * add toggle switch, rename css * correct offset * upgrade deps * upgrade deps * drawer and lot of other work * update equipping mechanism * finish equipment * fix compilation and upgrade deps * use v-show in place of v-if to fix ui issues * v-show -> v-if * fix linting in test/client * fix es6 compilation in test/client * fix babel compilation for tests * fix groupsUtilities mixin tests * client: buttons * client: buttons: fix colors * client: finish buttons and dropdowns * upgrade bootstrap-vue, finish buttons and dropdowns * fix tasks page layout * misc fixes for buttons * add textareas * fix app menu * add inputs * fixes for toggleSwitch * typography * checkboxes and radio buttons * add checkbox icon * fix equip.js * extract strings to newClient.json * add Popover above 'Use Costume' / 'Auto Equip' slider - disable item select if costume-mode and 'useCostume' isn't active * show "you have disabled your costume" error above the drawer items * check errorMessage for null * hide star if costume not enabled * fix errorMessage (!errorMessage seems not to work for string) * show minimize / expand icon - always centered by css * drawer test * drawer: fix centering on large screens * fix show more button * add margin when two dropdowns are next to each other * adjust the page padding based on the drawer, misc fixes * drawer fixes
163 lines
6.1 KiB
Vue
163 lines
6.1 KiB
Vue
<template lang="pug">
|
|
.row
|
|
.col-12
|
|
.row
|
|
.col-3.p-4
|
|
h3 Input
|
|
input.form-control(type="text", placeholder="Placeholder")
|
|
.col-3.p-4
|
|
h3 Input Disabled
|
|
input.form-control(type="text", placeholder="Placeholder", disabled)
|
|
.col-3.p-4
|
|
h3 Input With Icon
|
|
input.form-control.input-search(type="text", placeholder="Placeholder")
|
|
.col-3.p-4
|
|
h3 Input With Icon Disabled
|
|
input.form-control.input-search(type="text", placeholder="Placeholder", disabled)
|
|
.col-3.p-4
|
|
h3 Input Valid
|
|
input.form-control.input-valid(type="text", placeholder="Placeholder")
|
|
.col-3.p-4
|
|
h3 Input Invalid
|
|
input.form-control.input-invalid(type="text", placeholder="Placeholder")
|
|
.row
|
|
.col-6.p-4
|
|
h3 Textarea
|
|
textarea.form-control(rows="5", cols="50")
|
|
.col-6.p-4
|
|
h3 Textarea Disabled
|
|
textarea.form-control(disabled, rows="10", cols="50")
|
|
.row
|
|
.col-2.p-4
|
|
toggleSwitch(label="Toggle Switch")
|
|
.row
|
|
.col-3.p-4
|
|
h3 Checkbox
|
|
label.custom-control.custom-checkbox
|
|
input.custom-control-input(type='checkbox')
|
|
span.custom-control-indicator
|
|
span.custom-control-description Check this custom checkbox
|
|
.col-3.p-4
|
|
h3 Checkbox Disabled Checked
|
|
label.custom-control.custom-checkbox
|
|
input.custom-control-input(type='checkbox', disabled, checked)
|
|
span.custom-control-indicator
|
|
span.custom-control-description Check this custom checkbox
|
|
.col-3.p-4
|
|
h3 Checkbox Disabled Not Checked
|
|
label.custom-control.custom-checkbox
|
|
input.custom-control-input(type='checkbox', disabled)
|
|
span.custom-control-indicator
|
|
span.custom-control-description Check this custom checkbox
|
|
.col-6.p-4
|
|
h3 Radio Button
|
|
form
|
|
label.custom-control.custom-radio
|
|
input#radio1.custom-control-input(name='radio', type='radio')
|
|
span.custom-control-indicator
|
|
span.custom-control-description Toggle this custom radio
|
|
label.custom-control.custom-radio
|
|
input#radio2.custom-control-input(name='radio', type='radio')
|
|
span.custom-control-indicator
|
|
span.custom-control-description Toggle this custom radio
|
|
.col-3.p-4
|
|
h3 Radio Button Disabled Checked
|
|
form
|
|
label.custom-control.custom-radio
|
|
input#radio3.custom-control-input(name='radio', type='radio', disabled, checked)
|
|
span.custom-control-indicator
|
|
span.custom-control-description Toggle this custom radio
|
|
.col-3.p-4
|
|
h3 Radio Button Disabled Not Checked
|
|
form
|
|
label.custom-control.custom-radio
|
|
input#radio3.custom-control-input(name='radio', type='radio', disabled)
|
|
span.custom-control-indicator
|
|
span.custom-control-description Toggle this custom radio
|
|
.row
|
|
.col-3.p-4
|
|
h3 Main Button
|
|
button.btn.btn-primary Button
|
|
.col-3.p-4
|
|
h3 Secondary Button
|
|
button.btn.btn-secondary Button
|
|
.col-3.p-4
|
|
h3 Green Button
|
|
button.btn.btn-success Button
|
|
.col-3.p-4
|
|
h3 Blue Button
|
|
button.btn.btn-info Button
|
|
.col-3.p-4
|
|
h3 Red Button
|
|
button.btn.btn-danger Button
|
|
.row
|
|
.col-3.p-4
|
|
h3 Main Button Disabled
|
|
button.btn.btn-primary(disabled=true) Button
|
|
.col-3.p-4
|
|
h3 Secondary Button Disabled
|
|
button.btn.btn-secondary(disabled=true) Button
|
|
.col-3.p-4
|
|
h3 Green Button Disabled
|
|
button.btn.btn-success(disabled=true) Button
|
|
.col-3.p-4
|
|
h3 Blue Button Disabled
|
|
button.btn.btn-info(disabled=true) Button
|
|
.col-3.p-4
|
|
h3 Red Button Disabled
|
|
button.btn.btn-danger(disabled=true) Button
|
|
.row
|
|
.col-6.p-4
|
|
h3 Dropdown Menu
|
|
b-dropdown(text="Menu", right=false)
|
|
b-dropdown-item(href="#") Menu item 1
|
|
b-dropdown-item(href="#") Menu item 2
|
|
b-dropdown-item(href="#") Menu item 3
|
|
b-dropdown-item(href="#") Menu item 4
|
|
.col-6.p-4
|
|
h3 Dropdown Menu Disabled
|
|
b-dropdown(text="Menu", disabled)
|
|
b-dropdown-item(href="#") Menu item 1
|
|
b-dropdown-item(href="#") Menu item 2
|
|
b-dropdown-item(href="#") Menu item 3
|
|
b-dropdown-item(href="#") Menu item 4
|
|
.row
|
|
.col-6.p-4
|
|
h1 Heading 1
|
|
h2 Heading 2
|
|
h3 Heading 3
|
|
h4 Heading 4
|
|
.col-6.p-4
|
|
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula, purus sit amet sodales pharetra, ipsum ipsum mollis orci, id pharetra velit diam et dui. Sed placerat ipsum eget pharetra rutrum. Ut vitae rutrum lacus, eu imperdiet velit. Pellentesque eu velit cursus, scelerisque dui quis, dapibus magna. Vestibulum molestie sed sapien et ultricies. Nam porta ipsum leo, non congue magna vestibulum a. Etiam dictum felis sit amet augue varius tincidunt. Sed eget urna auctor, convallis felis in, pretium justo. Curabitur aliquet, ligula id tincidunt ullamcorper, orci lorem pharetra neque, in ornare arcu magna accumsan arcu. Maecenas dignissim lorem sed eros accumsan scelerisque.
|
|
p.small-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula, purus sit amet sodales pharetra, ipsum ipsum mollis orci, id pharetra velit diam et dui.
|
|
.row
|
|
.col(v-for="taskType in tasksTypes")
|
|
h3 {{taskType}}s
|
|
ul
|
|
task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
|
|
</template>
|
|
|
|
<script>
|
|
import Task from './task';
|
|
import { mapState } from 'client/libs/store';
|
|
import bDropdown from 'bootstrap-vue/lib/components/dropdown';
|
|
import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
|
|
import toggleSwitch from 'client/components/ui/toggleSwitch';
|
|
|
|
export default {
|
|
components: {
|
|
Task,
|
|
bDropdown,
|
|
bDropdownItem,
|
|
toggleSwitch,
|
|
},
|
|
data () {
|
|
return {
|
|
tasksTypes: ['habit', 'daily', 'todo', 'reward'],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({tasks: 'tasks.data'}),
|
|
},
|
|
};
|
|
</script> |