krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-14 21:27:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Task Modal Improvements (#9560)

Browse Source 
* start adding advanced options

* new imput

* partial colors

* update deps

* misc adds

* fix text color

* add advanced options

* initial reordering of task modal labels

* start to fix colors in the modal

* wip colors

* update package-lock.json

* fix merge

* finish modal

* refactor colors

* fix quick add

* fix colors

* new icon colors

* add markdown formatting help

* fix habits colors

* fix rewards colors

* fixed remaining colors

* start to inline inputs

* fix typ

* fixes

* habits hover state

* wip new task modal inputs

* bootstrap: upgrade to v4-beta3

* finish reward edit modal

* fix attributes allocation, checklists and add help tooltips for attributes and difficulty

* lots of fixes

* update datepicker

* misc fixes
This commit is contained in:
Matteo Pagliazzi
2018-01-08 18:43:57 +01:00
committed by GitHub
parent daa796454c
commit 6a109adbc5
32 changed files with 967 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
package-lock.json generated
View File

@@ -1657,9 +1657,9 @@
} }
}, },
"bootstrap": { "bootstrap": {
"version": "4.0.0-beta.2", "version": "4.0.0-beta.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.3.tgz",
"integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w==" "integrity": "sha512-/Qe1Q2d1muLEZRX2iCteMQHZBBAm6ZIjJ9FcBYK/xLr05+HvDtBOVBN+Cz7mCNZuy0zr+y5artZHM05W7mIz6g=="
}, },
"bootstrap-vue": { "bootstrap-vue": {
"version": "1.2.0", "version": "1.2.0",
@@ -1668,7 +1668,7 @@
"requires": { "requires": {
"lodash.startcase": "4.4.0", "lodash.startcase": "4.4.0",
"opencollective": "1.0.3", "opencollective": "1.0.3",
"popper.js": "1.12.9", "popper.js": "1.13.0",
"vue-functional-data-merge": "1.0.7" "vue-functional-data-merge": "1.0.7"
} }
}, },
@@ -11580,40 +11580,53 @@
"version": "git://github.com/habitrpg/moment-recur.git#f147ef27bbc26ca67638385f3db4a44084c76626" "version": "git://github.com/habitrpg/moment-recur.git#f147ef27bbc26ca67638385f3db4a44084c76626"
}, },
"mongodb": { "mongodb": {
"version": "2.2.24", "version": "2.2.33",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.24.tgz", "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.33.tgz",
"integrity": "sha1-gPQNbsW97A3ezw+c4BROeUxGRJo=", "integrity": "sha1-tTfEcdNKZlG0jzb9vyl1A0Dgi1A=",
"dev": true,
"requires": { "requires": {
"es6-promise": "3.2.1", "es6-promise": "3.2.1",
"mongodb-core": "2.1.8", "mongodb-core": "2.1.17",
"readable-stream": "2.1.5" "readable-stream": "2.2.7"
}, },
"dependencies": { "dependencies": {
"es6-promise": { "es6-promise": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
"integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q=" "integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q=",
"dev": true
}, },
"readable-stream": { "readable-stream": {
"version": "2.1.5", "version": "2.2.7",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.7.tgz",
"integrity": "sha1-ZvqLcg4UOLNkaB8q0aY8YYRIydA=", "integrity": "sha1-BwV6y+JGeyIELTb5jFrVBwVOlbE=",
"dev": true,
"requires": { "requires": {
"buffer-shims": "1.0.0", "buffer-shims": "1.0.0",
"core-util-is": "1.0.2", "core-util-is": "1.0.2",
"inherits": "2.0.3", "inherits": "2.0.3",
"isarray": "1.0.0", "isarray": "1.0.0",
"process-nextick-args": "1.0.7", "process-nextick-args": "1.0.7",
"string_decoder": "0.10.31", "string_decoder": "1.0.3",
"util-deprecate": "1.0.2" "util-deprecate": "1.0.2"
} }
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
} }
} }
}, },
"mongodb-core": { "mongodb-core": {
"version": "2.1.8", "version": "2.1.17",
"resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.8.tgz", "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.17.tgz",
"integrity": "sha1-sz4DcNClnZe2yx7GEFJ76elcosA=", "integrity": "sha1-pBizN6FKFJkPtRC5I97mqBMXPfg=",
"dev": true,
"requires": { "requires": {
"bson": "1.0.4", "bson": "1.0.4",
"require_optional": "1.0.1" "require_optional": "1.0.1"
@@ -11646,10 +11659,48 @@
"lodash": "4.17.4" "lodash": "4.17.4"
} }
}, },
"es6-promise": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
"integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q="
},
"mongodb": {
"version": "2.2.24",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.24.tgz",
"integrity": "sha1-gPQNbsW97A3ezw+c4BROeUxGRJo=",
"requires": {
"es6-promise": "3.2.1",
"mongodb-core": "2.1.8",
"readable-stream": "2.1.5"
}
},
"mongodb-core": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.8.tgz",
"integrity": "sha1-sz4DcNClnZe2yx7GEFJ76elcosA=",
"requires": {
"bson": "1.0.4",
"require_optional": "1.0.1"
}
},
"ms": { "ms": {
"version": "0.7.2", "version": "0.7.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
"integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=" "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U="
},
"readable-stream": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
"integrity": "sha1-ZvqLcg4UOLNkaB8q0aY8YYRIydA=",
"requires": {
"buffer-shims": "1.0.0",
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "1.0.7",
"string_decoder": "0.10.31",
"util-deprecate": "1.0.2"
}
} }
} }
}, },
@@ -11675,7 +11726,7 @@
"requires": { "requires": {
"debug": "2.6.9", "debug": "2.6.9",
"gitbook-plugin-github": "2.0.0", "gitbook-plugin-github": "2.0.0",
"mongodb": "2.2.24" "mongodb": "2.2.33"
} }
}, },
"morgan": { "morgan": {
@@ -13881,9 +13932,9 @@
"integrity": "sha1-xi/0xMUdLJGUlLdhpvSZP01/5Wk=" "integrity": "sha1-xi/0xMUdLJGUlLdhpvSZP01/5Wk="
}, },
"popper.js": { "popper.js": {
"version": "1.12.9", "version": "1.13.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.13.0.tgz",
"integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM=" "integrity": "sha1-4ef/ZcxD98+c8W8VEKdegfhPRWU="
}, },
"postcss": { "postcss": {
"version": "5.2.18", "version": "5.2.18",
@@ -18505,7 +18556,7 @@
} }
}, },
"vuejs-datepicker": { "vuejs-datepicker": {
"version": "git://github.com/habitrpg/vuejs-datepicker.git#825a866b6a9c52dd8c588a3e8b900880875ce914" "version": "git://github.com/habitrpg/vuejs-datepicker.git#af96f357a746463dc0461ddf5c2c13b7a4e1f484"
}, },
"w3counter": { "w3counter": {
"version": "3.0.1", "version": "3.0.1",

12
package.json
View File

@@ -31,7 +31,7 @@
"bcrypt": "^1.0.2", "bcrypt": "^1.0.2",
"bluebird": "^3.3.5", "bluebird": "^3.3.5",
"body-parser": "^1.15.0", "body-parser": "^1.15.0",
"bootstrap": "4.0.0-beta.2", "bootstrap": "^4.0.0-beta.3",
"bootstrap-vue": "^1.0.2", "bootstrap-vue": "^1.0.2",
"browserify": "~12.0.1", "browserify": "~12.0.1",
"compression": "^1.6.1", "compression": "^1.6.1",
@@ -72,7 +72,7 @@
"merge-stream": "^1.0.0", "merge-stream": "^1.0.0",
"method-override": "^2.3.5", "method-override": "^2.3.5",
"moment": "^2.13.0", "moment": "^2.13.0",
"moment-recur": "git://github.com/habitrpg/moment-recur#f147ef27bbc26ca67638385f3db4a44084c76626", "moment-recur": "git://github.com/habitrpg/moment-recur.git#f147ef27bbc26ca67638385f3db4a44084c76626",
"mongoose": "~4.8.6", "mongoose": "~4.8.6",
"mongoose-id-autoinc": "~2013.7.14-4", "mongoose-id-autoinc": "~2013.7.14-4",
"morgan": "^1.7.0", "morgan": "^1.7.0",
@@ -89,12 +89,12 @@
"passport-google-oauth20": "1.0.0", "passport-google-oauth20": "1.0.0",
"paypal-ipn": "3.0.0", "paypal-ipn": "3.0.0",
"paypal-rest-sdk": "^1.2.1", "paypal-rest-sdk": "^1.2.1",
"popper.js": "^1.11.0", "popper.js": "^1.13.0",
"postcss-easy-import": "^2.0.0", "postcss-easy-import": "^2.0.0",
"pretty-data": "^0.40.0", "pretty-data": "^0.40.0",
"ps-tree": "^1.0.0", "ps-tree": "^1.0.0",
"pug": "^2.0.0-beta.12", "pug": "^2.0.0-beta.12",
"push-notify": "git://github.com/habitrpg/push-notify#6bc2b5fdb1bdc9649b9ec1964d79ca50187fc8a9", "push-notify": "git://github.com/habitrpg/push-notify.git#6bc2b5fdb1bdc9649b9ec1964d79ca50187fc8a9",
"pusher": "^1.3.0", "pusher": "^1.3.0",
"request": "~2.74.0", "request": "~2.74.0",
"rimraf": "^2.4.3", "rimraf": "^2.4.3",
@@ -123,7 +123,7 @@
"vue-style-loader": "^3.0.0", "vue-style-loader": "^3.0.0",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",
"vuedraggable": "^2.15.0", "vuedraggable": "^2.15.0",
"vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker#825a866b6a9c52dd8c588a3e8b900880875ce914", "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#af96f357a746463dc0461ddf5c2c13b7a4e1f484",
"webpack": "^2.2.1", "webpack": "^2.2.1",
"webpack-merge": "^4.0.0", "webpack-merge": "^4.0.0",
"winston": "^2.1.0", "winston": "^2.1.0",
@@ -197,7 +197,7 @@
"lcov-result-merger": "^1.0.2", "lcov-result-merger": "^1.0.2",
"lolex": "^1.4.0", "lolex": "^1.4.0",
"mocha": "^3.2.0", "mocha": "^3.2.0",
"mongodb": "^2.0.46", "mongodb": "^2.2.33",
"mongoskin": "~2.1.0", "mongoskin": "~2.1.0",
"monk": "^4.0.0", "monk": "^4.0.0",
"nightwatch": "^0.9.12", "nightwatch": "^0.9.12",

20
website/client/assets/scss/dropdown.scss
View File

@@ -17,6 +17,7 @@
border-top: 6px solid; border-top: 6px solid;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-left: 5px solid transparent; border-left: 5px solid transparent;
vertical-align: 0;
} }
.dropdown-menu { .dropdown-menu {
@@ -69,3 +70,22 @@
vertical-align: middle; vertical-align: middle;
} }
} }
.inline-dropdown {
width: 100%;
.dropdown-toggle {
width: 100% !important;
text-align: left;
}
.dropdown-toggle::after {
position: absolute;
right: 16px;
top: 17px;
}
.dropdown-menu.show {
width: 100% !important;
}
}

134
website/client/assets/scss/form.scss
View File

