From 6a109adbc5dd34fc750e75eccffb23550f75507e Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Mon, 8 Jan 2018 18:43:57 +0100 Subject: [PATCH] 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 --- package-lock.json | 95 +++- package.json | 12 +- website/client/assets/scss/dropdown.scss | 20 + website/client/assets/scss/form.scss | 134 ++++- website/client/assets/scss/icon.scss | 8 + website/client/assets/scss/task.scss | 403 +++++++++------ .../components/challenges/challengeModal.vue | 8 +- .../client/components/challenges/sidebar.vue | 21 +- website/client/components/creatorIntro.vue | 49 +- .../group-plans/taskInformation.vue | 18 +- website/client/components/groups/group.vue | 8 - .../components/groups/groupFormModal.vue | 31 +- website/client/components/groups/sidebar.vue | 21 +- website/client/components/groups/tavern.vue | 8 - .../components/inventory/equipment/index.vue | 7 +- .../components/inventory/items/index.vue | 7 +- .../components/inventory/stable/index.vue | 16 +- .../components/settings/subscription.vue | 2 +- .../client/components/shops/market/index.vue | 7 +- .../client/components/shops/quests/index.vue | 7 +- .../components/shops/seasonal/index.vue | 7 +- .../components/shops/timeTravelers/index.vue | 7 +- website/client/components/tasks/column.vue | 11 +- website/client/components/tasks/tagsPopup.vue | 11 +- website/client/components/tasks/task.vue | 32 +- website/client/components/tasks/taskModal.vue | 489 +++++++++++------- website/client/components/tasks/user.vue | 18 +- website/client/store/getters/tasks.js | 101 ++-- website/common/locales/en/character.json | 2 +- website/common/locales/en/generic.json | 2 +- website/common/locales/en/groups.json | 1 + website/common/locales/en/tasks.json | 13 +- 32 files changed, 967 insertions(+), 609 deletions(-) diff --git a/package-lock.json b/package-lock.json index a39aad6d31..f3ea708c4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 6d99129950..c04cd0ba65 100644 --- a/package.json +++ b/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", diff --git a/website/client/assets/scss/dropdown.scss b/website/client/assets/scss/dropdown.scss index 1d630a8412..aed164eaf6 100644 --- a/website/client/assets/scss/dropdown.scss +++ b/website/client/assets/scss/dropdown.scss @@ -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; + } +} \ No newline at end of file diff --git a/website/client/assets/scss/form.scss b/website/client/assets/scss/form.scss index 9b023495e8..27d13af033 100644 --- a/website/client/assets/scss/form.scss +++ b/website/client/assets/scss/form.scss @@ -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; } } diff --git a/website/client/assets/scss/icon.scss b/website/client/assets/scss/icon.scss index dba6a0e3d3..0295f59daa 100644 --- a/website/client/assets/scss/icon.scss +++ b/website/client/assets/scss/icon.scss @@ -31,3 +31,11 @@ .inline { display: inline-block; } + +.toggle-up, .toggle-down { + cursor: pointer; + + .svg-icon { + width: 20px; + } +} diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss index 408b15b15b..68a42fc372 100644 --- a/website/client/assets/scss/task.scss +++ b/website/client/assets/scss/task.scss @@ -1,213 +1,284 @@ -.daily-todo-control { - - &:hover { - .svg-icon.check { - display: block; - } - } - - .svg-icon.check { - display: none; - - &.display-check-icon { - display: block; - } - } -} - .task { - // for editing rewards or when a task is created - &-purple { - background: $purple-300; - - &-color { - color: $purple-300; + &-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; } } - &-control-habit { - background: $purple-300; - } - - &-modal-input { - color: $header-color !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; } + } } } - &-worst { - background: $maroon-100; - - &-color { - color: darken($maroon-100, 12%); + &-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; } } - &-control-habit { - background: darken($maroon-100, 12%); - } - - &-control-daily-todo { - background: $maroon-500; - color: $maroon-100; - } - - &-modal-input { - color: $maroon-500 !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; } + } } } - &-worse { - background: $red-100; + &-bad { // orange + &-control { + &-bg { + background: $orange-100 !important; - &-color { - color: darken($red-100, 12%); + &:hover { + .habit-control { background: #b75a1c !important; } + .daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; } + } + } + &-inner-habit { background: rgba(183, 90, 28, 0.4) !important; } + &-inner-daily-todo { background: $orange-500 !important; } + &-checkbox { color: $orange-100 !important; } } - &-control-habit { - background: darken($red-100, 12%); - } + &-modal { + &-bg { + background: $orange-100 !important; - &-control-daily-todo { - background: $red-500; - color: $red-100; - } + .form-control { + background: rgba(183, 90, 28, 0.4) !important; - &-modal-input { - color: $red-500 !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; } + } } } - &-bad { - background: $orange-100; - - &-color { - color: darken($orange-100, 12%); + &-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; } + } + } + &-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: darken($orange-100, 12%); - } + &-modal { + &-bg { + background: $yellow-100 !important; - &-control-daily-todo { - background: $orange-500; - color: $orange-100; - } + .form-control { + background: rgba(183, 90, 28, 0.4) !important; - &-modal-input { - color: $orange-500 !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; } + } } } - &-neutral { - background: $yellow-100; - - &-color { - color: darken($yellow-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($yellow-100, 12%); - } - - &-control-daily-todo { - background: $yellow-500; - color: $yellow-100; - } - - &-modal-input { - color: $yellow-500 !important; + &-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; } + } + &-habit-control-disabled:hover { + .habit-control { background: $green-10 !important; } + .option-item-label { color: #1ca372 !important; } + } } } - &-good { - background: $green-10; - - &-color { - color: darken($green-10, 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($green-10, 12%); - } - - &-control-daily-todo { - background: $green-500; - color: $green-10; - } - - &-modal-input { - color: $green-500 !important; + &-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; } + } + &-habit-control-disabled:hover { + .habit-control { background: $teal-50 !important; } + .option-item-label { color: $teal-10 !important; } + } } } - &-better { - background: $teal-50; - - &-color { - color: darken($teal-50, 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($teal-50, 12%); - } - - &-control-daily-todo { - background: $teal-500; - color: $teal-50; - } - - &-modal-input { - color: $teal-500 !important; + &-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; } + } + &-habit-control-disabled:hover { + .habit-control { background: $blue-50 !important; } + .option-item-label { color: $blue-10 !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; + &-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; } + } + &-habit-control-disabled:hover { + .habit-control { background: $purple-300 !important; } + .option-item-label { color: $purple-200 !important; } + } } } &-reward { - background: #FFF5E5 - } + &-control { + &-bg { + background: rgba(255, 217, 160, 0.32) !important; + .small-text { color: $yellow-10 !important; } - &-daily-todo-disabled { - background: $gray-500; - - &-control-daily-todo { - background: $gray-400; - color: $gray-200; + &:hover { background: rgba(255, 217, 160, 0.48) !important; } + } } } - &-daily-todo-content-disabled { - background: $gray-600; - - .task-title, .task-notes { - color: $gray-300 !important; + &-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); + } + } } - } - &-habit-disabled { - background: $gray-700; - color: rgba(0, 0, 0, 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; - &-control-habit { - color: rgba(0, 0, 0, 0.12) !important; - border: 1px solid rgba(0, 0, 0, 0.12); + .task-title, .task-notes { + color: $gray-300 !important; + } + } + } } } } @@ -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; + } + } +} diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue index c82b4bf22b..48fbd555d1 100644 --- a/website/client/components/challenges/challengeModal.vue +++ b/website/client/components/challenges/challengeModal.vue @@ -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 diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue index 9c7110c1ce..1e580b0f7a 100644 --- a/website/client/components/challenges/sidebar.vue +++ b/website/client/components/challenges/sidebar.vue @@ -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) }}