mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-14 21:27:23 +01:00
Task Modal Improvements (#9560)
* 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
GitHub
95
package-lock.json
generated
95
package-lock.json
generated
@@ -1657,9 +1657,9 @@
|
||||
}
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "4.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
|
||||
"integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w=="
|
||||
"version": "4.0.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.3.tgz",
|
||||
"integrity": "sha512-/Qe1Q2d1muLEZRX2iCteMQHZBBAm6ZIjJ9FcBYK/xLr05+HvDtBOVBN+Cz7mCNZuy0zr+y5artZHM05W7mIz6g=="
|
||||
},
|
||||
"bootstrap-vue": {
|
||||
"version": "1.2.0",
|
||||
@@ -1668,7 +1668,7 @@
|
||||
"requires": {
|
||||
"lodash.startcase": "4.4.0",
|
||||
"opencollective": "1.0.3",
|
||||
"popper.js": "1.12.9",
|
||||
"popper.js": "1.13.0",
|
||||
"vue-functional-data-merge": "1.0.7"
|
||||
}
|
||||
},
|
||||
@@ -11580,40 +11580,53 @@
|
||||
"version": "git://github.com/habitrpg/moment-recur.git#f147ef27bbc26ca67638385f3db4a44084c76626"
|
||||
},
|
||||
"mongodb": {
|
||||
"version": "2.2.24",
|
||||
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.24.tgz",
|
||||
"integrity": "sha1-gPQNbsW97A3ezw+c4BROeUxGRJo=",
|
||||
"version": "2.2.33",
|
||||
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.33.tgz",
|
||||
"integrity": "sha1-tTfEcdNKZlG0jzb9vyl1A0Dgi1A=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es6-promise": "3.2.1",
|
||||
"mongodb-core": "2.1.8",
|
||||
"readable-stream": "2.1.5"
|
||||
"mongodb-core": "2.1.17",
|
||||
"readable-stream": "2.2.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"es6-promise": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
|
||||
"integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q="
|
||||
"integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q=",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
|
||||
"integrity": "sha1-ZvqLcg4UOLNkaB8q0aY8YYRIydA=",
|
||||
"version": "2.2.7",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.7.tgz",
|
||||
"integrity": "sha1-BwV6y+JGeyIELTb5jFrVBwVOlbE=",
|
||||
"dev": true,
|
||||
"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",
|
||||
"string_decoder": "1.0.3",
|
||||
"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": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.8.tgz",
|
||||
"integrity": "sha1-sz4DcNClnZe2yx7GEFJ76elcosA=",
|
||||
"version": "2.1.17",
|
||||
"resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.17.tgz",
|
||||
"integrity": "sha1-pBizN6FKFJkPtRC5I97mqBMXPfg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bson": "1.0.4",
|
||||
"require_optional": "1.0.1"
|
||||
@@ -11646,10 +11659,48 @@
|
||||
"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": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
|
||||
"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": {
|
||||
"debug": "2.6.9",
|
||||
"gitbook-plugin-github": "2.0.0",
|
||||
"mongodb": "2.2.24"
|
||||
"mongodb": "2.2.33"
|
||||
}
|
||||
},
|
||||
"morgan": {
|
||||
@@ -13881,9 +13932,9 @@
|
||||
"integrity": "sha1-xi/0xMUdLJGUlLdhpvSZP01/5Wk="
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.12.9",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
|
||||
"integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM="
|
||||
"version": "1.13.0",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.13.0.tgz",
|
||||
"integrity": "sha1-4ef/ZcxD98+c8W8VEKdegfhPRWU="
|
||||
},
|
||||
"postcss": {
|
||||
"version": "5.2.18",
|
||||
@@ -18505,7 +18556,7 @@
|
||||
}
|
||||
},
|
||||
"vuejs-datepicker": {
|
||||
"version": "git://github.com/habitrpg/vuejs-datepicker.git#825a866b6a9c52dd8c588a3e8b900880875ce914"
|
||||
"version": "git://github.com/habitrpg/vuejs-datepicker.git#af96f357a746463dc0461ddf5c2c13b7a4e1f484"
|
||||
},
|
||||
"w3counter": {
|
||||
"version": "3.0.1",
|
||||
|
||||
12
package.json
12
package.json
@@ -31,7 +31,7 @@
|
||||
"bcrypt": "^1.0.2",
|
||||
"bluebird": "^3.3.5",
|
||||
"body-parser": "^1.15.0",
|
||||
"bootstrap": "4.0.0-beta.2",
|
||||
"bootstrap": "^4.0.0-beta.3",
|
||||
"bootstrap-vue": "^1.0.2",
|
||||
"browserify": "~12.0.1",
|
||||
"compression": "^1.6.1",
|
||||
@@ -72,7 +72,7 @@
|
||||
"merge-stream": "^1.0.0",
|
||||
"method-override": "^2.3.5",
|
||||
"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-id-autoinc": "~2013.7.14-4",
|
||||
"morgan": "^1.7.0",
|
||||
@@ -89,12 +89,12 @@
|
||||
"passport-google-oauth20": "1.0.0",
|
||||
"paypal-ipn": "3.0.0",
|
||||
"paypal-rest-sdk": "^1.2.1",
|
||||
"popper.js": "^1.11.0",
|
||||
"popper.js": "^1.13.0",
|
||||
"postcss-easy-import": "^2.0.0",
|
||||
"pretty-data": "^0.40.0",
|
||||
"ps-tree": "^1.0.0",
|
||||
"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",
|
||||
"request": "~2.74.0",
|
||||
"rimraf": "^2.4.3",
|
||||
@@ -123,7 +123,7 @@
|
||||
"vue-style-loader": "^3.0.0",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"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-merge": "^4.0.0",
|
||||
"winston": "^2.1.0",
|
||||
@@ -197,7 +197,7 @@
|
||||
"lcov-result-merger": "^1.0.2",
|
||||
"lolex": "^1.4.0",
|
||||
"mocha": "^3.2.0",
|
||||
"mongodb": "^2.0.46",
|
||||
"mongodb": "^2.2.33",
|
||||
"mongoskin": "~2.1.0",
|
||||
"monk": "^4.0.0",
|
||||
"nightwatch": "^0.9.12",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
border-top: 6px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@@ -69,3 +70,22 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,20 @@
|
||||
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
|
||||
|
||||
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
|
||||
$bg-focused-active-control: #4f2993;
|
||||
$bg-disabled-control: #34303a;
|
||||
|
||||
.custom-control {
|
||||
&-description {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&-label {
|
||||
padding-top: 3px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
& .custom-control-indicator {
|
||||
.custom-control-label::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-size: 75% 75%;
|
||||
@@ -72,48 +142,50 @@ $bg-disabled-control: #34303a;
|
||||
border: 2px solid $gray-200;
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
|
||||
& .custom-control-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-indicator {
|
||||
.custom-control-label::before {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked~.custom-control-indicator {
|
||||
background-image: url(~client/assets/svg/for-css/checkbox-white.svg);
|
||||
&:checked~.custom-control-label::before {
|
||||
background-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;
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
|
||||
&: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);
|
||||
border-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);
|
||||
}
|
||||
|
||||
&:disabled:checked~.custom-control-indicator {
|
||||
&:disabled:checked~.custom-control-label::before {
|
||||
border-color: $gray-400;
|
||||
background-color: $gray-400;
|
||||
}
|
||||
|
||||
&:disabled:not(:checked)~.custom-control-indicator {
|
||||
&:disabled:not(:checked)~.custom-control-label::before {
|
||||
border-color: $gray-400;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -121,7 +193,7 @@ $bg-disabled-control: #34303a;
|
||||
}
|
||||
|
||||
.inline-edit-input-group {
|
||||
.input-group-btn {
|
||||
.input-group-append, .input-group-prepend {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
@@ -146,45 +218,57 @@ $bg-disabled-control: #34303a;
|
||||
}
|
||||
|
||||
.custom-radio .custom-control-input {
|
||||
&:checked~.custom-control-indicator {
|
||||
&:checked~.custom-control-label::after {
|
||||
@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-size: 12px 12px;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:active~.custom-control-indicator {
|
||||
&:active~.custom-control-label::before {
|
||||
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);
|
||||
}
|
||||
|
||||
&: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);
|
||||
border-color: $purple-400;
|
||||
background-color: rgba($bg-focused-active-control, 0.1);
|
||||
}
|
||||
|
||||
&:disabled:checked~.custom-control-indicator {
|
||||
&:disabled:checked~.custom-control-label::before {
|
||||
border-color: $gray-400;
|
||||
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;
|
||||
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);
|
||||
border-color: $gray-300;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,3 +31,11 @@
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toggle-up, .toggle-down {
|
||||
cursor: pointer;
|
||||
|
||||
.svg-icon {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,213 +1,284 @@
|
||||
.daily-todo-control {
|
||||
.task {
|
||||
&-worst { // dark red
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $maroon-100 !important;
|
||||
&: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: $maroon-500 !important; }
|
||||
&-checkbox { color: $maroon-100 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $maroon-100 !important; }
|
||||
&-icon { color: $maroon-100 !important; }
|
||||
&-text { color: $maroon-50 !important; }
|
||||
&-option-disabled:hover {
|
||||
.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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-worse { // light red
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $red-100 !important;
|
||||
&: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; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $red-100 !important; }
|
||||
&-icon { color: $red-100 !important; }
|
||||
&-text { color: $red-10 !important; }
|
||||
&-option-disabled:hover {
|
||||
.svg-icon { color: $red-100 !important; }
|
||||
.option-item-label { color: $red-10 !important; }
|
||||
}
|
||||
&-habit-control-disabled:hover {
|
||||
.habit-control { background: $red-100 !important; }
|
||||
.option-item-label { color: $red-10 !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bad { // orange
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $orange-100 !important;
|
||||
|
||||
&:hover {
|
||||
.svg-icon.check {
|
||||
display: block;
|
||||
.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; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg {
|
||||
background: $orange-100 !important;
|
||||
|
||||
.form-control {
|
||||
background: rgba(183, 90, 28, 0.4) !important;
|
||||
|
||||
&:focus, &:active, &:hover {
|
||||
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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon.check {
|
||||
display: none;
|
||||
|
||||
&.display-check-icon {
|
||||
display: block;
|
||||
&-neutral { // yellow
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $yellow-100 !important;
|
||||
&:hover {
|
||||
.habit-control { background: #bf7d1a !important; }
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task {
|
||||
// for editing rewards or when a task is created
|
||||
&-purple {
|
||||
background: $purple-300;
|
||||
|
||||
&-color {
|
||||
color: $purple-300;
|
||||
&-inner-habit { background: rgba(183, 90, 28, 0.32) !important; }
|
||||
&-inner-daily-todo { background: $yellow-500 !important; }
|
||||
&-checkbox { color: $yellow-100 !important; }
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: $purple-300;
|
||||
}
|
||||
&-modal {
|
||||
&-bg {
|
||||
background: $yellow-100 !important;
|
||||
|
||||
&-modal-input {
|
||||
color: $header-color !important;
|
||||
.form-control {
|
||||
background: rgba(183, 90, 28, 0.4) !important;
|
||||
|
||||
&:focus, &:active, &:hover {
|
||||
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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-worst {
|
||||
background: $maroon-100;
|
||||
|
||||
&-color {
|
||||
color: darken($maroon-100, 12%);
|
||||
&-good { // green
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $green-10 !important;
|
||||
&: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 {
|
||||
background: darken($maroon-100, 12%);
|
||||
&-modal {
|
||||
&-bg { background: $green-10 !important; }
|
||||
&-icon { color: $green-10 !important; }
|
||||
&-text { color: #1ca372 !important; }
|
||||
&-option-disabled:hover {
|
||||
.svg-icon { color: $green-10 !important; }
|
||||
.option-item-label { color: #1ca372 !important; }
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $maroon-500;
|
||||
color: $maroon-100;
|
||||
&-habit-control-disabled:hover {
|
||||
.habit-control { background: $green-10 !important; }
|
||||
.option-item-label { color: #1ca372 !important; }
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $maroon-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-worse {
|
||||
background: $red-100;
|
||||
|
||||
&-color {
|
||||
color: darken($red-100, 12%);
|
||||
&-better { // teal
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $teal-50 !important;
|
||||
&: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 {
|
||||
background: darken($red-100, 12%);
|
||||
&-modal {
|
||||
&-bg { background: $teal-50 !important; }
|
||||
&-icon { color: $teal-50 !important; }
|
||||
&-text { color: $teal-10 !important; }
|
||||
&-option-disabled:hover {
|
||||
.svg-icon { color: $teal-50 !important; }
|
||||
.option-item-label { color: $teal-10 !important; }
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $red-500;
|
||||
color: $red-100;
|
||||
&-habit-control-disabled:hover {
|
||||
.habit-control { background: $teal-50 !important; }
|
||||
.option-item-label { color: $teal-10 !important; }
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $red-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-bad {
|
||||
background: $orange-100;
|
||||
|
||||
&-color {
|
||||
color: darken($orange-100, 12%);
|
||||
&-best { // blue
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $blue-100 !important;
|
||||
&: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 {
|
||||
background: darken($orange-100, 12%);
|
||||
&-modal {
|
||||
&-bg { background: $blue-100 !important; }
|
||||
&-icon { color: $blue-100 !important; }
|
||||
&-text { color: $blue-10 !important; }
|
||||
&-option-disabled:hover {
|
||||
.svg-icon { color: $blue-50 !important; }
|
||||
.option-item-label { color: $blue-10 !important; }
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $orange-500;
|
||||
color: $orange-100;
|
||||
&-habit-control-disabled:hover {
|
||||
.habit-control { background: $blue-50 !important; }
|
||||
.option-item-label { color: $blue-10 !important; }
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $orange-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-neutral {
|
||||
background: $yellow-100;
|
||||
|
||||
&-color {
|
||||
color: darken($yellow-100, 12%);
|
||||
&-purple { // purple, only used in modals
|
||||
&-modal {
|
||||
&-bg { background: $purple-300 !important; }
|
||||
&-icon { color: $purple-300 !important; }
|
||||
&-text { color: $purple-200 !important; }
|
||||
&-option-disabled:hover {
|
||||
.svg-icon { color: $purple-300 !important; }
|
||||
.option-item-label { color: $purple-200 !important; }
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($yellow-100, 12%);
|
||||
&-habit-control-disabled:hover {
|
||||
.habit-control { background: $purple-300 !important; }
|
||||
.option-item-label { color: $purple-200 !important; }
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $yellow-500;
|
||||
color: $yellow-100;
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $yellow-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-good {
|
||||
background: $green-10;
|
||||
|
||||
&-color {
|
||||
color: darken($green-10, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($green-10, 12%);
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $green-500;
|
||||
color: $green-10;
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $green-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-better {
|
||||
background: $teal-50;
|
||||
|
||||
&-color {
|
||||
color: darken($teal-50, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($teal-50, 12%);
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $teal-500;
|
||||
color: $teal-50;
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $teal-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-best {
|
||||
background: $blue-50;
|
||||
|
||||
&-color {
|
||||
color: darken($blue-50, 12%);
|
||||
}
|
||||
|
||||
&-control-habit {
|
||||
background: darken($blue-50, 12%);
|
||||
}
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $blue-500;
|
||||
color: $blue-50;
|
||||
}
|
||||
|
||||
&-modal-input {
|
||||
color: $blue-500 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-reward {
|
||||
background: #FFF5E5
|
||||
&-control {
|
||||
&-bg {
|
||||
background: rgba(255, 217, 160, 0.32) !important;
|
||||
.small-text { color: $yellow-10 !important; }
|
||||
|
||||
&:hover { background: rgba(255, 217, 160, 0.48) !important; }
|
||||
}
|
||||
|
||||
&-daily-todo-disabled {
|
||||
background: $gray-500;
|
||||
|
||||
&-control-daily-todo {
|
||||
background: $gray-400;
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
&-daily-todo-content-disabled {
|
||||
&-disabled {
|
||||
&-habit {
|
||||
&-control {
|
||||
&-bg { background: $gray-600; }
|
||||
&-inner {
|
||||
color: rgba(26, 24, 29, 0.12) !important;
|
||||
border: 1px solid rgba(26, 24, 29, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-daily-todo {
|
||||
&-control {
|
||||
&-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;
|
||||
|
||||
.task-title, .task-notes {
|
||||
color: $gray-300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-habit-disabled {
|
||||
background: $gray-700;
|
||||
color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
&-control-habit {
|
||||
color: rgba(0, 0, 0, 0.12) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -235,3 +306,19 @@
|
||||
margin-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.daily-todo-control {
|
||||
&:hover {
|
||||
.svg-icon.check {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon.check {
|
||||
display: none;
|
||||
|
||||
&.display-check-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,12 +36,12 @@
|
||||
:key="group.key",
|
||||
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',
|
||||
:value="group.key",
|
||||
:id="group.key",
|
||||
v-model="workingChallenge.categories")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
|
||||
// @TODO: Implement in V2 .form-group
|
||||
label
|
||||
|
||||
@@ -10,30 +10,27 @@
|
||||
v-for="group in categoryOptions",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group(v-if='$route.name !== "findChallenges"')
|
||||
h3 Membership
|
||||
.form-check(
|
||||
v-for="group in roleOptions",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group
|
||||
h3 Ownership
|
||||
.form-check(
|
||||
v-for="group in ownershipOptions",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -292,41 +292,34 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
|
||||
.section.row
|
||||
.col-6
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='work', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('work') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#work(type="checkbox", value='work', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="work") {{ $t('work') }}
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='exercise', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('exercise') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#excercise(type="checkbox", value='exercise', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="excercise") {{ $t('exercise') }}
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='health_wellness', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('health_wellness') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#health_wellness(type="checkbox", value='health_wellness', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="health_wellness") {{ $t('health_wellness') }}
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='school', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('school') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#school(type="checkbox", value='school', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="school") {{ $t('school') }}
|
||||
.col-6
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='chores', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('chores') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#chores(type="checkbox", value='chores', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="chores") {{ $t('chores') }}
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='creativity', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('creativity') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#creativity(type="checkbox", value='creativity', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="creativity") {{ $t('creativity') }}
|
||||
.task-option
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", value='self_care', v-model='taskCategories')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('self_care') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#self_care(type="checkbox", value='self_care', v-model='taskCategories')
|
||||
label.custom-control-label(v-once, for="self_care") {{ $t('self_care') }}
|
||||
|
||||
.section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing')
|
||||
.col-12
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.row.tasks-navigation
|
||||
.col-4
|
||||
h1 Group's Tasks
|
||||
// @TODO: Abstract to component?
|
||||
// @TODO: Abstract to component!
|
||||
.col-4
|
||||
.input-group
|
||||
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")
|
||||
.inline-edit-input-group.tag-edit-item.input-group
|
||||
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")
|
||||
.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")
|
||||
template(v-else)
|
||||
.col-6(v-for="(tag, tagIndex) in tagsType.tags")
|
||||
label.custom-control.custom-checkbox
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
:checked="isTagSelected(tag)",
|
||||
@change="toggleTag(tag)",
|
||||
:id="`tag-${tagIndex}`",
|
||||
)
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ tag.name }}
|
||||
label.custom-control-label(:for="`tag-${tagIndex}`") {{ tag.name }}
|
||||
|
||||
.filter-panel-footer.clearfix
|
||||
template(v-if="editingTags === true")
|
||||
@@ -44,7 +44,7 @@
|
||||
.float-right
|
||||
a.mr-3.btn-filters-primary(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
|
||||
a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
|
||||
span.input-group-btn
|
||||
span.input-group-append
|
||||
button.btn.btn-secondary.filter-button(
|
||||
type="button",
|
||||
@click="toggleFilterPanel()",
|
||||
@@ -173,7 +173,7 @@
|
||||
.tag-edit-input {
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus, &:focus ~ .input-group-btn {
|
||||
&:focus, &:focus ~ .input-group-append {
|
||||
border-color: $purple-500 !important;
|
||||
}
|
||||
}
|
||||
@@ -188,7 +188,7 @@
|
||||
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;
|
||||
|
||||
&:focus {
|
||||
@@ -196,7 +196,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-description {
|
||||
.custom-control-label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -247,10 +247,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-up .svg-icon, .toggle-down .svg-icon {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
span.action {
|
||||
font-size: 14px;
|
||||
line-height: 1.33;
|
||||
@@ -286,10 +282,6 @@
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.toggle-up, .toggle-down {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hr {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
||||
@@ -13,10 +13,9 @@
|
||||
label
|
||||
strong(v-once) {{$t('privacySettings')}} *
|
||||
br
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input#onlyLeaderCreatesChallenges(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges")
|
||||
label.custom-control-label(v-once, for="onlyLeaderCreatesChallenges") {{ $t('onlyLeaderCreatesChallenges') }}
|
||||
#groupPrivateDescription1.icon(:title="$t('privateDescription')")
|
||||
.svg-icon(v-html='icons.information')
|
||||
b-tooltip(
|
||||
@@ -25,18 +24,16 @@
|
||||
)
|
||||
|
||||
// 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")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
|
||||
label.custom-control-label(v-once) {{ $t('guildLeaderCantBeMessaged') }}
|
||||
// "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
|
||||
// @TODO discuss the impact of this with moderators before implementing
|
||||
|
||||
br
|
||||
label.custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
|
||||
input.custom-control-input(type="checkbox", v-model="workingGroup.privateGuild")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('privateGuild') }}
|
||||
.custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
|
||||
input.custom-control-input#privateGuild(type="checkbox", v-model="workingGroup.privateGuild")
|
||||
label.custom-control-label(v-once, for="privateGuild") {{ $t('privateGuild') }}
|
||||
#groupPrivateDescription2.icon(:title="$t('privateDescription')")
|
||||
.svg-icon(v-html='icons.information')
|
||||
b-tooltip(
|
||||
@@ -45,10 +42,9 @@
|
||||
)
|
||||
|
||||
// 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")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
|
||||
label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
|
||||
// "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
|
||||
|
||||
.form-group(v-if='!isParty')
|
||||
@@ -80,10 +76,9 @@
|
||||
:key="group.key",
|
||||
v-if='group.key !== "habitica_official" || user.contributor.admin'
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="group.key", v-model="workingGroup.categories")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(:id="group.key", type="checkbox", :value="group.key", v-model="workingGroup.categories")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
|
||||
// @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party
|
||||
|
||||
|
||||
@@ -11,30 +11,27 @@
|
||||
v-for="group in categoryOptions",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group
|
||||
h3 Role
|
||||
.form-check(
|
||||
v-for="group in roleOptions",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
.form-group
|
||||
h3 Guild Size
|
||||
.form-check(
|
||||
v-for="group in guildSizeOptions",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.label) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -214,14 +214,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-up, .toggle-down {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.toggle-up:hover, .toggle-down:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pause-button {
|
||||
background-color: #ffb445 !important;
|
||||
color: $white;
|
||||
|
||||
@@ -12,10 +12,9 @@
|
||||
v-for="group in itemsGroups",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[group.key].selected")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ group.label }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[group.key].selected", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ group.label }}
|
||||
|
||||
.standard-page
|
||||
.clearfix
|
||||
|
||||
@@ -12,10 +12,9 @@
|
||||
v-for="group in groups",
|
||||
:key="group.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="group.selected")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ $t(group.key) }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="group.selected", :id="group.key")
|
||||
label.custom-control-label(v-once, :for="group.key") {{ $t(group.key) }}
|
||||
.standard-page
|
||||
.clearfix
|
||||
h1.float-left.mb-4.page-header(v-once) {{ $t('items') }}
|
||||
|
||||
@@ -23,28 +23,28 @@
|
||||
v-for="petGroup in petGroups",
|
||||
:key="petGroup.key"
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
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
|
||||
span.custom-control-description(v-once) {{ petGroup.label }}
|
||||
label.custom-control-label(v-once, :for="petGroup.key") {{ petGroup.label }}
|
||||
h3(v-once) {{ $t('mounts') }}
|
||||
.form-group
|
||||
.form-check(
|
||||
v-for="mountGroup in mountGroups",
|
||||
:key="mountGroup.key"
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
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
|
||||
span.custom-control-description(v-once) {{ mountGroup.label }}
|
||||
label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
|
||||
|
||||
div.form-group.clearfix
|
||||
h3.float-left Hide Missing
|
||||
|
||||
@@ -157,7 +157,7 @@ export default {
|
||||
purchasedPlanIdInfo () {
|
||||
if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
|
||||
// @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 {
|
||||
price: 0,
|
||||
months: 0,
|
||||
|
||||
@@ -10,10 +10,9 @@
|
||||
v-for="category in categories",
|
||||
:key="category.identifier",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ category.text }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
|
||||
label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
|
||||
div.form-group.clearfix
|
||||
h3.float-left(v-once) {{ $t('hideLocked') }}
|
||||
toggle-switch.float-right.no-margin(
|
||||
|
||||
@@ -11,10 +11,9 @@
|
||||
v-for="category in categories",
|
||||
:key="category.identifier",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ category.text }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
|
||||
label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
|
||||
|
||||
div.form-group.clearfix
|
||||
h3.float-left(v-once) {{ $t('hideLocked') }}
|
||||
|
||||
@@ -11,10 +11,9 @@
|
||||
v-for="category in filterCategories",
|
||||
:key="category.key",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.key].selected")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ category.value }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.key].selected", :id="`category-${category.identifier}`")
|
||||
label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.value }}
|
||||
|
||||
div.form-group.clearfix
|
||||
h3.float-left(v-once) {{ $t('hidePinned') }}
|
||||
|
||||
@@ -11,10 +11,9 @@
|
||||
v-for="category in categories",
|
||||
:key="category.identifier",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ category.text }}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
|
||||
label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
|
||||
|
||||
div.form-group.clearfix
|
||||
h3.float-left(v-once) {{ $t('hidePinned') }}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
.svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
|
||||
h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(types[type].label)})}}
|
||||
.small-text {{$t(`${type}sDesc`)}}
|
||||
draggable(
|
||||
draggable.sortable-tasks(
|
||||
ref="tasksList",
|
||||
@update='sorted',
|
||||
:options='{disabled: activeFilters[type].label === "scheduled"}',
|
||||
@@ -81,6 +81,7 @@
|
||||
.reward-items {
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-column-gap: 16px;
|
||||
grid-row-gap: 4px;
|
||||
grid-template-columns: repeat(auto-fill, 94px);
|
||||
@@ -108,12 +109,11 @@
|
||||
border-radius: 2px;
|
||||
background-color: rgba($black, 0.06);
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 3px;
|
||||
padding: 12px 16px;
|
||||
border-color: transparent;
|
||||
transition: background 0.15s ease-in;
|
||||
resize: none;
|
||||
margin-bottom: 0px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($black, 0.1);
|
||||
@@ -124,6 +124,7 @@
|
||||
background: $white;
|
||||
border-color: $purple-500;
|
||||
color: $gray-50;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
@@ -558,7 +559,7 @@ export default {
|
||||
|
||||
const tasksWrapperHeight = tasksWrapperEl.offsetHeight;
|
||||
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;
|
||||
|
||||
|
||||
@@ -6,10 +6,9 @@
|
||||
.tags-list.container
|
||||
.row
|
||||
.col-4(v-for="tag in tags")
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(:title='tag.name') {{tag.name}}
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags", :id="`tag-${tag.id}`")
|
||||
label.custom-control-label(:title="tag.name", :for="`tag-${tag.id}`") {{tag.name}}
|
||||
.tags-footer
|
||||
span.clear-tags(@click="clearTags()") {{$t("clearTags")}}
|
||||
span.close-tags(@click="close()") {{$t("close")}}
|
||||
@@ -53,7 +52,7 @@
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
.custom-control-description {
|
||||
.custom-control-label {
|
||||
color: $gray-50 !important;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
@@ -70,7 +69,7 @@
|
||||
justify-content: center;
|
||||
|
||||
.close-tags {
|
||||
color: $red-50;
|
||||
color: $blue-10;
|
||||
margin: 1.1em 0;
|
||||
margin-left: 2em;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
approval-header(:task='task', v-if='this.task.group.id', :group='group')
|
||||
.d-flex(:class="{'task-not-scoreable': isUser !== true}")
|
||||
// Habits left side control
|
||||
.left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
|
||||
.task-control.habit-control(:class="controlClass.up + '-control-habit'", @click="(isUser && controlClass.up !== 'task-habit-disabled') ? score('up') : null")
|
||||
.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.inner", @click="(isUser && task.up) ? score('up') : null")
|
||||
.svg-icon.positive(v-html="icons.positive")
|
||||
// Dailies and todos left side control
|
||||
.left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
|
||||
.task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
|
||||
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed}")
|
||||
.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.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
|
||||
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
|
||||
// Task title, description and icons
|
||||
.task-content(:class="contentClass")
|
||||
.task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}")
|
||||
@@ -55,7 +55,7 @@
|
||||
)
|
||||
.svg-icon(v-html="icons.checklist")
|
||||
span {{ checklistProgress }}
|
||||
label.custom-control.custom-checkbox.checklist-item(
|
||||
.custom-control.custom-checkbox.checklist-item(
|
||||
v-if='!task.collapseChecklist',
|
||||
v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
|
||||
)
|
||||
@@ -64,9 +64,9 @@
|
||||
:checked="item.completed",
|
||||
@change="toggleChecklistItem(item)",
|
||||
:disabled="castingSpell",
|
||||
:id="`checklist-${item.id}`"
|
||||
)
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-markdown='item.text')
|
||||
label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}`")
|
||||
.icons.small-text.d-flex.align-items-center
|
||||
.d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
|
||||
.svg-icon.calendar(v-html="icons.calendar")
|
||||
@@ -97,11 +97,11 @@
|
||||
.tag-label(v-for="tag in getTagsFor(task)") {{tag}}
|
||||
|
||||
// Habits right side control
|
||||
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
|
||||
.task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="(isUser && controlClass.down !== 'task-habit-disabled') ? score('down') : null")
|
||||
.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.inner", @click="(isUser && task.down) ? score('down') : null")
|
||||
.svg-icon.negative(v-html="icons.negative")
|
||||
// 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")
|
||||
.small-text {{task.value}}
|
||||
approval-footer(:task='task', v-if='this.task.group.id', :group='group')
|
||||
@@ -162,7 +162,7 @@
|
||||
.dropdown-icon {
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
margin-right: 0px;
|
||||
color: $gray-100 !important;
|
||||
}
|
||||
|
||||
@@ -286,11 +286,11 @@
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.custom-control-indicator {
|
||||
.custom-control-label::before {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.custom-control-description {
|
||||
.custom-control-label {
|
||||
margin-left: 6px;
|
||||
padding-top: 0px;
|
||||
min-width: 0px;
|
||||
@@ -435,6 +435,7 @@
|
||||
.daily-todo-control {
|
||||
margin-top: 16px;
|
||||
border-radius: 2px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.reward-control {
|
||||
@@ -449,7 +450,6 @@
|
||||
|
||||
.small-text {
|
||||
margin-top: 4px;
|
||||
color: $yellow-10;
|
||||
font-style: initial;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -590,7 +590,7 @@ export default {
|
||||
const type = this.task.type;
|
||||
|
||||
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') {
|
||||
classes.push('no-right-border');
|
||||
|
||||
@@ -1,29 +1,37 @@
|
||||
<template lang="pug">
|
||||
form(v-if="task", @submit.stop.prevent="submit()")
|
||||
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
|
||||
h1.float-left {{ title }}
|
||||
.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') }}
|
||||
.form-group
|
||||
label(v-once) {{ `${$t('text')}*` }}
|
||||
input.form-control.title-input(
|
||||
type="text", :class="[`${cssClass}-modal-input`]",
|
||||
type="text",
|
||||
required, v-model="task.text",
|
||||
autofocus, spellcheck="true",
|
||||
:disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
|
||||
)
|
||||
.form-group
|
||||
label(v-once) {{ $t('notes') }}
|
||||
textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3")
|
||||
label.d-flex.align-items-center.justify-content-between(v-once)
|
||||
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
|
||||
.option(v-if="task.type === 'reward'")
|
||||
.option.mt-0(v-if="task.type === 'reward'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('cost') }}
|
||||
input(type="number", v-model="task.value", required, placeholder="1.0", step="0.01", min="0")
|
||||
.input-group
|
||||
.input-group-prepend.input-group-icon
|
||||
.svg-icon.gold(v-html="icons.gold")
|
||||
.option(v-if="checklistEnabled")
|
||||
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') }}
|
||||
br
|
||||
draggable(
|
||||
@@ -34,67 +42,68 @@
|
||||
.inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
|
||||
span.grippy
|
||||
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")
|
||||
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'")
|
||||
.option-item(:class="optionClass(task.up === true)", @click="toggleUpDirection()")
|
||||
.option-item-box
|
||||
.task-control.habit-control(:class="controlClass.up + '-control-habit'")
|
||||
.svg-icon.positive(v-html="icons.positive")
|
||||
.option-item-label(v-once) {{ $t('positive') }}
|
||||
.option-item(:class="optionClass(task.down === true)", @click="toggleDownDirection()")
|
||||
.option-item-box
|
||||
.task-control.habit-control(:class="controlClass.down + '-control-habit'")
|
||||
.svg-icon.negative(v-html="icons.negative")
|
||||
.option-item-label(v-once) {{ $t('negative') }}
|
||||
.option-item.habit-control(@click="toggleUpDirection()", :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
|
||||
.option-item-box(:class="task.up ? cssClass('bg') : ''")
|
||||
.task-control.habit-control
|
||||
.svg-icon.positive(v-html="icons.positive", :class="task.up ? cssClass('icon') : ''")
|
||||
.option-item-label(:class="task.up ? cssClass('text') : ''") {{ $t('positive') }}
|
||||
.option-item.habit-control(@click="toggleDownDirection()", :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
|
||||
.option-item-box(:class="task.down ? cssClass('bg') : ''")
|
||||
.task-control.habit-control
|
||||
.svg-icon.negative(v-html="icons.negative", :class="task.down ? cssClass('icon') : ''")
|
||||
.option-item-label(:class="task.down ? cssClass('text') : ''") {{ $t('negative') }}
|
||||
template(v-if="task.type !== 'reward'")
|
||||
label(v-once)
|
||||
span.float-left {{ $t('difficulty') }}
|
||||
// @TODO .svg-icon.info-icon(v-html="icons.information")
|
||||
.d-flex.justify-content-center
|
||||
.option-item(:class="optionClass(task.priority === 0.1)", @click="setDifficulty(0.1)")
|
||||
.option-item-box
|
||||
.svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop="$t('difficultyHelp')")
|
||||
.d-flex.justify-content-center.difficulty-options
|
||||
.option-item(:class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(0.1)")
|
||||
.option-item-box(:class="task.priority === 0.1 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
|
||||
.option-item-label(v-once) {{ $t('trivial') }}
|
||||
.option-item(:class="optionClass(task.priority === 1)", @click="setDifficulty(1)")
|
||||
.option-item-box
|
||||
.option-item-label(:class="task.priority === 0.1 ? cssClass('text') : ''") {{ $t('trivial') }}
|
||||
.option-item(:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1)")
|
||||
.option-item-box(:class="task.priority === 1 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
|
||||
.option-item-label(v-once) {{ $t('easy') }}
|
||||
.option-item(:class="optionClass(task.priority === 1.5)", @click="setDifficulty(1.5)")
|
||||
.option-item-box
|
||||
.option-item-label(:class="task.priority === 1 ? cssClass('text') : ''") {{ $t('easy') }}
|
||||
.option-item(:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1.5)")
|
||||
.option-item-box(:class="task.priority === 1.5 ? cssClass('bg') : ''")
|
||||
.svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
|
||||
.option-item-label(v-once) {{ $t('medium') }}
|
||||
.option-item(:class="optionClass(task.priority === 2)", @click="setDifficulty(2)")
|
||||
.option-item-box
|
||||
.option-item-label(:class="task.priority === 1.5 ? cssClass('text') : ''") {{ $t('medium') }}
|
||||
.option-item(:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(2)")
|
||||
.option-item-box(:class="task.priority === 2 ? cssClass('bg') : ''")
|
||||
.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'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('dueDate') }}
|
||||
datepicker.d-inline-block(
|
||||
datepicker(
|
||||
v-model="task.date",
|
||||
:calendarIcon="icons.calendar",
|
||||
:clearButton='true',
|
||||
clearButtonIcon='category-select',
|
||||
:clearButtonText='$t("clear")',
|
||||
:todayButton='!challengeAccessRequired',
|
||||
todayButtonIcon='category-select',
|
||||
:todayButtonText='$t("today")',
|
||||
:disabled-picker='challengeAccessRequired'
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
label(v-once) {{ $t('startDate') }}
|
||||
datepicker.d-inline-block(
|
||||
v-model="task.startDate",
|
||||
:clearButton='false',
|
||||
:todayButton='!challengeAccessRequired',
|
||||
todayButtonIcon='category-select',
|
||||
:todayButtonText='$t("today")',
|
||||
:disabled-picker='challengeAccessRequired'
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('startDate') }}
|
||||
datepicker(
|
||||
v-model="task.startDate",
|
||||
:calendarIcon="icons.calendar",
|
||||
:clearButton="false",
|
||||
:todayButton="!challengeAccessRequired",
|
||||
:todayButtonText="$t('today')",
|
||||
:disabled-picker="challengeAccessRequired"
|
||||
)
|
||||
.option(v-if="task.type === 'daily'")
|
||||
.form-group
|
||||
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']",
|
||||
:key="frequency", @click="task.frequency = frequency",
|
||||
:disabled='challengeAccessRequired',
|
||||
@@ -102,31 +111,33 @@
|
||||
| {{ $t(frequency) }}
|
||||
.form-group
|
||||
label(v-once) {{ $t('repeatEvery') }}
|
||||
input(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
|
||||
| {{ repeatSuffix }}
|
||||
br
|
||||
.input-group
|
||||
input.form-control(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
|
||||
.input-group-append.input-group-text {{ repeatSuffix }}
|
||||
template(v-if="task.frequency === 'weekly'")
|
||||
.form-check-inline.weekday-check(
|
||||
.form-group
|
||||
label.d-block(v-once) {{ $t('repeatOn') }}
|
||||
.form-check-inline.weekday-check.mr-0(
|
||||
v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
|
||||
:key="dayNumber",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }}
|
||||
.custom-control.custom-checkbox.custom-control-inline
|
||||
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'")
|
||||
label.custom-control.custom-radio
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ $t('dayOfMonth') }}
|
||||
label.custom-control.custom-radio
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek")
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description {{ $t('dayOfWeek') }}
|
||||
label.d-block(v-once) {{ $t('repeatOn') }}
|
||||
.form-radion-inline.mr-0
|
||||
.custom-control.custom-radio.custom-control-inline
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth", id="repeat-dayOfMonth")
|
||||
label.custom-control-label(for="repeat-dayOfMonth") {{ $t('dayOfMonth') }}
|
||||
.custom-control.custom-radio.custom-control-inline
|
||||
input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek")
|
||||
label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
|
||||
|
||||
.tags-select.option(v-if="isUserTask")
|
||||
.tags-inline
|
||||
label(v-once) {{ $t('tags') }}
|
||||
.tags-inline.form-group.row
|
||||
label.col-12(v-once) {{ $t('tags') }}
|
||||
.col-12
|
||||
.category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
|
||||
span.category-select(v-if='task.tags && task.tags.length === 0')
|
||||
.tags-none {{$t('none')}}
|
||||
@@ -138,18 +149,16 @@
|
||||
tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
|
||||
|
||||
.option(v-if="task.type === 'habit'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('resetStreak') }}
|
||||
b-dropdown.streak-dropdown(:text="$t(task.frequency)")
|
||||
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(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
|
||||
.form-group
|
||||
label(v-once) {{ $t('restoreStreak') }}
|
||||
input(type="number", v-model="task.streak", min="0", required, :disabled='challengeAccessRequired')
|
||||
|
||||
.option.group-options(v-if='groupId')
|
||||
label(v-once) Assigned To
|
||||
.form-group.row
|
||||
label.col-12(v-once) {{ $t('assignedTo') }}
|
||||
.col-12
|
||||
.category-wrap(@click="showAssignedSelect = !showAssignedSelect")
|
||||
span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
|
||||
span.category-select(v-else)
|
||||
@@ -161,23 +170,79 @@
|
||||
v-for="member in members",
|
||||
:key="member._id",
|
||||
)
|
||||
label.custom-control.custom-checkbox
|
||||
input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)')
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-once) {{ member.profile.name }}
|
||||
.custom-control.custom-checkbox
|
||||
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
|
||||
button.btn.btn-primary(@click="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
|
||||
|
||||
.option.group-options(v-if='groupId')
|
||||
label(v-once) Needs Approval
|
||||
toggle-switch(:label='""',
|
||||
.form-group
|
||||
label(v-once) {{ $t('approvalRequired') }}
|
||||
toggle-switch.d-inline-block(
|
||||
label="",
|
||||
:checked="requiresApproval",
|
||||
@change="updateRequiresApproval")
|
||||
@change="updateRequiresApproval"
|
||||
)
|
||||
|
||||
.task-modal-footer(slot="modal-footer")
|
||||
span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }}
|
||||
span.delete-task-btn(v-once, v-if='canDelete', @click="destroy()") {{ $t('delete') }}
|
||||
.reward-delete.delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="task.type === 'reward' && purpose !== 'create'")
|
||||
.svg-icon.d-inline-b(v-html="icons.destroy")
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -194,13 +259,17 @@
|
||||
|
||||
input, textarea {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.16);
|
||||
opacity: 0.64;
|
||||
color: $white !important;
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
color: rgba($white, 0.64) !important;
|
||||
transition-property: border-color, box-shadow, color, background;
|
||||
|
||||
&:focus {
|
||||
&:focus, &:active {
|
||||
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 {
|
||||
background: $white;
|
||||
border: 1px solid $gray-500;
|
||||
border: 1px solid $gray-400;
|
||||
color: $gray-200 !important;
|
||||
|
||||
&:focus {
|
||||
@@ -257,31 +326,39 @@
|
||||
.difficulty-trivial-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.difficulty-normal-icon {
|
||||
width: 36px;
|
||||
height: 16px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.difficulty-medium-icon {
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.difficulty-hard-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #A5A1AC;
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.difficulty-options .option-item-selected .svg-icon {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
@@ -292,12 +369,6 @@
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
.svg-icon, .option-item-label {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
@@ -307,23 +378,38 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.habit-control.task-habit-disabled-control-habit {
|
||||
color: $white !important;
|
||||
border: none;
|
||||
background: $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: $gray-50;
|
||||
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 {
|
||||
cursor: pointer;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
@@ -342,20 +428,12 @@
|
||||
position: relative;
|
||||
|
||||
.tags-inline {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.category-wrap {
|
||||
cursor: inherit;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
margin-left: 4em;
|
||||
display: inline-block;
|
||||
|
||||
&.active {
|
||||
border-color: $purple-500;
|
||||
@@ -381,7 +459,7 @@
|
||||
}
|
||||
|
||||
.tags-more {
|
||||
color: #a5a1ac;
|
||||
color: $gray-300;
|
||||
flex: 0 1 auto;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
@@ -411,17 +489,20 @@
|
||||
|
||||
.tags-popup {
|
||||
position: absolute;
|
||||
top: 3.5em;
|
||||
left: 6.2em;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.streak-dropdown {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.checklist-group {
|
||||
border-top: 1px solid $gray-500;
|
||||
|
||||
.input-group-append {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// From: https://codepen.io/zachariab/pen/wkrbc
|
||||
@@ -438,9 +519,8 @@
|
||||
margin-top: .5em;
|
||||
margin-right: .3em;
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 2px;
|
||||
color: #cccccc;
|
||||
color: $gray-300;
|
||||
text-shadow: 1px 0 1px black;
|
||||
}
|
||||
|
||||
@@ -478,6 +558,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.reward-delete {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.delete-task-btn, .cancel-task-btn {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -486,25 +571,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.task-modal-footer {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 24px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.delete-task-btn {
|
||||
color: $red-50;
|
||||
|
||||
.svg-icon {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
margin-right: 8.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-modal-footer {
|
||||
padding: 16px 24px;
|
||||
width: 100%;
|
||||
|
||||
.cancel-task-btn {
|
||||
margin-right: 16px;
|
||||
color: $blue-10;
|
||||
}
|
||||
}
|
||||
@@ -513,6 +595,34 @@
|
||||
margin-left: 0px;
|
||||
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) {
|
||||
@@ -525,8 +635,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.gold {
|
||||
width: 24px;
|
||||
margin-left: 5em;
|
||||
margin-top: -2.4em;
|
||||
margin: 0 7px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -547,8 +656,11 @@ import difficultyHardIcon from 'assets/svg/difficulty-hard.svg';
|
||||
import difficultyNormalIcon from 'assets/svg/difficulty-normal.svg';
|
||||
import positiveIcon from 'assets/svg/positive.svg';
|
||||
import negativeIcon from 'assets/svg/negative.svg';
|
||||
import streakIcon from 'assets/svg/streak.svg';
|
||||
import deleteIcon from 'assets/svg/delete.svg';
|
||||
import goldIcon from 'assets/svg/gold.svg';
|
||||
import downIcon from 'assets/svg/down.svg';
|
||||
import calendarIcon from 'assets/svg/calendar.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -575,12 +687,22 @@ export default {
|
||||
positive: positiveIcon,
|
||||
destroy: deleteIcon,
|
||||
gold: goldIcon,
|
||||
down: downIcon,
|
||||
streak: streakIcon,
|
||||
calendar: calendarIcon,
|
||||
}),
|
||||
requiresApproval: false, // We can't set task.group fields so we use this field to toggle
|
||||
members: [],
|
||||
memberNamesById: {},
|
||||
assignedMembers: [],
|
||||
checklist: [],
|
||||
showAdvancedOptions: false,
|
||||
attributesStrings: {
|
||||
str: 'strength',
|
||||
int: 'intelligence',
|
||||
con: 'constitution',
|
||||
per: 'perception',
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -615,6 +737,7 @@ export default {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
dayMapping: 'constants.DAY_MAPPING',
|
||||
ATTRIBUTES: 'constants.ATTRIBUTES',
|
||||
}),
|
||||
groupAccessRequiredAndOnPersonalPage () {
|
||||
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);
|
||||
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 () {
|
||||
return !this.challengeId && !this.groupId;
|
||||
},
|
||||
@@ -707,6 +824,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...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 () {
|
||||
this.showTagsSelect = false;
|
||||
},
|
||||
@@ -732,13 +852,6 @@ export default {
|
||||
sorting.splice(data.newIndex, 0, movingItem);
|
||||
this.task.checklist = sorting;
|
||||
},
|
||||
optionClass (activeCondition) {
|
||||
if (activeCondition) {
|
||||
return [`${this.cssClass}-color`, 'option-item-selected'];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
addChecklistItem (e) {
|
||||
let checkListItem = {
|
||||
id: uuid.v4(),
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
:class="{active: selectedTags.length > 0}",
|
||||
)
|
||||
.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")
|
||||
.tags-category.d-flex(
|
||||
v-for="tagsType in tagsByType",
|
||||
@@ -34,20 +34,19 @@
|
||||
.col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
|
||||
.inline-edit-input-group.tag-edit-item.input-group
|
||||
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")
|
||||
.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")
|
||||
template(v-else)
|
||||
.col-6(v-for="(tag, tagIndex) in tagsType.tags")
|
||||
label.custom-control.custom-checkbox
|
||||
.custom-control.custom-checkbox
|
||||
input.custom-control-input(
|
||||
type="checkbox",
|
||||
:checked="isTagSelected(tag)",
|
||||
@change="toggleTag(tag)",
|
||||
@change="toggleTag(tag)", :id="`tag-${tag.id}`"
|
||||
)
|
||||
span.custom-control-indicator
|
||||
span.custom-control-description(v-markdown='tag.name')
|
||||
label.custom-control-label(v-markdown='tag.name', :for="`tag-${tag.id}`")
|
||||
|
||||
.filter-panel-footer.clearfix
|
||||
template(v-if="editingTags === true")
|
||||
@@ -228,7 +227,7 @@
|
||||
.tag-edit-input {
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus, &:focus ~ .input-group-btn {
|
||||
&:focus, &:focus ~ .input-group-append {
|
||||
border-color: $purple-500 !important;
|
||||
}
|
||||
}
|
||||
@@ -244,7 +243,8 @@
|
||||
}
|
||||
|
||||
.tag-edit-item {
|
||||
.input-group-btn {
|
||||
.input-group-append {
|
||||
background: $white;
|
||||
border-bottom: 1px solid $gray-500 !important;
|
||||
|
||||
&:focus {
|
||||
@@ -261,7 +261,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-description {
|
||||
.custom-control-label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
return 'task-worst';
|
||||
return 'worst';
|
||||
} else if (value < -10) {
|
||||
return 'task-worse';
|
||||
return 'worse';
|
||||
} else if (value < -1) {
|
||||
return 'task-bad';
|
||||
return 'bad';
|
||||
} else if (value < 1) {
|
||||
return 'task-neutral';
|
||||
return 'neutral';
|
||||
} else if (value < 5) {
|
||||
return 'task-good';
|
||||
return 'good';
|
||||
} else if (value < 10) {
|
||||
return 'task-better';
|
||||
return 'better';
|
||||
} else {
|
||||
return 'task-best';
|
||||
return 'best';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,43 +42,70 @@ export function canDelete () {
|
||||
export function getTaskClasses (store) {
|
||||
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) => {
|
||||
if (!dueDate) dueDate = new Date();
|
||||
const type = task.type;
|
||||
const color = getTaskColor(task);
|
||||
|
||||
switch (purpose) {
|
||||
case 'createModal':
|
||||
return 'task-purple';
|
||||
case 'editModal':
|
||||
return type === 'reward' ? 'task-purple' : getTaskColorByValue(task.value);
|
||||
case 'controlCreate':
|
||||
return {
|
||||
up: task.up ? 'task-purple' : 'task-habit-disabled',
|
||||
down: task.down ? 'task-purple' : 'task-habit-disabled',
|
||||
};
|
||||
case 'edit-modal-bg':
|
||||
return `task-${color}-modal-bg`;
|
||||
case 'edit-modal-text':
|
||||
return `task-${color}-modal-text`;
|
||||
case 'edit-modal-icon':
|
||||
return `task-${color}-modal-icon`;
|
||||
case 'edit-modal-option-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':
|
||||
switch (type) {
|
||||
case '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':
|
||||
if (type === 'todo' || type === 'daily') {
|
||||
if (task.completed || !shouldDo(dueDate, task, userPreferences) && type === 'daily') {
|
||||
return {
|
||||
up: task.up ? getTaskColorByValue(task.value) : 'task-habit-disabled',
|
||||
down: task.down ? getTaskColorByValue(task.value) : 'task-habit-disabled',
|
||||
bg: 'task-disabled-daily-todo-control-bg',
|
||||
checkbox: 'task-disabled-daily-todo-control-checkbox',
|
||||
inner: 'task-disabled-daily-todo-control-inner',
|
||||
content: 'task-disabled-daily-todo-control-content',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
bg: `task-${color}-control-bg`,
|
||||
checkbox: `task-${color}-control-checkbox`,
|
||||
inner: `task-${color}-control-inner-daily-todo`,
|
||||
};
|
||||
} 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' },
|
||||
};
|
||||
case 'reward':
|
||||
return 'task-reward';
|
||||
}
|
||||
break;
|
||||
case 'content':
|
||||
if (type === 'daily' && (task.completed || !shouldDo(dueDate, task, userPreferences)) || type === 'todo' && task.completed) {
|
||||
return 'task-daily-todo-content-disabled';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return 'not a valid class';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
"stats": "Stats",
|
||||
"achievs": "Achievements",
|
||||
"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",
|
||||
"conText": "Constitution reduces the damage you take from negative Habits and missed Dailies.",
|
||||
"perception": "Perception",
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
"expandToolbar": "Expand 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",
|
||||
"hideFormattingHelp": "Hide formatting help",
|
||||
"youType": "You type:",
|
||||
|
||||
@@ -237,6 +237,7 @@
|
||||
"onlyCreatorOrAdminCanDeleteChat": "Not authorized to delete this message!",
|
||||
"onlyGroupLeaderCanEditTasks": "Not authorized to manage tasks!",
|
||||
"onlyGroupTasksCanBeAssigned": "Only group tasks can be assigned",
|
||||
"assignedTo": "Assigned To",
|
||||
"assignedToUser": "Assigned to <%= userName %>",
|
||||
"assignedToMembers": "Assigned to <%= userCount %> members",
|
||||
"assignedToYouAndMembers": "Assigned to you and <%= userCount %> members",
|
||||
|
||||
@@ -31,19 +31,20 @@
|
||||
"extraNotes": "Extra Notes",
|
||||
"notes": "Notes",
|
||||
"direction/Actions": "Direction/Actions",
|
||||
"advancedOptions": "Advanced Options",
|
||||
"advancedSettings": "Advanced Settings",
|
||||
"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.",
|
||||
"taskAliasPlaceholder": "your-task-alias-here",
|
||||
"taskAliasPopoverWarning": "WARNING: Changing this value will break any 3rd party integrations that rely on the task alias.",
|
||||
"difficulty": "Difficulty",
|
||||
"difficultyHelpTitle": "How difficult is this task?",
|
||||
"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!",
|
||||
"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.",
|
||||
"trivial": "Trivial",
|
||||
"easy": "Easy",
|
||||
"medium": "Medium",
|
||||
"hard": "Hard",
|
||||
"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",
|
||||
"daily": "Daily",
|
||||
"dailies": "Dailies",
|
||||
@@ -54,6 +55,7 @@
|
||||
"repeat": "Repeat",
|
||||
"repeats": "Repeats",
|
||||
"repeatEvery": "Repeat Every",
|
||||
"repeatOn": "Repeat On",
|
||||
"repeatHelpTitle": "How often should this task be repeated?",
|
||||
"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.",
|
||||
@@ -61,7 +63,7 @@
|
||||
"repeatWeek": "On Certain Days of the Week",
|
||||
"day": "Day",
|
||||
"days": "Days",
|
||||
"restoreStreak": "Restore Streak",
|
||||
"restoreStreak": "Adjust Streak",
|
||||
"resetStreak": "Reset Streak",
|
||||
"todo": "To-Do",
|
||||
"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!",
|
||||
"confirmFortify": "Are you sure?",
|
||||
"fortifyComplete": "Fortify complete!",
|
||||
"deleteTask": "Delete this Task",
|
||||
"sureDelete": "Are you sure you want to delete this task?",
|
||||
"sureDeleteCompletedTodos": "Are you sure you want to delete your completed todos?",
|
||||
"streakCoins": "Streak Bonus!",
|
||||
@@ -168,7 +171,7 @@
|
||||
"taskRequiresApproval": "This task must be approved before you can complete it. Approval has already been requested",
|
||||
"taskApprovalHasBeenRequested": "Approval has been requested",
|
||||
"approvals": "Approvals",
|
||||
"approvalRequired": "Approval Required",
|
||||
"approvalRequired": "Needs Approval",
|
||||
"repeatZero": "Daily is never due",
|
||||
"repeatType": "Repeat Type",
|
||||
"repeatTypeHelpTitle": "What kind of repeat is this?",
|
||||
|
||||
Reference in New Issue
Block a user