@@ -2,6 +2,20 @@
padding-left: 1.5rem; padding-left: 1.5rem;
} }
label small {
font-size: 12px;
line-height: 1.33;
a {
color: $white;
&:hover, &:active {
text-decoration: underline;
color: $white;
}
}
}
// Inputs and texteares // Inputs and texteares
input, textarea, input.form-control, textarea.form-control { input, textarea, input.form-control, textarea.form-control {
@@ -54,17 +68,73 @@ input, textarea, input.form-control, textarea.form-control {
} }
} }
.input-group {
.input-group-prepend , .input-group-append {
background: $gray-600;
color: $gray-300;
border-radius: 2px;
&.input-group-text {
font-size: 14px;
line-height: 1.43;
color: rgba($gray-100, 0.64);
padding: 10px 24px;
border: none;
}
&.input-group-icon {
border: solid 1px $gray-400;
border-right: none;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
&.streak-addon .svg-icon {
width: 11.6px;
height: 7.1px;
margin: 15px 13.4px 15.9px 13px;
}
&.positive-addon .svg-icon {
width: 10px;
height: 10px;
margin: 14px 14px;
}
&.negative-addon .svg-icon {
width: 10px;
height: 2px;
margin: 18px 14px;
}
}
input:not(:first-child) {
border-left: none !important;
}
input:first-child {
border-right: none !important;
}
}
.form-check {
margin-bottom: 0.5rem;
padding-left: 0px;
}
// Checkboxes and radios // Checkboxes and radios
$bg-focused-active-control: #4f2993; $bg-focused-active-control: #4f2993;
$bg-disabled-control: #34303a; $bg-disabled-control: #34303a;
.custom-control { .custom-control {
&-description { margin-bottom: .5rem;
&-label {
padding-top: 3px; padding-top: 3px;
padding-left: 3px; padding-left: 3px;
} }
& .custom-control-indicator { .custom-control-label::before {
width: 18px; width: 18px;
height: 18px; height: 18px;
background-size: 75% 75%; background-size: 75% 75%;
@@ -72,48 +142,50 @@ $bg-disabled-control: #34303a;
border: 2px solid $gray-200; border: 2px solid $gray-200;
transition-property: box-shadow; transition-property: box-shadow;
} }
& .custom-control-input {
display: none;
}
} }
.custom-checkbox { .custom-checkbox {
.custom-control-indicator { .custom-control-label::before {
border-radius: 2px; border-radius: 2px;
} }
.custom-control-input { .custom-control-input {
&:checked~.custom-control-indicator { &:checked~.custom-control-label::before {
background-image: url(~client/assets/svg/for-css/checkbox-white.svg);
background-color: $purple-400; background-color: $purple-400;
border-color: $purple-400; border-color: $purple-400;
} }
&:active~.custom-control-indicator { &:checked~.custom-control-label::after {
width: 18px;
height: 18px;
background-image: url(~client/assets/svg/for-css/checkbox-white.svg);
background-size: 75% 75%;
}
&:active~.custom-control-label::before {
background-color: inherit; background-color: inherit;
} }
&:focus:not(:checked):not(:disabled)~.custom-control-indicator, &:active:not(:checked):not(:disabled)~.custom-control-indicator { &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1); box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
} }
&:focus:checked:not(:disabled)~.custom-control-indicator, &:active:checked:not(:disabled)~.custom-control-indicator { &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1); box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
border-color: $purple-400; border-color: $purple-400;
background-color: $purple-400; background-color: $purple-400;
} }
&:focus:disabled~.custom-control-indicator, &:active:disabled~.custom-control-indicator { &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1); box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
} }
&:disabled:checked~.custom-control-indicator { &:disabled:checked~.custom-control-label::before {
border-color: $gray-400; border-color: $gray-400;
background-color: $gray-400; background-color: $gray-400;
} }
&:disabled:not(:checked)~.custom-control-indicator { &:disabled:not(:checked)~.custom-control-label::before {
border-color: $gray-400; border-color: $gray-400;
background-color: transparent; background-color: transparent;
} }
@@ -121,7 +193,7 @@ $bg-disabled-control: #34303a;
} }
.inline-edit-input-group { .inline-edit-input-group {
.input-group-btn { .input-group-append, .input-group-prepend {
cursor: pointer; cursor: pointer;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@@ -146,45 +218,57 @@ $bg-disabled-control: #34303a;
} }
.custom-radio .custom-control-input { .custom-radio .custom-control-input {
&:checked~.custom-control-indicator { &:checked~.custom-control-label::after {
@include custom-radio-checked-icon($purple-400); @include custom-radio-checked-icon($purple-400);
width: 18px;
height: 18px;
background-size: 12px 12px;
}
&:checked~.custom-control-label::before {
background-color: $gray-700; background-color: $gray-700;
background-size: 12px 12px; background-size: 12px 12px;
border-color: $purple-400; border-color: $purple-400;
} }
&:active~.custom-control-indicator { &:active~.custom-control-label::before {
background-color: inherit; background-color: inherit;
} }
&:focus:not(:checked):not(:disabled)~.custom-control-indicator, &:active:not(:checked):not(:disabled)~.custom-control-indicator { &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1); box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
} }
&:focus:checked:not(:disabled)~.custom-control-indicator, &:active:checked:not(:disabled)~.custom-control-indicator { &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1); box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
border-color: $purple-400; border-color: $purple-400;
background-color: rgba($bg-focused-active-control, 0.1); background-color: rgba($bg-focused-active-control, 0.1);
} }
&:disabled:checked~.custom-control-indicator { &:disabled:checked~.custom-control-label::before {
border-color: $gray-400; border-color: $gray-400;
background-color: transparent; background-color: transparent;
@include custom-radio-checked-icon($gray-400);
} }
&:disabled:not(:checked)~.custom-control-indicator { &:disabled:checked~.custom-control-label::after {
@include custom-radio-checked-icon($gray-400);
width: 18px;
height: 18px;
background-size: 12px 12px;
}
&:disabled:not(:checked)~.custom-control-label::before {
border-color: $gray-300; border-color: $gray-300;
background-color: transparent; background-color: transparent;
} }
&:focus:disabled~.custom-control-indicator, &:active:disabled~.custom-control-indicator { &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1); box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
border-color: $gray-300; border-color: $gray-300;
background-color: rgba($bg-disabled-control, 0.1); background-color: rgba($bg-disabled-control, 0.1);
} }
&:focus:disabled:checked~.custom-control-indicator, &:active:disabled:checked~.custom-control-indicator { &:focus:disabled:checked~.custom-control-label::before, &:active:disabled:checked~.custom-control-label::before {
border-color: $gray-400; border-color: $gray-400;
} }
} }

8
website/client/assets/scss/icon.scss
View File

@@ -31,3 +31,11 @@
.inline { .inline {
display: inline-block; display: inline-block;
} }
.toggle-up, .toggle-down {
cursor: pointer;
.svg-icon {
width: 20px;
}
}

403
website/client/assets/scss/task.scss
View File

@@ -1,213 +1,284 @@
.daily-todo-control {
&:hover {
.svg-icon.check {
display: block;
}
}
.svg-icon.check {
display: none;
&.display-check-icon {
display: block;
}
}
}
.task { .task {
// for editing rewards or when a task is created &-worst { // dark red
&-purple { &-control {
background: $purple-300; &-bg {
background: $maroon-100 !important;
&-color { &:hover {
color: $purple-300; .habit-control { background: rgba(26, 24, 29, 0.48) !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
&-inner-daily-todo { background: $maroon-500 !important; }
&-checkbox { color: $maroon-100 !important; }
} }
&-control-habit { &-modal {
background: $purple-300; &-bg { background: $maroon-100 !important; }
} &-icon { color: $maroon-100 !important; }
&-text { color: $maroon-50 !important; }
&-modal-input { &-option-disabled:hover {
color: $header-color !important; .svg-icon { color: $maroon-100 !important; }
.option-item-label { color: $maroon-50 !important; }
}
&-habit-control-disabled:hover {
.habit-control { background: $maroon-100 !important; }
.option-item-label { color: $maroon-50 !important; }
}
} }
} }
&-worst { &-worse { // light red
background: $maroon-100; &-control {
&-bg {
&-color { background: $red-100 !important;
color: darken($maroon-100, 12%); &:hover {
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
&-inner-daily-todo { background: $red-500 !important; }
&-checkbox { color: $red-100 !important; }
} }
&-control-habit { &-modal {
background: darken($maroon-100, 12%); &-bg { background: $red-100 !important; }
} &-icon { color: $red-100 !important; }
&-text { color: $red-10 !important; }
&-control-daily-todo { &-option-disabled:hover {
background: $maroon-500; .svg-icon { color: $red-100 !important; }
color: $maroon-100; .option-item-label { color: $red-10 !important; }
} }
&-habit-control-disabled:hover {
&-modal-input { .habit-control { background: $red-100 !important; }
color: $maroon-500 !important; .option-item-label { color: $red-10 !important; }
}
} }
} }
&-worse { &-bad { // orange
background: $red-100; &-control {
&-bg {
background: $orange-100 !important;
&-color { &:hover {
color: darken($red-100, 12%); .habit-control { background: #b75a1c !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(183, 90, 28, 0.4) !important; }
&-inner-daily-todo { background: $orange-500 !important; }
&-checkbox { color: $orange-100 !important; }
} }
&-control-habit { &-modal {
background: darken($red-100, 12%); &-bg {
} background: $orange-100 !important;
&-control-daily-todo { .form-control {
background: $red-500; background: rgba(183, 90, 28, 0.4) !important;
color: $red-100;
}
&-modal-input { &:focus, &:active, &:hover {
color: $red-500 !important; background-color: #b75a1c !important;
}
}
}
&-icon { color: $orange-100 !important; }
&-text { color: #b75a1c !important; }
&-option-disabled:hover {
.svg-icon { color: $orange-100 !important; }
.option-item-label { color: #b75a1c !important; }
}
&-habit-control-disabled:hover {
.habit-control { background: $orange-100 !important; }
.option-item-label { color: #b75a1c !important; }
}
} }
} }
&-bad { &-neutral { // yellow
background: $orange-100; &-control {
&-bg {
&-color { background: $yellow-100 !important;
color: darken($orange-100, 12%); &:hover {
.habit-control { background: #bf7d1a !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(183, 90, 28, 0.32) !important; }
&-inner-daily-todo { background: $yellow-500 !important; }
&-checkbox { color: $yellow-100 !important; }
} }
&-control-habit { &-modal {
background: darken($orange-100, 12%); &-bg {
} background: $yellow-100 !important;
&-control-daily-todo { .form-control {
background: $orange-500; background: rgba(183, 90, 28, 0.4) !important;
color: $orange-100;
}
&-modal-input { &:focus, &:active, &:hover {
color: $orange-500 !important; background-color: #bf7d1a !important;
}
}
}
&-icon { color: $yellow-100 !important; }
&-text { color: #bf7d1a !important; }
&-option-disabled:hover {
.svg-icon { color: $yellow-100 !important; }
.option-item-label { color: #bf7d1a !important; }
}
&-habit-control-disabled:hover {
.habit-control { background: $yellow-100 !important; }
.option-item-label { color: #bf7d1a !important; }
}
} }
} }
&-neutral { &-good { // green
background: $yellow-100; &-control {
&-bg {
&-color { background: $green-10 !important;
color: darken($yellow-100, 12%); &:hover {
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
&-inner-daily-todo { background: #77f4c7 !important; }
&-checkbox { color: $green-10 !important; }
} }
&-control-habit { &-modal {
background: darken($yellow-100, 12%); &-bg { background: $green-10 !important; }
} &-icon { color: $green-10 !important; }
&-text { color: #1ca372 !important; }
&-control-daily-todo { &-option-disabled:hover {
background: $yellow-500; .svg-icon { color: $green-10 !important; }
color: $yellow-100; .option-item-label { color: #1ca372 !important; }
} }
&-habit-control-disabled:hover {
&-modal-input { .habit-control { background: $green-10 !important; }
color: $yellow-500 !important; .option-item-label { color: #1ca372 !important; }
}
} }
} }
&-good { &-better { // teal
background: $green-10; &-control {
&-bg {
&-color { background: $teal-50 !important;
color: darken($green-10, 12%); &:hover {
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
&-inner-daily-todo { background: #8dedf6 !important; }
&-checkbox { color: $teal-50 !important; }
} }
&-control-habit { &-modal {
background: darken($green-10, 12%); &-bg { background: $teal-50 !important; }
} &-icon { color: $teal-50 !important; }
&-text { color: $teal-10 !important; }
&-control-daily-todo { &-option-disabled:hover {
background: $green-500; .svg-icon { color: $teal-50 !important; }
color: $green-10; .option-item-label { color: $teal-10 !important; }
} }
&-habit-control-disabled:hover {
&-modal-input { .habit-control { background: $teal-50 !important; }
color: $green-500 !important; .option-item-label { color: $teal-10 !important; }
}
} }
} }
&-better { &-best { // blue
background: $teal-50; &-control {
&-bg {
&-color { background: $blue-100 !important;
color: darken($teal-50, 12%); &:hover {
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
&-inner-daily-todo { background: $blue-500 !important; }
&-checkbox { color: $blue-100 !important; }
} }
&-control-habit { &-modal {
background: darken($teal-50, 12%); &-bg { background: $blue-100 !important; }
} &-icon { color: $blue-100 !important; }
&-text { color: $blue-10 !important; }
&-control-daily-todo { &-option-disabled:hover {
background: $teal-500; .svg-icon { color: $blue-50 !important; }
color: $teal-50; .option-item-label { color: $blue-10 !important; }
} }
&-habit-control-disabled:hover {
&-modal-input { .habit-control { background: $blue-50 !important; }
color: $teal-500 !important; .option-item-label { color: $blue-10 !important; }
}
} }
} }
&-best { &-purple { // purple, only used in modals
background: $blue-50; &-modal {
&-bg { background: $purple-300 !important; }
&-color { &-icon { color: $purple-300 !important; }
color: darken($blue-50, 12%); &-text { color: $purple-200 !important; }
} &-option-disabled:hover {
.svg-icon { color: $purple-300 !important; }
&-control-habit { .option-item-label { color: $purple-200 !important; }
background: darken($blue-50, 12%); }
} &-habit-control-disabled:hover {
.habit-control { background: $purple-300 !important; }
&-control-daily-todo { .option-item-label { color: $purple-200 !important; }
background: $blue-500; }
color: $blue-50;
}
&-modal-input {
color: $blue-500 !important;
} }
} }
&-reward { &-reward {
background: #FFF5E5 &-control {
} &-bg {
background: rgba(255, 217, 160, 0.32) !important;
.small-text { color: $yellow-10 !important; }
&-daily-todo-disabled { &:hover { background: rgba(255, 217, 160, 0.48) !important; }
background: $gray-500; }
&-control-daily-todo {
background: $gray-400;
color: $gray-200;
} }
} }
&-daily-todo-content-disabled { &-disabled {
background: $gray-600; &-habit {
&-control {
.task-title, .task-notes { &-bg { background: $gray-600; }
color: $gray-300 !important; &-inner {
color: rgba(26, 24, 29, 0.12) !important;
border: 1px solid rgba(26, 24, 29, 0.12);
}
}
} }
}
&-habit-disabled { &-daily-todo {
background: $gray-700; &-control {
color: rgba(0, 0, 0, 0.12); &-bg {
background: $gray-400 !important;
&:hover {
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
}
}
&-inner { background: $gray-500 !important; }
&-checkbox { color: $gray-400 !important; }
&-content {
background: $gray-600;
&-control-habit { .task-title, .task-notes {
color: rgba(0, 0, 0, 0.12) !important; color: $gray-300 !important;
border: 1px solid rgba(0, 0, 0, 0.12); }
}
}
} }
} }
} }
@@ -235,3 +306,19 @@
margin-top: 13px; margin-top: 13px;
} }
} }
.daily-todo-control {
&:hover {
.svg-icon.check {
display: block;
}
}
.svg-icon.check {
display: none;
&.display-check-icon {
display: block;
}
}
}

8
website/client/components/challenges/challengeModal.vue
View File

@@ -36,12 +36,12 @@
:key="group.key", :key="group.key",
v-if='group.key !== "habitica_official" || user.contributor.admin' v-if='group.key !== "habitica_official" || user.contributor.admin'
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", input.custom-control-input(type="checkbox",
:value='group.key', :value="group.key",
:id="group.key",
v-model="workingChallenge.categories") v-model="workingChallenge.categories")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}} button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
// @TODO: Implement in V2 .form-group // @TODO: Implement in V2 .form-group
label label

21
website/client/components/challenges/sidebar.vue
View File

@@ -10,30 +10,27 @@
v-for="group in categoryOptions", v-for="group in categoryOptions",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters") input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
.form-group(v-if='$route.name !== "findChallenges"') .form-group(v-if='$route.name !== "findChallenges"')
h3 Membership h3 Membership
.form-check( .form-check(
v-for="group in roleOptions", v-for="group in roleOptions",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters") input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
.form-group .form-group
h3 Ownership h3 Ownership
.form-check( .form-check(
v-for="group in ownershipOptions", v-for="group in ownershipOptions",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters") input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
</template> </template>
<script> <script>

49
website/client/components/creatorIntro.vue
View File

@@ -292,41 +292,34 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
.section.row .section.row
.col-6 .col-6
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='work', v-model='taskCategories') input.custom-control-input#work(type="checkbox", value='work', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="work") {{ $t('work') }}
span.custom-control-description(v-once) {{ $t('work') }}
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='exercise', v-model='taskCategories') input.custom-control-input#excercise(type="checkbox", value='exercise', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="excercise") {{ $t('exercise') }}
span.custom-control-description(v-once) {{ $t('exercise') }}
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='health_wellness', v-model='taskCategories') input.custom-control-input#health_wellness(type="checkbox", value='health_wellness', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="health_wellness") {{ $t('health_wellness') }}
span.custom-control-description(v-once) {{ $t('health_wellness') }}
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='school', v-model='taskCategories') input.custom-control-input#school(type="checkbox", value='school', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="school") {{ $t('school') }}
span.custom-control-description(v-once) {{ $t('school') }}
.col-6 .col-6
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='chores', v-model='taskCategories') input.custom-control-input#chores(type="checkbox", value='chores', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="chores") {{ $t('chores') }}
span.custom-control-description(v-once) {{ $t('chores') }}
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='creativity', v-model='taskCategories') input.custom-control-input#creativity(type="checkbox", value='creativity', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="creativity") {{ $t('creativity') }}
span.custom-control-description(v-once) {{ $t('creativity') }}
.task-option .task-option
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", value='self_care', v-model='taskCategories') input.custom-control-input#self_care(type="checkbox", value='self_care', v-model='taskCategories')
span.custom-control-indicator label.custom-control-label(v-once, for="self_care") {{ $t('self_care') }}
span.custom-control-description(v-once) {{ $t('self_care') }}
.section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing') .section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing')
.col-12 .col-12

18
website/client/components/group-plans/taskInformation.vue
View File

@@ -3,7 +3,7 @@
.row.tasks-navigation .row.tasks-navigation
.col-4 .col-4
h1 Group's Tasks h1 Group's Tasks
// @TODO: Abstract to component? // @TODO: Abstract to component!
.col-4 .col-4
.input-group .input-group
input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText") input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
@@ -18,20 +18,20 @@
.col-6(v-for="(tag, tagIndex) in tagsSnap") .col-6(v-for="(tag, tagIndex) in tagsSnap")
.inline-edit-input-group.tag-edit-item.input-group .inline-edit-input-group.tag-edit-item.input-group
input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name") input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name")
span.input-group-btn(@click="removeTag(tagIndex)") .input-group-append(@click="removeTag(tagIndex)")
.svg-icon.destroy-icon(v-html="icons.destroy") .svg-icon.destroy-icon(v-html="icons.destroy")
.col-6 .col-6
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag") input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag")
template(v-else) template(v-else)
.col-6(v-for="(tag, tagIndex) in tagsType.tags") .col-6(v-for="(tag, tagIndex) in tagsType.tags")
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input( input.custom-control-input(
type="checkbox", type="checkbox",
:checked="isTagSelected(tag)", :checked="isTagSelected(tag)",
@change="toggleTag(tag)", @change="toggleTag(tag)",
:id="`tag-${tagIndex}`",
) )
span.custom-control-indicator label.custom-control-label(:for="`tag-${tagIndex}`") {{ tag.name }}
span.custom-control-description {{ tag.name }}
.filter-panel-footer.clearfix .filter-panel-footer.clearfix
template(v-if="editingTags === true") template(v-if="editingTags === true")
@@ -44,7 +44,7 @@
.float-right .float-right
a.mr-3.btn-filters-primary(@click="applyFilters()", v-once) {{ $t('applyFilters') }} a.mr-3.btn-filters-primary(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }} a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
span.input-group-btn span.input-group-append
button.btn.btn-secondary.filter-button( button.btn.btn-secondary.filter-button(
type="button", type="button",
@click="toggleFilterPanel()", @click="toggleFilterPanel()",
@@ -173,7 +173,7 @@
.tag-edit-input { .tag-edit-input {
border-bottom: 1px solid $gray-500 !important; border-bottom: 1px solid $gray-500 !important;
&:focus, &:focus ~ .input-group-btn { &:focus, &:focus ~ .input-group-append {
border-color: $purple-500 !important; border-color: $purple-500 !important;
} }
} }
@@ -188,7 +188,7 @@
background-image: url(~client/assets/svg/for-css/positive.svg); background-image: url(~client/assets/svg/for-css/positive.svg);
} }
.tag-edit-item .input-group-btn { .tag-edit-item .input-group-append {
border-bottom: 1px solid $gray-500 !important; border-bottom: 1px solid $gray-500 !important;
&:focus { &:focus {
@@ -196,7 +196,7 @@
} }
} }
.custom-control-description { .custom-control-label {
margin-left: 10px; margin-left: 10px;
} }

8
website/client/components/groups/group.vue
View File

@@ -247,10 +247,6 @@
} }
} }
.toggle-up .svg-icon, .toggle-down .svg-icon {
width: 25px;
}
span.action { span.action {
font-size: 14px; font-size: 14px;
line-height: 1.33; line-height: 1.33;
@@ -286,10 +282,6 @@
padding-bottom: 1em; padding-bottom: 1em;
} }
.toggle-up, .toggle-down {
cursor: pointer;
}
.hr { .hr {
width: 100%; width: 100%;
height: 20px; height: 20px;

31
website/client/components/groups/groupFormModal.vue
View File

@@ -13,10 +13,9 @@
label label
strong(v-once) {{$t('privacySettings')}} * strong(v-once) {{$t('privacySettings')}} *
br br
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges") input.custom-control-input#onlyLeaderCreatesChallenges(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges")
span.custom-control-indicator label.custom-control-label(v-once, for="onlyLeaderCreatesChallenges") {{ $t('onlyLeaderCreatesChallenges') }}
span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
#groupPrivateDescription1.icon(:title="$t('privateDescription')") #groupPrivateDescription1.icon(:title="$t('privateDescription')")
.svg-icon(v-html='icons.information') .svg-icon(v-html='icons.information')
b-tooltip( b-tooltip(
@@ -25,18 +24,16 @@
) )
// br // br
// @TODO Implement in V2 label.custom-control.custom-checkbox // @TODO Implement in V2 .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged") input.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
span.custom-control-indicator label.custom-control-label(v-once) {{ $t('guildLeaderCantBeMessaged') }}
span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
// "guildLeaderCantBeMessaged": "Leader can not be messaged directly", // "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
// @TODO discuss the impact of this with moderators before implementing // @TODO discuss the impact of this with moderators before implementing
br br
label.custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id') .custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
input.custom-control-input(type="checkbox", v-model="workingGroup.privateGuild") input.custom-control-input#privateGuild(type="checkbox", v-model="workingGroup.privateGuild")
span.custom-control-indicator label.custom-control-label(v-once, for="privateGuild") {{ $t('privateGuild') }}
span.custom-control-description(v-once) {{ $t('privateGuild') }}
#groupPrivateDescription2.icon(:title="$t('privateDescription')") #groupPrivateDescription2.icon(:title="$t('privateDescription')")
.svg-icon(v-html='icons.information') .svg-icon(v-html='icons.information')
b-tooltip( b-tooltip(
@@ -45,10 +42,9 @@
) )
// br // br
// @TODO: Implement in v2 label.custom-control.custom-checkbox(v-if='!creatingParty') // @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')
input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers") input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers")
span.custom-control-indicator label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
span.custom-control-description(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
// "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members", // "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
.form-group(v-if='!isParty') .form-group(v-if='!isParty')
@@ -80,10 +76,9 @@
:key="group.key", :key="group.key",
v-if='group.key !== "habitica_official" || user.contributor.admin' v-if='group.key !== "habitica_official" || user.contributor.admin'
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value="group.key", v-model="workingGroup.categories") input.custom-control-input(:id="group.key", type="checkbox", :value="group.key", v-model="workingGroup.categories")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}} button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
// @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party // @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party

21
website/client/components/groups/sidebar.vue
View File

@@ -11,30 +11,27 @@
v-for="group in categoryOptions", v-for="group in categoryOptions",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters") input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
.form-group .form-group
h3 Role h3 Role
.form-check( .form-check(
v-for="group in roleOptions", v-for="group in roleOptions",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters") input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
.form-group .form-group
h3 Guild Size h3 Guild Size
.form-check( .form-check(
v-for="group in guildSizeOptions", v-for="group in guildSizeOptions",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters") input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
span.custom-control-description(v-once) {{ $t(group.label) }}
</template> </template>
<script> <script>

8
website/client/components/groups/tavern.vue
View File

@@ -214,14 +214,6 @@
} }
} }
.toggle-up, .toggle-down {
width: 20px;
}
.toggle-up:hover, .toggle-down:hover {
cursor: pointer;
}
.pause-button { .pause-button {
background-color: #ffb445 !important; background-color: #ffb445 !important;
color: $white; color: $white;

7
website/client/components/inventory/equipment/index.vue
View File

@@ -12,10 +12,9 @@
v-for="group in itemsGroups", v-for="group in itemsGroups",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[group.key].selected") input.custom-control-input(type="checkbox", v-model="viewOptions[group.key].selected", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ group.label }}
span.custom-control-description(v-once) {{ group.label }}
.standard-page .standard-page
.clearfix .clearfix

7
website/client/components/inventory/items/index.vue
View File

@@ -12,10 +12,9 @@
v-for="group in groups", v-for="group in groups",
:key="group.key", :key="group.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="group.selected") input.custom-control-input(type="checkbox", v-model="group.selected", :id="group.key")
span.custom-control-indicator label.custom-control-label(v-once, :for="group.key") {{ $t(group.key) }}
span.custom-control-description(v-once) {{ $t(group.key) }}
.standard-page .standard-page
.clearfix .clearfix
h1.float-left.mb-4.page-header(v-once) {{ $t('items') }} h1.float-left.mb-4.page-header(v-once) {{ $t('items') }}

16
website/client/components/inventory/stable/index.vue
View File

@@ -23,28 +23,28 @@
v-for="petGroup in petGroups", v-for="petGroup in petGroups",
:key="petGroup.key" :key="petGroup.key"
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input( input.custom-control-input(
type="checkbox", type="checkbox",
v-model="viewOptions[petGroup.key].selected", v-model="viewOptions[petGroup.key].selected",
:disabled="viewOptions[petGroup.key].animalCount == 0" :disabled="viewOptions[petGroup.key].animalCount == 0",
:id="petGroup.key",
) )
span.custom-control-indicator label.custom-control-label(v-once, :for="petGroup.key") {{ petGroup.label }}
span.custom-control-description(v-once) {{ petGroup.label }}
h3(v-once) {{ $t('mounts') }} h3(v-once) {{ $t('mounts') }}
.form-group .form-group
.form-check( .form-check(
v-for="mountGroup in mountGroups", v-for="mountGroup in mountGroups",
:key="mountGroup.key" :key="mountGroup.key"
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input( input.custom-control-input(
type="checkbox", type="checkbox",
v-model="viewOptions[mountGroup.key].selected", v-model="viewOptions[mountGroup.key].selected",
:disabled="viewOptions[mountGroup.key].animalCount == 0" :disabled="viewOptions[mountGroup.key].animalCount == 0",
:id="mountGroup.key",
) )
span.custom-control-indicator label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
span.custom-control-description(v-once) {{ mountGroup.label }}
div.form-group.clearfix div.form-group.clearfix
h3.float-left Hide Missing h3.float-left Hide Missing

2
website/client/components/settings/subscription.vue
View File

@@ -157,7 +157,7 @@ export default {
purchasedPlanIdInfo () { purchasedPlanIdInfo () {
if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) { if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
// @TODO: find which subs are in the common // @TODO: find which subs are in the common
console.log(this.subscriptionBlocks[this.user.purchased.plan.planId]); // eslint-disable-line // console.log(this.subscriptionBlocks[this.user.purchased.plan.planId]); // eslint-disable-line
return { return {
price: 0, price: 0,
months: 0, months: 0,

7
website/client/components/shops/market/index.vue
View File

@@ -10,10 +10,9 @@
v-for="category in categories", v-for="category in categories",
:key="category.identifier", :key="category.identifier",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected") input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
span.custom-control-indicator label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
span.custom-control-description(v-once) {{ category.text }}
div.form-group.clearfix div.form-group.clearfix
h3.float-left(v-once) {{ $t('hideLocked') }} h3.float-left(v-once) {{ $t('hideLocked') }}
toggle-switch.float-right.no-margin( toggle-switch.float-right.no-margin(

7
website/client/components/shops/quests/index.vue
View File

@@ -11,10 +11,9 @@
v-for="category in categories", v-for="category in categories",
:key="category.identifier", :key="category.identifier",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected") input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
span.custom-control-indicator label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
span.custom-control-description(v-once) {{ category.text }}
div.form-group.clearfix div.form-group.clearfix
h3.float-left(v-once) {{ $t('hideLocked') }} h3.float-left(v-once) {{ $t('hideLocked') }}

7
website/client/components/shops/seasonal/index.vue
View File

@@ -11,10 +11,9 @@
v-for="category in filterCategories", v-for="category in filterCategories",
:key="category.key", :key="category.key",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[category.key].selected") input.custom-control-input(type="checkbox", v-model="viewOptions[category.key].selected", :id="`category-${category.identifier}`")
span.custom-control-indicator label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.value }}
span.custom-control-description(v-once) {{ category.value }}
div.form-group.clearfix div.form-group.clearfix
h3.float-left(v-once) {{ $t('hidePinned') }} h3.float-left(v-once) {{ $t('hidePinned') }}

7
website/client/components/shops/timeTravelers/index.vue
View File

@@ -11,10 +11,9 @@
v-for="category in categories", v-for="category in categories",
:key="category.identifier", :key="category.identifier",
) )
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected") input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
span.custom-control-indicator label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
span.custom-control-description(v-once) {{ category.text }}
div.form-group.clearfix div.form-group.clearfix
h3.float-left(v-once) {{ $t('hidePinned') }} h3.float-left(v-once) {{ $t('hidePinned') }}

11
website/client/components/tasks/column.vue
View File

@@ -34,7 +34,7 @@
.svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once) .svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(types[type].label)})}} h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(types[type].label)})}}
.small-text {{$t(`${type}sDesc`)}} .small-text {{$t(`${type}sDesc`)}}
draggable( draggable.sortable-tasks(
ref="tasksList", ref="tasksList",
@update='sorted', @update='sorted',
:options='{disabled: activeFilters[type].label === "scheduled"}', :options='{disabled: activeFilters[type].label === "scheduled"}',
@@ -81,6 +81,7 @@
.reward-items { .reward-items {
@supports (display: grid) { @supports (display: grid) {
display: grid; display: grid;
justify-content: center;
grid-column-gap: 16px; grid-column-gap: 16px;
grid-row-gap: 4px; grid-row-gap: 4px;
grid-template-columns: repeat(auto-fill, 94px); grid-template-columns: repeat(auto-fill, 94px);
@@ -90,7 +91,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
& > div { & > div {
margin: 0 16px 4px 0; margin: 0 16px 4px 0;
} }
} }
} }
@@ -108,12 +109,11 @@
border-radius: 2px; border-radius: 2px;
background-color: rgba($black, 0.06); background-color: rgba($black, 0.06);
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 3px;
padding: 12px 16px; padding: 12px 16px;
border-color: transparent; border-color: transparent;
transition: background 0.15s ease-in; transition: background 0.15s ease-in;
resize: none; resize: none;
margin-bottom: 0px;
&:hover { &:hover {
background-color: rgba($black, 0.1); background-color: rgba($black, 0.1);
@@ -124,6 +124,7 @@
background: $white; background: $white;
border-color: $purple-500; border-color: $purple-500;
color: $gray-50; color: $gray-50;
margin-bottom: 0px;
} }
&::placeholder { &::placeholder {
@@ -558,7 +559,7 @@ export default {
const tasksWrapperHeight = tasksWrapperEl.offsetHeight; const tasksWrapperHeight = tasksWrapperEl.offsetHeight;
const quickAddHeight = this.$refs.quickAdd ? this.$refs.quickAdd.offsetHeight : 0; const quickAddHeight = this.$refs.quickAdd ? this.$refs.quickAdd.offsetHeight : 0;
const tasksListHeight = this.$refs.tasksList.offsetHeight; const tasksListHeight = this.$refs.tasksList.$el.offsetHeight;
let combinedTasksHeights = tasksListHeight + quickAddHeight; let combinedTasksHeights = tasksListHeight + quickAddHeight;

11
website/client/components/tasks/tagsPopup.vue
View File

@@ -6,10 +6,9 @@
.tags-list.container .tags-list.container
.row .row
.col-4(v-for="tag in tags") .col-4(v-for="tag in tags")
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags") input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags", :id="`tag-${tag.id}`")
span.custom-control-indicator label.custom-control-label(:title="tag.name", :for="`tag-${tag.id}`") {{tag.name}}
span.custom-control-description(:title='tag.name') {{tag.name}}
.tags-footer .tags-footer
span.clear-tags(@click="clearTags()") {{$t("clearTags")}} span.clear-tags(@click="clearTags()") {{$t("clearTags")}}
span.close-tags(@click="close()") {{$t("close")}} span.close-tags(@click="close()") {{$t("close")}}
@@ -53,7 +52,7 @@
} }
.tags-list { .tags-list {
.custom-control-description { .custom-control-label {
color: $gray-50 !important; color: $gray-50 !important;
font-weight: normal; font-weight: normal;
overflow: hidden; overflow: hidden;
@@ -70,7 +69,7 @@
justify-content: center; justify-content: center;
.close-tags { .close-tags {
color: $red-50; color: $blue-10;
margin: 1.1em 0; margin: 1.1em 0;
margin-left: 2em; margin-left: 2em;
font-size: 14px; font-size: 14px;

32
website/client/components/tasks/task.vue
View File

@@ -4,13 +4,13 @@
approval-header(:task='task', v-if='this.task.group.id', :group='group') approval-header(:task='task', v-if='this.task.group.id', :group='group')
.d-flex(:class="{'task-not-scoreable': isUser !== true}") .d-flex(:class="{'task-not-scoreable': isUser !== true}")
// Habits left side control // Habits left side control
.left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up") .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
.task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="(isUser && controlClass.up !== 'task-habit-disabled') ? score('up') : null") .task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
.svg-icon.positive(v-html="icons.positive") .svg-icon.positive(v-html="icons.positive")
// Dailies and todos left side control // Dailies and todos left side control
.left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass") .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
.task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null") .task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}") .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
// Task title, description and icons // Task title, description and icons
.task-content(:class="contentClass") .task-content(:class="contentClass")
.task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}") .task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}")
@@ -55,7 +55,7 @@
) )
.svg-icon(v-html="icons.checklist") .svg-icon(v-html="icons.checklist")
span {{ checklistProgress }} span {{ checklistProgress }}
label.custom-control.custom-checkbox.checklist-item( .custom-control.custom-checkbox.checklist-item(
v-if='!task.collapseChecklist', v-if='!task.collapseChecklist',
v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}", v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
) )
@@ -64,9 +64,9 @@
:checked="item.completed", :checked="item.completed",
@change="toggleChecklistItem(item)", @change="toggleChecklistItem(item)",
:disabled="castingSpell", :disabled="castingSpell",
:id="`checklist-${item.id}`"
) )
span.custom-control-indicator label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}`")
span.custom-control-description(v-markdown='item.text')
.icons.small-text.d-flex.align-items-center .icons.small-text.d-flex.align-items-center
.d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}") .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
.svg-icon.calendar(v-html="icons.calendar") .svg-icon.calendar(v-html="icons.calendar")
@@ -97,11 +97,11 @@
.tag-label(v-for="tag in getTagsFor(task)") {{tag}} .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
// Habits right side control // Habits right side control
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down") .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
.task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="(isUser && controlClass.down !== 'task-habit-disabled') ? score('down') : null") .task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
.svg-icon.negative(v-html="icons.negative") .svg-icon.negative(v-html="icons.negative")
// Rewards right side control // Rewards right side control
.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass", @click="isUser ? score('down') : null") .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
.svg-icon(v-html="icons.gold") .svg-icon(v-html="icons.gold")
.small-text {{task.value}} .small-text {{task.value}}
approval-footer(:task='task', v-if='this.task.group.id', :group='group') approval-footer(:task='task', v-if='this.task.group.id', :group='group')
@@ -162,7 +162,7 @@
.dropdown-icon { .dropdown-icon {
width: 4px; width: 4px;
height: 16px; height: 16px;
margin-right: 10px; margin-right: 0px;
color: $gray-100 !important; color: $gray-100 !important;
} }
@@ -286,11 +286,11 @@
text-decoration: line-through; text-decoration: line-through;
} }
.custom-control-indicator { .custom-control-label::before {
margin-top: -2px; margin-top: -2px;
} }
.custom-control-description { .custom-control-label {
margin-left: 6px; margin-left: 6px;
padding-top: 0px; padding-top: 0px;
min-width: 0px; min-width: 0px;
@@ -435,6 +435,7 @@
.daily-todo-control { .daily-todo-control {
margin-top: 16px; margin-top: 16px;
border-radius: 2px; border-radius: 2px;
margin-left: -1px;
} }
.reward-control { .reward-control {
@@ -449,7 +450,6 @@
.small-text { .small-text {
margin-top: 4px; margin-top: 4px;
color: $yellow-10;
font-style: initial; font-style: initial;
font-weight: bold; font-weight: bold;
} }
@@ -590,7 +590,7 @@ export default {
const type = this.task.type; const type = this.task.type;
const classes = []; const classes = [];
classes.push(this.getTaskClasses(this.task, 'content', this.dueDate)); classes.push(this.getTaskClasses(this.task, 'control', this.dueDate).content);
if (type === 'reward' || type === 'habit') { if (type === 'reward' || type === 'habit') {
classes.push('no-right-border'); classes.push('no-right-border');

489
website/client/components/tasks/taskModal.vue
View File

@@ -1,29 +1,37 @@
<template lang="pug"> <template lang="pug">
form(v-if="task", @submit.stop.prevent="submit()") form(v-if="task", @submit.stop.prevent="submit()")
b-modal#task-modal(size="sm", @hidden="onClose()") b-modal#task-modal(size="sm", @hidden="onClose()")
.task-modal-header(slot="modal-header", :class="[cssClass]") .task-modal-header(slot="modal-header", :class="cssClass('bg')")
.clearfix .clearfix
h1.float-left {{ title }} h1.float-left {{ title }}
.float-right.d-flex.align-items-center .float-right.d-flex.align-items-center
span.cancel-task-btn.mr-2(v-if="purpose !== 'create'", v-once, @click="cancel()") {{ $t('cancel') }} span.cancel-task-btn.mr-2(v-once, @click="cancel()") {{ $t('cancel') }}
button.btn.btn-secondary(type="submit", v-once) {{ $t('save') }} button.btn.btn-secondary(type="submit", v-once) {{ $t('save') }}
.form-group .form-group
label(v-once) {{ `${$t('text')}*` }} label(v-once) {{ `${$t('text')}*` }}
input.form-control.title-input( input.form-control.title-input(
type="text", :class="[`${cssClass}-modal-input`]", type="text",
required, v-model="task.text", required, v-model="task.text",
autofocus, spellcheck="true", autofocus, spellcheck="true",
:disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired" :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
) )
.form-group .form-group
label(v-once) {{ $t('notes') }} label.d-flex.align-items-center.justify-content-between(v-once)
textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3") span {{ $t('notes') }}
small(v-once)
a(target="_blank", href="http://habitica.wikia.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
textarea.form-control(v-model="task.notes", rows="3")
.task-modal-content .task-modal-content
.option(v-if="task.type === 'reward'") .option.mt-0(v-if="task.type === 'reward'")
label(v-once) {{ $t('cost') }} .form-group
input(type="number", v-model="task.value", required, placeholder="1.0", step="0.01", min="0") label(v-once) {{ $t('cost') }}
.svg-icon.gold(v-html="icons.gold") .input-group
.option(v-if="checklistEnabled") .input-group-prepend.input-group-icon
.svg-icon.gold(v-html="icons.gold")
input.form-control(type="number", v-model="task.value", required, placeholder="1.0", step="0.01", min="0")
.option.mt-0(v-if="checklistEnabled")
label(v-once) {{ $t('checklist') }} label(v-once) {{ $t('checklist') }}
br br
draggable( draggable(
@@ -34,67 +42,68 @@
.inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist") .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
span.grippy span.grippy
input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text") input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
span.input-group-btn(@click="removeChecklistItem($index)") span.input-group-append(@click="removeChecklistItem($index)")
.svg-icon.destroy-icon(v-html="icons.destroy") .svg-icon.destroy-icon(v-html="icons.destroy")
input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem") input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
.d-flex.justify-content-center(v-if="task.type === 'habit'") .d-flex.justify-content-center(v-if="task.type === 'habit'")
.option-item(:class="optionClass(task.up === true)", @click="toggleUpDirection()") .option-item.habit-control(@click="toggleUpDirection()", :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
.option-item-box .option-item-box(:class="task.up ? cssClass('bg') : ''")
.task-control.habit-control(:class="controlClass.up + '-control-habit'") .task-control.habit-control
.svg-icon.positive(v-html="icons.positive") .svg-icon.positive(v-html="icons.positive", :class="task.up ? cssClass('icon') : ''")
.option-item-label(v-once) {{ $t('positive') }} .option-item-label(:class="task.up ? cssClass('text') : ''") {{ $t('positive') }}
.option-item(:class="optionClass(task.down === true)", @click="toggleDownDirection()") .option-item.habit-control(@click="toggleDownDirection()", :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
.option-item-box .option-item-box(:class="task.down ? cssClass('bg') : ''")
.task-control.habit-control(:class="controlClass.down + '-control-habit'") .task-control.habit-control
.svg-icon.negative(v-html="icons.negative") .svg-icon.negative(v-html="icons.negative", :class="task.down ? cssClass('icon') : ''")
.option-item-label(v-once) {{ $t('negative') }} .option-item-label(:class="task.down ? cssClass('text') : ''") {{ $t('negative') }}
template(v-if="task.type !== 'reward'") template(v-if="task.type !== 'reward'")
label(v-once) label(v-once)
span.float-left {{ $t('difficulty') }} span.float-left {{ $t('difficulty') }}
// @TODO .svg-icon.info-icon(v-html="icons.information") .svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop="$t('difficultyHelp')")
.d-flex.justify-content-center .d-flex.justify-content-center.difficulty-options
.option-item(:class="optionClass(task.priority === 0.1)", @click="setDifficulty(0.1)") .option-item(:class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(0.1)")
.option-item-box .option-item-box(:class="task.priority === 0.1 ? cssClass('bg') : ''")
.svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial") .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
.option-item-label(v-once) {{ $t('trivial') }} .option-item-label(:class="task.priority === 0.1 ? cssClass('text') : ''") {{ $t('trivial') }}
.option-item(:class="optionClass(task.priority === 1)", @click="setDifficulty(1)") .option-item(:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1)")
.option-item-box .option-item-box(:class="task.priority === 1 ? cssClass('bg') : ''")
.svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal") .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
.option-item-label(v-once) {{ $t('easy') }} .option-item-label(:class="task.priority === 1 ? cssClass('text') : ''") {{ $t('easy') }}
.option-item(:class="optionClass(task.priority === 1.5)", @click="setDifficulty(1.5)") .option-item(:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1.5)")
.option-item-box .option-item-box(:class="task.priority === 1.5 ? cssClass('bg') : ''")
.svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium") .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
.option-item-label(v-once) {{ $t('medium') }} .option-item-label(:class="task.priority === 1.5 ? cssClass('text') : ''") {{ $t('medium') }}
.option-item(:class="optionClass(task.priority === 2)", @click="setDifficulty(2)") .option-item(:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(2)")
.option-item-box .option-item-box(:class="task.priority === 2 ? cssClass('bg') : ''")
.svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard") .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
.option-item-label(v-once) {{ $t('hard') }} .option-item-label(:class="task.priority === 2 ? cssClass('text') : ''") {{ $t('hard') }}
.option(v-if="task.type === 'todo'") .option(v-if="task.type === 'todo'")
label(v-once) {{ $t('dueDate') }} .form-group
datepicker.d-inline-block( label(v-once) {{ $t('dueDate') }}
v-model="task.date", datepicker(
:clearButton='true', v-model="task.date",
clearButtonIcon='category-select', :calendarIcon="icons.calendar",
:clearButtonText='$t("clear")', :clearButton='true',
:todayButton='!challengeAccessRequired', :clearButtonText='$t("clear")',
todayButtonIcon='category-select', :todayButton='!challengeAccessRequired',
:todayButtonText='$t("today")', :todayButtonText='$t("today")',
:disabled-picker='challengeAccessRequired' :disabled-picker='challengeAccessRequired'
) )
.option(v-if="task.type === 'daily'") .option(v-if="task.type === 'daily'")
label(v-once) {{ $t('startDate') }} .form-group
datepicker.d-inline-block( label(v-once) {{ $t('startDate') }}
v-model="task.startDate", datepicker(
:clearButton='false', v-model="task.startDate",
:todayButton='!challengeAccessRequired', :calendarIcon="icons.calendar",
todayButtonIcon='category-select', :clearButton="false",
:todayButtonText='$t("today")', :todayButton="!challengeAccessRequired",
:disabled-picker='challengeAccessRequired' :todayButtonText="$t('today')",
) :disabled-picker="challengeAccessRequired"
)
.option(v-if="task.type === 'daily'") .option(v-if="task.type === 'daily'")
.form-group .form-group
label(v-once) {{ $t('repeats') }} label(v-once) {{ $t('repeats') }}
b-dropdown(:text="$t(task.frequency)") b-dropdown.inline-dropdown(:text="$t(task.frequency)")
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']",
:key="frequency", @click="task.frequency = frequency", :key="frequency", @click="task.frequency = frequency",
:disabled='challengeAccessRequired', :disabled='challengeAccessRequired',
@@ -102,82 +111,138 @@
| {{ $t(frequency) }} | {{ $t(frequency) }}
.form-group .form-group
label(v-once) {{ $t('repeatEvery') }} label(v-once) {{ $t('repeatEvery') }}
input(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired') .input-group
| {{ repeatSuffix }} input.form-control(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
br .input-group-append.input-group-text {{ repeatSuffix }}
template(v-if="task.frequency === 'weekly'") template(v-if="task.frequency === 'weekly'")
.form-check-inline.weekday-check( .form-group
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']", label.d-block(v-once) {{ $t('repeatOn') }}
:key="dayNumber", .form-check-inline.weekday-check.mr-0(
) v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
label.custom-control.custom-checkbox :key="dayNumber",
input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired') )
span.custom-control-indicator .custom-control.custom-checkbox.custom-control-inline
span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }} input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired', :id="`weekday-${dayNumber}`")
label.custom-control-label(v-once, :for="`weekday-${dayNumber}`") {{ weekdaysMin(dayNumber) }}
template(v-if="task.frequency === 'monthly'") template(v-if="task.frequency === 'monthly'")
label.custom-control.custom-radio label.d-block(v-once) {{ $t('repeatOn') }}
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth") .form-radion-inline.mr-0
span.custom-control-indicator .custom-control.custom-radio.custom-control-inline
span.custom-control-description {{ $t('dayOfMonth') }} input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth", id="repeat-dayOfMonth")
label.custom-control.custom-radio label.custom-control-label(for="repeat-dayOfMonth") {{ $t('dayOfMonth') }}
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek") .custom-control.custom-radio.custom-control-inline
span.custom-control-indicator input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek")
span.custom-control-description {{ $t('dayOfWeek') }} label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
.tags-select.option(v-if="isUserTask") .tags-select.option(v-if="isUserTask")
.tags-inline .tags-inline.form-group.row
label(v-once) {{ $t('tags') }} label.col-12(v-once) {{ $t('tags') }}
.category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }") .col-12
span.category-select(v-if='task.tags && task.tags.length === 0') .category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
.tags-none {{$t('none')}} span.category-select(v-if='task.tags && task.tags.length === 0')
.dropdown-toggle .tags-none {{$t('none')}}
span.category-select(v-else) .dropdown-toggle
.category-label(v-for='tagName in truncatedSelectedTags', :title="tagName") {{ tagName }} span.category-select(v-else)
.tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }} .category-label(v-for='tagName in truncatedSelectedTags', :title="tagName") {{ tagName }}
.dropdown-toggle .tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
.dropdown-toggle
tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()') tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
.option(v-if="task.type === 'habit'") .option(v-if="task.type === 'habit'")
label(v-once) {{ $t('resetStreak') }}
b-dropdown.streak-dropdown(:text="$t(task.frequency)")
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
| {{ $t(frequency) }}
.option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
.form-group .form-group
label(v-once) {{ $t('restoreStreak') }} label(v-once) {{ $t('resetStreak') }}
input(type="number", v-model="task.streak", min="0", required, :disabled='challengeAccessRequired') b-dropdown.inline-dropdown(:text="$t(task.frequency)")
b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
| {{ $t(frequency) }}
.option.group-options(v-if='groupId') .option.group-options(v-if='groupId')
label(v-once) Assigned To .form-group.row
.category-wrap(@click="showAssignedSelect = !showAssignedSelect") label.col-12(v-once) {{ $t('assignedTo') }}
span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}} .col-12
span.category-select(v-else) .category-wrap(@click="showAssignedSelect = !showAssignedSelect")
span(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}} span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
.category-box(v-if="showAssignedSelect") span.category-select(v-else)
.container span(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
.row .category-box(v-if="showAssignedSelect")
.form-check.col-6( .container
v-for="member in members", .row
:key="member._id", .form-check.col-6(
) v-for="member in members",
label.custom-control.custom-checkbox :key="member._id",
input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)') )
span.custom-control-indicator .custom-control.custom-checkbox
span.custom-control-description(v-once) {{ member.profile.name }} input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)', :id="`assigned-${member._id}`")
label.custom-control-label(v-once, :for="`assigned-${member._id}`") {{ member.profile.name }}
.row .row
button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}} button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
.option.group-options(v-if='groupId') .option.group-options(v-if='groupId')
label(v-once) Needs Approval .form-group
toggle-switch(:label='""', label(v-once) {{ $t('approvalRequired') }}
:checked="requiresApproval", toggle-switch.d-inline-block(
@change="updateRequiresApproval") label="",
:checked="requiresApproval",
@change="updateRequiresApproval"
)
.task-modal-footer(slot="modal-footer") .reward-delete.delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="task.type === 'reward' && purpose !== 'create'")
span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }} .svg-icon.d-inline-b(v-html="icons.destroy")
span.delete-task-btn(v-once, v-if='canDelete', @click="destroy()") {{ $t('delete') }} span {{ $t('deleteTask') }}
.advanced-settings(v-if="task.type !== 'reward'")
.d-flex.justify-content-between.align-items-center
h3 {{ $t('advancedSettings') }}
.toggle-up(@click = "showAdvancedOptions = !showAdvancedOptions")
.svg-icon(v-html="icons.down", :class="{'toggle-open': showAdvancedOptions}")
b-collapse#advancedOptionsCollapse(v-model="showAdvancedOptions")
.advanced-settings-body
.option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
.form-group
label(v-once) {{ $t('restoreStreak') }}
.input-group
.input-group-prepend.streak-addon.input-group-icon
.svg-icon(v-html="icons.streak")
input.form-control(type="number", v-model="task.streak", min="0", required, :disabled='challengeAccessRequired')
.option(v-if="task.type === 'habit' && isUserTask && purpose === 'edit' && (task.up || task.down)")
.form-group
label(v-once) {{ $t('restoreStreak') }}
.row
.col-6(v-if="task.up")
.input-group
.input-group-prepend.positive-addon.input-group-icon
.svg-icon(v-html="icons.positive")
input.form-control(
type="number", v-model="task.counterUp", min="0", required,
:disabled="challengeAccessRequired",
)
.col-6(v-if="task.down")
.input-group
.input-group-prepend.negative-addon.input-group-icon
.svg-icon(v-html="icons.negative")
input.form-control(
type="number", v-model="task.counterDown", min="0", required,
:disabled="challengeAccessRequired",
)
.option(v-if="isUserTask && task.type !== 'reward'")
.form-group
label(v-once)
span.float-left {{ $t('attributeAllocation') }}
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop.html="$t('attributeAllocationHelp')")
.attributes
.custom-control.custom-radio.custom-control-inline(v-for="attr in ATTRIBUTES", :key="attr")
input.custom-control-input(:id="`attribute-${attr}`", type="radio", :value="attr", v-model="task.attribute")
label.custom-control-label.attr-description(:for="`attribute-${attr}`", v-once, v-b-popover.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}
.delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="purpose !== 'create'")
.svg-icon.d-inline-b(v-html="icons.destroy")
span {{ $t('deleteTask') }}
.task-modal-footer.d-flex.justify-content-center.align-items-center(slot="modal-footer")
span.cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}
</template> </template>
<style lang="scss"> <style lang="scss">
@@ -194,13 +259,17 @@
input, textarea { input, textarea {
border: none; border: none;
background-color: rgba(0, 0, 0, 0.16); background: rgba(0, 0, 0, 0.24);
opacity: 0.64; color: rgba($white, 0.64) !important;
color: $white !important; transition-property: border-color, box-shadow, color, background;
&:focus { &:focus, &:active {
color: $white !important; color: $white !important;
opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
}
&:focus, &:active, &:hover {
background-color: rgba(0, 0, 0, 0.40);
} }
} }
@@ -237,7 +306,7 @@
input { input {
background: $white; background: $white;
border: 1px solid $gray-500; border: 1px solid $gray-400;
color: $gray-200 !important; color: $gray-200 !important;
&:focus { &:focus {
@@ -257,31 +326,39 @@
.difficulty-trivial-icon { .difficulty-trivial-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
color: #A5A1AC; color: $gray-300;
} }
.difficulty-normal-icon { .difficulty-normal-icon {
width: 36px; width: 36px;
height: 16px; height: 16px;
color: #A5A1AC; color: $gray-300;
} }
.difficulty-medium-icon { .difficulty-medium-icon {
width: 36px; width: 36px;
height: 32px; height: 32px;
color: #A5A1AC; color: $gray-300;
} }
.difficulty-hard-icon { .difficulty-hard-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
color: #A5A1AC; color: $gray-300;
} }
.option { .option {
margin-bottom: 12px; margin-bottom: 12px;
margin-top: 12px; margin-top: 12px;
position: relative; position: relative;
label {
margin-bottom: 8px;
}
}
.difficulty-options .option-item-selected .svg-icon {
color: $white !important;
} }
.option-item { .option-item {
@@ -292,12 +369,6 @@
margin-right: 0px; margin-right: 0px;
} }
&-selected {
.svg-icon, .option-item-label {
color: inherit !important;
}
}
&-box { &-box {
width: 64px; width: 64px;
height: 64px; height: 64px;
@@ -307,23 +378,38 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.habit-control.task-habit-disabled-control-habit {
color: $white !important;
border: none;
background: $gray-300;
}
} }
&-label { &-label {
color: $gray-50; color: $gray-50;
text-align: center; text-align: center;
transition-property: none;
}
}
.habit-control {
.option-item-box {
background: $white;
border: 2px solid $gray-600;
.habit-control { background: $gray-300; }
.svg-icon { color: $white; }
}
&-enabled {
.option-item-box {
border: 2px solid transparent;
transition-property: none;
.habit-control { background: $white !important; }
}
} }
} }
.category-wrap { .category-wrap {
cursor: pointer; cursor: pointer;
margin-top: 0px; margin-top: 0px;
width: 100%;
} }
.category-box { .category-box {
@@ -342,20 +428,12 @@
position: relative; position: relative;
.tags-inline { .tags-inline {
align-items: center;
display: flex;
justify-content: flex-start;
label {
margin: 0;
}
.category-wrap { .category-wrap {
cursor: inherit; cursor: inherit;
position: relative; position: relative;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
margin-left: 4em; display: inline-block;
&.active { &.active {
border-color: $purple-500; border-color: $purple-500;
@@ -381,7 +459,7 @@
} }
.tags-more { .tags-more {
color: #a5a1ac; color: $gray-300;
flex: 0 1 auto; flex: 0 1 auto;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
@@ -411,17 +489,20 @@
.tags-popup { .tags-popup {
position: absolute; position: absolute;
top: 3.5em; top: 100%;
left: 6.2em;
} }
} }
.streak-dropdown {
margin-left: .5em;
}
.checklist-group { .checklist-group {
border-top: 1px solid $gray-500; border-top: 1px solid $gray-500;
.input-group-append {
background: inherit;
}
.checklist-item {
padding-left: 12px;
}
} }
// From: https://codepen.io/zachariab/pen/wkrbc // From: https://codepen.io/zachariab/pen/wkrbc
@@ -438,9 +519,8 @@
margin-top: .5em; margin-top: .5em;
margin-right: .3em; margin-right: .3em;
font-size: 12px; font-size: 12px;
font-family: sans-serif;
letter-spacing: 2px; letter-spacing: 2px;
color: #cccccc; color: $gray-300;
text-shadow: 1px 0 1px black; text-shadow: 1px 0 1px black;
} }
@@ -478,6 +558,11 @@
} }
} }
.reward-delete {
margin-top: 32px;
margin-bottom: 8px;
}
.delete-task-btn, .cancel-task-btn { .delete-task-btn, .cancel-task-btn {
cursor: pointer; cursor: pointer;
@@ -486,25 +571,22 @@
} }
} }
.delete-task-btn {
color: $red-50;
.svg-icon {
width: 14px;
height: 16px;
margin-right: 8.5px;
}
}
.task-modal-footer { .task-modal-footer {
margin: 0 auto; padding: 16px 24px;
padding-bottom: 24px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 50px;
width: 100%; width: 100%;
span {
display: block;
margin: 0 auto;
width: 50px;
}
.delete-task-btn {
color: $red-50;
}
.cancel-task-btn { .cancel-task-btn {
margin-right: 16px;
color: $blue-10; color: $blue-10;
} }
} }
@@ -513,6 +595,34 @@
margin-left: 0px; margin-left: 0px;
width: 57px; width: 57px;
} }
.advanced-settings {
background: $gray-700;
margin-left: -23px;
margin-right: -23px;
padding: 16px 24px;
&-body {
margin-top: 17px;
}
h3 {
color: $gray-10;
margin-bottom: 0px;
}
.attributes .custom-control {
margin-right: 40px;
}
.toggle-open {
transform: rotate(180deg);
}
.attr-description {
border-bottom: 1px dashed;
}
}
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@@ -525,8 +635,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.gold { .gold {
width: 24px; width: 24px;
margin-left: 5em; margin: 0 7px;
margin-top: -2.4em;
} }
</style> </style>
@@ -547,8 +656,11 @@ import difficultyHardIcon from 'assets/svg/difficulty-hard.svg';
import difficultyNormalIcon from 'assets/svg/difficulty-normal.svg'; import difficultyNormalIcon from 'assets/svg/difficulty-normal.svg';
import positiveIcon from 'assets/svg/positive.svg'; import positiveIcon from 'assets/svg/positive.svg';
import negativeIcon from 'assets/svg/negative.svg'; import negativeIcon from 'assets/svg/negative.svg';
import streakIcon from 'assets/svg/streak.svg';
import deleteIcon from 'assets/svg/delete.svg'; import deleteIcon from 'assets/svg/delete.svg';
import goldIcon from 'assets/svg/gold.svg'; import goldIcon from 'assets/svg/gold.svg';
import downIcon from 'assets/svg/down.svg';
import calendarIcon from 'assets/svg/calendar.svg';
export default { export default {
components: { components: {
@@ -575,12 +687,22 @@ export default {
positive: positiveIcon, positive: positiveIcon,
destroy: deleteIcon, destroy: deleteIcon,
gold: goldIcon, gold: goldIcon,
down: downIcon,
streak: streakIcon,
calendar: calendarIcon,
}), }),
requiresApproval: false, // We can't set task.group fields so we use this field to toggle requiresApproval: false, // We can't set task.group fields so we use this field to toggle
members: [], members: [],
memberNamesById: {}, memberNamesById: {},
assignedMembers: [], assignedMembers: [],
checklist: [], checklist: [],
showAdvancedOptions: false,
attributesStrings: {
str: 'strength',
int: 'intelligence',
con: 'constitution',
per: 'perception',
},
}; };
}, },
watch: { watch: {
@@ -615,6 +737,7 @@ export default {
...mapState({ ...mapState({
user: 'user.data', user: 'user.data',
dayMapping: 'constants.DAY_MAPPING', dayMapping: 'constants.DAY_MAPPING',
ATTRIBUTES: 'constants.ATTRIBUTES',
}), }),
groupAccessRequiredAndOnPersonalPage () { groupAccessRequiredAndOnPersonalPage () {
if (!this.groupId && this.task.group && this.task.group.id) return true; if (!this.groupId && this.task.group && this.task.group.id) return true;
@@ -643,12 +766,6 @@ export default {
const type = this.$t(this.task.type); const type = this.$t(this.task.type);
return this.$t(this.purpose === 'edit' ? 'editATask' : 'createTask', {type}); return this.$t(this.purpose === 'edit' ? 'editATask' : 'createTask', {type});
}, },
cssClass () {
return this.getTaskClasses(this.task, this.purpose === 'edit' ? 'editModal' : 'createModal');
},
controlClass () {
return this.getTaskClasses(this.task, this.purpose === 'edit' ? 'control' : 'controlCreate');
},
isUserTask () { isUserTask () {
return !this.challengeId && !this.groupId; return !this.challengeId && !this.groupId;
}, },
@@ -707,6 +824,9 @@ export default {
}, },
methods: { methods: {
...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}), ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
cssClass (suffix) {
return this.getTaskClasses(this.task, `${this.purpose === 'edit' ? 'edit' : 'create'}-modal-${suffix}`);
},
closeTagsPopup () { closeTagsPopup () {
this.showTagsSelect = false; this.showTagsSelect = false;
}, },
@@ -732,13 +852,6 @@ export default {
sorting.splice(data.newIndex, 0, movingItem); sorting.splice(data.newIndex, 0, movingItem);
this.task.checklist = sorting; this.task.checklist = sorting;
}, },
optionClass (activeCondition) {
if (activeCondition) {
return [`${this.cssClass}-color`, 'option-item-selected'];
} else {
return [];
}
},
addChecklistItem (e) { addChecklistItem (e) {
let checkListItem = { let checkListItem = {
id: uuid.v4(), id: uuid.v4(),

18
website/client/components/tasks/user.vue
View File

@@ -18,7 +18,7 @@
:class="{active: selectedTags.length > 0}", :class="{active: selectedTags.length > 0}",
) )
.svg-icon.filter-icon.mr-2(v-html="icons.filter") .svg-icon.filter-icon.mr-2(v-html="icons.filter")
span(v-once) {{ $t('filter') }} span(v-once) {{ $t('tags') }}
.filter-panel(v-if="isFilterPanelOpen", v-on:mouseleave="checkMouseOver") .filter-panel(v-if="isFilterPanelOpen", v-on:mouseleave="checkMouseOver")
.tags-category.d-flex( .tags-category.d-flex(
v-for="tagsType in tagsByType", v-for="tagsType in tagsByType",
@@ -34,20 +34,19 @@
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]") .col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
.inline-edit-input-group.tag-edit-item.input-group .inline-edit-input-group.tag-edit-item.input-group
input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name") input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
span.input-group-btn(@click="removeTag(tagIndex, tagsType.key)") .input-group-append(@click="removeTag(tagIndex, tagsType.key)")
.svg-icon.destroy-icon(v-html="icons.destroy") .svg-icon.destroy-icon(v-html="icons.destroy")
.col-6(v-if="tagsType.key === 'tags'") .col-6(v-if="tagsType.key === 'tags'")
input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event, tagsType.key)", v-model="newTag") input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event, tagsType.key)", v-model="newTag")
template(v-else) template(v-else)
.col-6(v-for="(tag, tagIndex) in tagsType.tags") .col-6(v-for="(tag, tagIndex) in tagsType.tags")
label.custom-control.custom-checkbox .custom-control.custom-checkbox
input.custom-control-input( input.custom-control-input(
type="checkbox", type="checkbox",
:checked="isTagSelected(tag)", :checked="isTagSelected(tag)",
@change="toggleTag(tag)", @change="toggleTag(tag)", :id="`tag-${tag.id}`"
) )
span.custom-control-indicator label.custom-control-label(v-markdown='tag.name', :for="`tag-${tag.id}`")
span.custom-control-description(v-markdown='tag.name')
.filter-panel-footer.clearfix .filter-panel-footer.clearfix
template(v-if="editingTags === true") template(v-if="editingTags === true")
@@ -228,7 +227,7 @@
.tag-edit-input { .tag-edit-input {
border-bottom: 1px solid $gray-500 !important; border-bottom: 1px solid $gray-500 !important;
&:focus, &:focus ~ .input-group-btn { &:focus, &:focus ~ .input-group-append {
border-color: $purple-500 !important; border-color: $purple-500 !important;
} }
} }
@@ -244,7 +243,8 @@
} }
.tag-edit-item { .tag-edit-item {
.input-group-btn { .input-group-append {
background: $white;
border-bottom: 1px solid $gray-500 !important; border-bottom: 1px solid $gray-500 !important;
&:focus { &:focus {
@@ -261,7 +261,7 @@
} }
} }
.custom-control-description { .custom-control-label {
margin-left: 10px; margin-left: 10px;
} }

101
website/client/store/getters/tasks.js
View File

@@ -9,21 +9,25 @@ export function getTagsFor (store) {
}; };
} }
function getTaskColorByValue (value) { function getTaskColor (task) {
if (task.type === 'reward') return 'purple';
const value = task.value;
if (value < -20) { if (value < -20) {
return 'task-worst'; return 'worst';
} else if (value < -10) { } else if (value < -10) {
return 'task-worse'; return 'worse';
} else if (value < -1) { } else if (value < -1) {
return 'task-bad'; return 'bad';
} else if (value < 1) { } else if (value < 1) {
return 'task-neutral'; return 'neutral';
} else if (value < 5) { } else if (value < 5) {
return 'task-good'; return 'good';
} else if (value < 10) { } else if (value < 10) {
return 'task-better'; return 'better';
} else { } else {
return 'task-best'; return 'best';
} }
} }
@@ -38,43 +42,70 @@ export function canDelete () {
export function getTaskClasses (store) { export function getTaskClasses (store) {
const userPreferences = store.state.user.data.preferences; const userPreferences = store.state.user.data.preferences;
// Purpose is one of 'controls', 'editModal', 'createModal', 'content' // Purpose can be one of the following strings:
// Edit Modal: edit-modal-bg, edit-modal-text, edit-modal-icon
// Create Modal: create-modal-bg, create-modal-text, create-modal-icon
// Control: 'control'
return (task, purpose, dueDate) => { return (task, purpose, dueDate) => {
if (!dueDate) dueDate = new Date(); if (!dueDate) dueDate = new Date();
const type = task.type; const type = task.type;
const color = getTaskColor(task);
switch (purpose) { switch (purpose) {
case 'createModal': case 'edit-modal-bg':
return 'task-purple'; return `task-${color}-modal-bg`;
case 'editModal': case 'edit-modal-text':
return type === 'reward' ? 'task-purple' : getTaskColorByValue(task.value); return `task-${color}-modal-text`;
case 'controlCreate': case 'edit-modal-icon':
return { return `task-${color}-modal-icon`;
up: task.up ? 'task-purple' : 'task-habit-disabled', case 'edit-modal-option-disabled':
down: task.down ? 'task-purple' : 'task-habit-disabled', return `task-${color}-modal-option-disabled`;
}; case 'edit-modal-habit-control-disabled':
return `task-${color}-modal-habit-control-disabled`;
case 'create-modal-bg':
return 'task-purple-modal-bg';
case 'create-modal-text':
return 'task-purple-modal-text';
case 'create-modal-icon':
return 'task-purple-modal-icon';
case 'create-modal-option-disabled':
return 'task-purple-modal-option-disabled';
case 'create-modal-habit-control-disabled':
return 'task-purple-modal-habit-control-disabled';
case 'control': case 'control':
switch (type) { if (type === 'todo' || type === 'daily') {
case 'daily': if (task.completed || !shouldDo(dueDate, task, userPreferences) && type === 'daily') {
if (task.completed || !shouldDo(dueDate, task, userPreferences)) return 'task-daily-todo-disabled';
return getTaskColorByValue(task.value);
case 'todo':
if (task.completed) return 'task-daily-todo-disabled';
return getTaskColorByValue(task.value);
case 'habit':
return { return {
up: task.up ? getTaskColorByValue(task.value) : 'task-habit-disabled', bg: 'task-disabled-daily-todo-control-bg',
down: task.down ? getTaskColorByValue(task.value) : 'task-habit-disabled', checkbox: 'task-disabled-daily-todo-control-checkbox',
inner: 'task-disabled-daily-todo-control-inner',
content: 'task-disabled-daily-todo-control-content',
}; };
case 'reward': }
return 'task-reward';
} return {
break; bg: `task-${color}-control-bg`,
case 'content': checkbox: `task-${color}-control-checkbox`,
if (type === 'daily' && (task.completed || !shouldDo(dueDate, task, userPreferences)) || type === 'todo' && task.completed) { inner: `task-${color}-control-inner-daily-todo`,
return 'task-daily-todo-content-disabled'; };
} else if (type === 'reward') {
return {
bg: 'task-reward-control-bg',
};
} else if (type === 'habit') {
return {
up: task.up ?
{ bg: `task-${color}-control-bg`, inner: `task-${color}-control-inner-habit`} :
{ bg: 'task-disabled-habit-control-bg', inner: 'task-disabled-habit-control-inner' },
down: task.down ?
{ bg: `task-${color}-control-bg`, inner: `task-${color}-control-inner-habit`} :
{ bg: 'task-disabled-habit-control-bg', inner: 'task-disabled-habit-control-inner' },
};
} }
break; break;
default:
return 'not a valid class';
} }
}; };
} }

2
website/common/locales/en/character.json
View File

@@ -102,7 +102,7 @@
"stats": "Stats", "stats": "Stats",
"achievs": "Achievements", "achievs": "Achievements",
"strength": "Strength", "strength": "Strength",
"strengthText": "Strength increases the chance of random \"critical hits\" and the Gold, Experience, and drop chance boost from them. It also helps deal damage to boss monsters.", "strText": "Strength increases the chance of random \"critical hits\" and the Gold, Experience, and drop chance boost from them. It also helps deal damage to boss monsters.",
"constitution": "Constitution", "constitution": "Constitution",
"conText": "Constitution reduces the damage you take from negative Habits and missed Dailies.", "conText": "Constitution reduces the damage you take from negative Habits and missed Dailies.",
"perception": "Perception", "perception": "Perception",

2
website/common/locales/en/generic.json
View File

@@ -37,7 +37,7 @@
"expandToolbar": "Expand Toolbar", "expandToolbar": "Expand Toolbar",
"collapseToolbar": "Collapse Toolbar", "collapseToolbar": "Collapse Toolbar",
"markdownBlurb": "Habitica uses markdown for message formatting. See the <a href='http://habitica.wikia.com/wiki/Markdown_Cheat_Sheet' target='_blank'>Markdown Cheat Sheet</a> for more info.", "markdownHelpLink": "Markdown formatting help",
"showFormattingHelp": "Show formatting help", "showFormattingHelp": "Show formatting help",
"hideFormattingHelp": "Hide formatting help", "hideFormattingHelp": "Hide formatting help",
"youType": "You type:", "youType": "You type:",

1
website/common/locales/en/groups.json
View File

@@ -237,6 +237,7 @@
"onlyCreatorOrAdminCanDeleteChat": "Not authorized to delete this message!", "onlyCreatorOrAdminCanDeleteChat": "Not authorized to delete this message!",
"onlyGroupLeaderCanEditTasks": "Not authorized to manage tasks!", "onlyGroupLeaderCanEditTasks": "Not authorized to manage tasks!",
"onlyGroupTasksCanBeAssigned": "Only group tasks can be assigned", "onlyGroupTasksCanBeAssigned": "Only group tasks can be assigned",
"assignedTo": "Assigned To",
"assignedToUser": "Assigned to <%= userName %>", "assignedToUser": "Assigned to <%= userName %>",
"assignedToMembers": "Assigned to <%= userCount %> members", "assignedToMembers": "Assigned to <%= userCount %> members",
"assignedToYouAndMembers": "Assigned to you and <%= userCount %> members", "assignedToYouAndMembers": "Assigned to you and <%= userCount %> members",

13
website/common/locales/en/tasks.json
View File

@@ -31,19 +31,20 @@
"extraNotes": "Extra Notes", "extraNotes": "Extra Notes",
"notes": "Notes", "notes": "Notes",
"direction/Actions": "Direction/Actions", "direction/Actions": "Direction/Actions",
"advancedOptions": "Advanced Options", "advancedSettings": "Advanced Settings",
"taskAlias": "Task Alias", "taskAlias": "Task Alias",
"taskAliasPopover": "This task alias can be used when integrating with 3rd party integrations. Only dashes, underscores, and alphanumeric characters are supported. The task alias must be unique among all your tasks.", "taskAliasPopover": "This task alias can be used when integrating with 3rd party integrations. Only dashes, underscores, and alphanumeric characters are supported. The task alias must be unique among all your tasks.",
"taskAliasPlaceholder": "your-task-alias-here", "taskAliasPlaceholder": "your-task-alias-here",
"taskAliasPopoverWarning": "WARNING: Changing this value will break any 3rd party integrations that rely on the task alias.", "taskAliasPopoverWarning": "WARNING: Changing this value will break any 3rd party integrations that rely on the task alias.",
"difficulty": "Difficulty", "difficulty": "Difficulty",
"difficultyHelpTitle": "How difficult is this task?", "difficultyHelp": "Difficulty describes how challenging a Habit, Daily, or To-Do is for you to complete. A higher difficulty results in greater rewards when a Task is completed, but also greater damage when a Daily is missed or a negative Habit is clicked.",
"difficultyHelpContent": "The harder a task, the more Experience and Gold it awards you when you check it off... but the more it damages you if it is a Daily or Bad Habit!",
"trivial": "Trivial", "trivial": "Trivial",
"easy": "Easy", "easy": "Easy",
"medium": "Medium", "medium": "Medium",
"hard": "Hard", "hard": "Hard",
"attributes": "Attributes", "attributes": "Attributes",
"attributeAllocation": "Attribute Allocation",
"attributeAllocationHelp": "Attribute allocation is an option that provides methods for Habitica to automatically assign an earned attribute point to an attribute immediately upon level-up. <br/><br/> You can adjust how Attribute Allocation is handled from the Stats section of your profile.",
"progress": "Progress", "progress": "Progress",
"daily": "Daily", "daily": "Daily",
"dailies": "Dailies", "dailies": "Dailies",
@@ -54,6 +55,7 @@
"repeat": "Repeat", "repeat": "Repeat",
"repeats": "Repeats", "repeats": "Repeats",
"repeatEvery": "Repeat Every", "repeatEvery": "Repeat Every",
"repeatOn": "Repeat On",
"repeatHelpTitle": "How often should this task be repeated?", "repeatHelpTitle": "How often should this task be repeated?",
"dailyRepeatHelpContent": "This task will be due every X days. You can set that value below.", "dailyRepeatHelpContent": "This task will be due every X days. You can set that value below.",
"weeklyRepeatHelpContent": "This task will be due on the highlighted days below. Click on a day to activate/deactivate it.", "weeklyRepeatHelpContent": "This task will be due on the highlighted days below. Click on a day to activate/deactivate it.",
@@ -61,7 +63,7 @@
"repeatWeek": "On Certain Days of the Week", "repeatWeek": "On Certain Days of the Week",
"day": "Day", "day": "Day",
"days": "Days", "days": "Days",
"restoreStreak": "Restore Streak", "restoreStreak": "Adjust Streak",
"resetStreak": "Reset Streak", "resetStreak": "Reset Streak",
"todo": "To-Do", "todo": "To-Do",
"todos": "To-Dos", "todos": "To-Dos",
@@ -115,6 +117,7 @@
"fortifyText": "Fortify will return all your tasks, except challenge tasks, to a neutral (yellow) state, as if you'd just added them, and top your Health off to full. This is great if all your red tasks are making the game too hard, or all your blue tasks are making the game too easy. If starting fresh sounds much more motivating, spend the Gems and catch a reprieve!", "fortifyText": "Fortify will return all your tasks, except challenge tasks, to a neutral (yellow) state, as if you'd just added them, and top your Health off to full. This is great if all your red tasks are making the game too hard, or all your blue tasks are making the game too easy. If starting fresh sounds much more motivating, spend the Gems and catch a reprieve!",
"confirmFortify": "Are you sure?", "confirmFortify": "Are you sure?",
"fortifyComplete": "Fortify complete!", "fortifyComplete": "Fortify complete!",
"deleteTask": "Delete this Task",
"sureDelete": "Are you sure you want to delete this task?", "sureDelete": "Are you sure you want to delete this task?",
"sureDeleteCompletedTodos": "Are you sure you want to delete your completed todos?", "sureDeleteCompletedTodos": "Are you sure you want to delete your completed todos?",
"streakCoins": "Streak Bonus!", "streakCoins": "Streak Bonus!",
@@ -168,7 +171,7 @@
"taskRequiresApproval": "This task must be approved before you can complete it. Approval has already been requested", "taskRequiresApproval": "This task must be approved before you can complete it. Approval has already been requested",
"taskApprovalHasBeenRequested": "Approval has been requested", "taskApprovalHasBeenRequested": "Approval has been requested",
"approvals": "Approvals", "approvals": "Approvals",
"approvalRequired": "Approval Required", "approvalRequired": "Needs Approval",
"repeatZero": "Daily is never due", "repeatZero": "Daily is never due",
"repeatType": "Repeat Type", "repeatType": "Repeat Type",
"repeatTypeHelpTitle": "What kind of repeat is this?", "repeatTypeHelpTitle": "What kind of repeat is this?",