mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-04-15 04:06:22 +00:00
Tasks Redesign: Colors, Title, Notes, Habit Controls, Button Style (#12274)
* extract color changes + habit-controls out of #12142 * extract title / notes changes from #12142 * extracted delete btn + style fixes of #12142 * fix taskModal footer + advancedSettings * extracted the button style changes from #12142 * remove un-used method
This commit is contained in:
negue
GitHub
parent
5957930709
commit
f3ea5f0b62
6 changed files with 593 additions and 357 deletions
|
|
@ -1,92 +1,193 @@
|
|||
@mixin btn-focus-hover-shadow () {
|
||||
box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12);
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-size: 16px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
border: 1px solid transparent !important;
|
||||
padding: 7.5px 15.5px;
|
||||
line-height: 1.71;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
|
||||
color: $white;
|
||||
|
||||
&:focus:not(.btn-flat) {
|
||||
outline: none;
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
|
||||
|
||||
&:disabled, &.disabled, &.btn-flat {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $purple-400;
|
||||
@include btn-focus-hover-shadow();
|
||||
}
|
||||
|
||||
&:hover:not(.btn-flat):not(.disabled):not(:disabled) {
|
||||
@include btn-focus-hover-shadow();
|
||||
border-color: transparent;
|
||||
&:active, &.active:not(.btn-flat), &:disabled, &.disabled {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active:not(.btn-flat), &.active:not(.btn-flat) {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid transparent;
|
||||
&:disabled, &.disabled {
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.btn:disabled, .btn.disabled {
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
opacity: 0.64;
|
||||
border-color: transparent;
|
||||
.btn-front {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
padding: 7.5px 15.5px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $purple-200;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:disabled {
|
||||
&:hover:not(:disabled):not(.disabled) {
|
||||
background: #5d3b9c;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $purple-200;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
|
||||
background: #5d3b9c !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary, .dropdown > .btn-secondary {
|
||||
color: $gray-50;
|
||||
background: $white !important;
|
||||
|
||||
&:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled), &:focus:not(:disabled):not(.disabled) {
|
||||
color: $purple-200 !important;
|
||||
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
|
||||
box-shadow: none;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:active, &:focus, &.active {
|
||||
border-color: $purple-500 !important;
|
||||
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
|
||||
background: $purple-200;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:disabled, &.disabled {
|
||||
background: $gray-500 !important;
|
||||
color: $gray-100 !important;
|
||||
background: $purple-200;
|
||||
border: 1px solid transparent;
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary,
|
||||
.dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
|
||||
.show > .btn-secondary.dropdown-toggle:not(.btn-success)
|
||||
{
|
||||
background: $white;
|
||||
border: 1px solid transparent;
|
||||
color: $gray-50;
|
||||
|
||||
&:focus, &:active {
|
||||
color: $gray-50;
|
||||
background: $white;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
&:active:focus,
|
||||
&.active:focus {
|
||||
color: $purple-300;
|
||||
box-shadow: none;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: $purple-300;
|
||||
|
||||
&.dropdown-toggle {
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
|
||||
background: $white;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $purple-300;
|
||||
|
||||
&.dropdown-toggle {
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
background: $white !important;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled, &.disabled {
|
||||
color: $gray-50;
|
||||
background: $white;
|
||||
border: 1px solid transparent;
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: $maroon-100;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover:not(:disabled):not(.disabled) {
|
||||
background: #e14e4e;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $maroon-100;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
|
||||
box-shadow: none;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
|
||||
background: $maroon-100;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:disabled, &.disabled {
|
||||
background: $maroon-100;
|
||||
border: 1px solid transparent;
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $green-100;
|
||||
|
||||
&:disabled {
|
||||
background: $green-100;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(.disabled), &:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
|
||||
background: $green-50;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .btn-success.dropdown-toggle {
|
||||
background: $green-50;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover:not(:disabled):not(.disabled) {
|
||||
background: #32bd8a;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $green-50;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
|
||||
box-shadow: none;
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
|
||||
background: $green-50;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&:disabled, &.disabled {
|
||||
background: $green-50;
|
||||
border: 1px solid transparent;
|
||||
cursor: default;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
|
|
@ -105,22 +206,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: $red-50;
|
||||
|
||||
&:disabled {
|
||||
background: $red-50;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not(.disabled) {
|
||||
background: $red-100;
|
||||
}
|
||||
|
||||
&:active:not(:disabled):not(.disabled), &.active:not(:disabled):not(.disabled) {
|
||||
background: $red-100;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-show-more {
|
||||
display: block;
|
||||
width: 50%;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,56 @@
|
|||
@mixin habit-controls($disabled-color, $active-color) {
|
||||
&-habit-control-disabled {
|
||||
.habit-option-button {
|
||||
border: 2px solid $disabled-color;
|
||||
}
|
||||
&:hover {
|
||||
.habit-option-button {
|
||||
border: 2px solid $active-color;
|
||||
}
|
||||
.habit-option-icon, .habit-option-label { color: $active-color !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin modal-text-input($color) {
|
||||
&-text::placeholder { color: $color !important; }
|
||||
&-input {
|
||||
border: 0 !important;
|
||||
|
||||
&:focus, &:active {
|
||||
box-shadow: 0 0 0 1px $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($black, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $maroon-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
|
||||
&-inner-daily-todo { background: $maroon-500 !important; }
|
||||
&-checkbox { color: $maroon-100 !important; }
|
||||
&-icon { color: #6c0406 !important; }
|
||||
&-bg-noninteractive { background: $maroon-100 !important; }
|
||||
&-inner-habit { background: rgba($black, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($red-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $red-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $maroon-100 !important; }
|
||||
&-icon { color: $maroon-100 !important; }
|
||||
&-text { color: $maroon-50 !important; }
|
||||
&-text { color: $red-1 !important; }
|
||||
&-content {
|
||||
--svg-color: #{$maroon-100};
|
||||
}
|
||||
@include modal-text-input($red-1);
|
||||
&-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; }
|
||||
}
|
||||
@include habit-controls($gray-300, $maroon-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,32 +58,30 @@
|
|||
&-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; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($black, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $red-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
|
||||
&-inner-daily-todo { background: $red-500 !important; }
|
||||
&-checkbox { color: $red-100 !important; }
|
||||
&-icon { color: #6c0406 !important; }
|
||||
&-bg-noninteractive { background: $red-100 !important; }
|
||||
&-inner-habit { background: rgba($black, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($red-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $red-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $red-100 !important; }
|
||||
&-icon { color: $red-100 !important; }
|
||||
&-text { color: $red-10 !important; }
|
||||
&-text { color: $red-1 !important; }
|
||||
&-content {
|
||||
--svg-color: #{$red-100};
|
||||
}
|
||||
@include modal-text-input($red-1);
|
||||
&-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; }
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $red-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,43 +89,30 @@
|
|||
&-control {
|
||||
&-bg {
|
||||
background: $orange-100 !important;
|
||||
|
||||
&:hover {
|
||||
.habit-control { background: #b75a1c !important; }
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($orange-1, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $orange-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(183, 90, 28, 0.4) !important; }
|
||||
&-inner-daily-todo { background: $orange-500 !important; }
|
||||
&-checkbox { color: $orange-100 !important; }
|
||||
&-icon { color: #7f3300 !important; }
|
||||
&-bg-noninteractive { background: $orange-100 !important; }
|
||||
&-inner-habit { background: rgba($orange-1, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($orange-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $orange-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg {
|
||||
background: $orange-100 !important;
|
||||
|
||||
.form-control {
|
||||
background: rgba(183, 90, 28, 0.4) !important;
|
||||
|
||||
&:focus, &:active, &:hover {
|
||||
background-color: #b75a1c !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-bg { background: $orange-100 !important; }
|
||||
&-icon { color: $orange-100 !important; }
|
||||
&-text { color: #b75a1c !important; }
|
||||
&-text { color: $orange-1 !important; }
|
||||
&-content {
|
||||
--svg-color: #{$orange-100};
|
||||
}
|
||||
@include modal-text-input($orange-1);
|
||||
&-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; }
|
||||
.option-item-label { color: $orange-1 !important; }
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $orange-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,42 +120,30 @@
|
|||
&-control {
|
||||
&-bg {
|
||||
background: $yellow-100 !important;
|
||||
&:hover {
|
||||
.habit-control { background: #bf7d1a !important; }
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($yellow-1, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $yellow-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(183, 90, 28, 0.32) !important; }
|
||||
&-inner-daily-todo { background: $yellow-500 !important; }
|
||||
&-checkbox { color: $yellow-100 !important; }
|
||||
&-icon { color: #794b00 !important; }
|
||||
&-bg-noninteractive { background: $yellow-100 !important; }
|
||||
&-inner-habit { background: rgba($yellow-1, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($yellow-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $yellow-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg {
|
||||
background: $yellow-100 !important;
|
||||
|
||||
.form-control {
|
||||
background: rgba(183, 90, 28, 0.4) !important;
|
||||
|
||||
&:focus, &:active, &:hover {
|
||||
background-color: #bf7d1a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-bg { background: $yellow-100 !important; }
|
||||
&-icon { color: $yellow-100 !important; }
|
||||
&-text { color: #bf7d1a !important; }
|
||||
&-text { color: $yellow-1 !important; }
|
||||
@include modal-text-input($yellow-1);
|
||||
&-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; }
|
||||
&-content {
|
||||
--svg-color: #{$yellow-100};
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $yellow-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,32 +151,31 @@
|
|||
&-control {
|
||||
&-bg {
|
||||
background: $green-100 !important;
|
||||
&:hover {
|
||||
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($black, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $green-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
|
||||
&-inner-daily-todo { background: #77f4c7 !important; }
|
||||
&-checkbox { color: $green-10 !important; }
|
||||
&-icon { color: #005737 !important; }
|
||||
&-bg-noninteractive { background: $green-100 !important; }
|
||||
&-inner-habit { background: rgba($black, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($green-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $green-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $green-100 !important; }
|
||||
&-icon { color: $green-10 !important; }
|
||||
&-text { color: #1ca372 !important; }
|
||||
&-text { color: $green-1 !important; }
|
||||
&-content {
|
||||
--svg-color: #{$green-100};
|
||||
}
|
||||
|
||||
@include modal-text-input($green-1);
|
||||
&-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; }
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $green-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -189,32 +183,30 @@
|
|||
&-control {
|
||||
&-bg {
|
||||
background: $teal-100 !important;
|
||||
&:hover {
|
||||
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($black, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $teal-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
|
||||
&-inner-daily-todo { background: #8dedf6 !important; }
|
||||
&-checkbox { color: $teal-100 !important; }
|
||||
&-icon { color: #005158 !important; }
|
||||
&-bg-noninteractive { background: $teal-100 !important; }
|
||||
&-inner-habit { background: rgba($black, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($teal-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $teal-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $teal-100 !important; }
|
||||
&-icon { color: $teal-100 !important; }
|
||||
&-text { color: $teal-10 !important; }
|
||||
&-text { color: $teal-1 !important; }
|
||||
&-content {
|
||||
--svg-color: #{$teal-100};
|
||||
}
|
||||
@include modal-text-input($teal-1);
|
||||
&-option-disabled:hover {
|
||||
.svg-icon { color: $teal-100 !important; }
|
||||
.option-item-label { color: $teal-10 !important; }
|
||||
}
|
||||
&-habit-control-disabled:hover {
|
||||
.habit-control { background: $teal-100 !important; }
|
||||
.option-item-label { color: $teal-10 !important; }
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $teal-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -222,32 +214,31 @@
|
|||
&-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; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($black, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: $blue-100 !important;
|
||||
}
|
||||
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
|
||||
&-inner-daily-todo { background: $blue-500 !important; }
|
||||
&-checkbox { color: $blue-100 !important; }
|
||||
&-icon { color: #033f5e !important; }
|
||||
&-bg-noninteractive { background: $blue-100 !important; }
|
||||
&-inner-habit { background: rgba($black, 0.25) !important; }
|
||||
&-inner-habit-noninteractive { border: 1px solid rgba($blue-1, 0.5) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox, &-icon { color: $blue-1 !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $blue-100 !important; }
|
||||
&-icon { color: $blue-100 !important; }
|
||||
&-text { color: $blue-10 !important; }
|
||||
&-text { color: $blue-1 !important; }
|
||||
&-content {
|
||||
--svg-color: #{$blue-100};
|
||||
}
|
||||
|
||||
@include modal-text-input($blue-1);
|
||||
&-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; }
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $blue-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -255,42 +246,43 @@
|
|||
&-control {
|
||||
&-bg {
|
||||
background: $purple-task !important;
|
||||
&:hover {
|
||||
.habit-control { background: rgba(26, 24, 29, 0.48) !important; }
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
.habit-control:hover { background: rgba($black, 0.5) !important; }
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-inner-habit { background: rgba(26, 24, 29, 0.24) !important; }
|
||||
&-inner-daily-todo { background: #ffffff80 !important; }
|
||||
&-inner-habit { background: rgba($black, 0.25) !important; }
|
||||
&-inner-daily-todo { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox { color: $purple-task !important; }
|
||||
}
|
||||
|
||||
&-modal {
|
||||
&-bg { background: $purple-300 !important; }
|
||||
&-icon { color: $purple-300 !important; }
|
||||
&-text { color: $purple-200 !important; }
|
||||
&-text { color: $black !important; }
|
||||
&-content {
|
||||
--svg-color: #{$purple-300};
|
||||
}
|
||||
|
||||
@include modal-text-input($black);
|
||||
&-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; }
|
||||
}
|
||||
|
||||
@include habit-controls($gray-300, $purple-300);
|
||||
}
|
||||
}
|
||||
|
||||
&-reward {
|
||||
&-control {
|
||||
&-bg {
|
||||
background: rgba(255, 217, 160, 0.32) !important;
|
||||
.small-text { color: $orange-10 !important; }
|
||||
background: rgba($yellow-100, 0.15) !important;
|
||||
.small-text { color: $yellow-1 !important; }
|
||||
|
||||
&:hover { background: rgba(255, 217, 160, 0.48) !important; }
|
||||
&:hover { background: rgba($yellow-100, 0.25) !important; }
|
||||
}
|
||||
&-bg-noninteractive {
|
||||
background: rgba(255, 217, 160, 0.32) !important;
|
||||
.small-text { color: $orange-10 !important; }
|
||||
background: rgba($yellow-100, 0.15) !important;
|
||||
.small-text { color: $yellow-1 !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -300,8 +292,12 @@
|
|||
&-control {
|
||||
&-bg { background: $gray-600; }
|
||||
&-inner {
|
||||
color: rgba(26, 24, 29, 0.12) !important;
|
||||
border: 1px solid rgba(26, 24, 29, 0.12);
|
||||
border: 1px solid $gray-300;
|
||||
opacity: 0.75;
|
||||
|
||||
.negative, .positive {
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -309,13 +305,14 @@
|
|||
&-daily-todo {
|
||||
&-control {
|
||||
&-bg {
|
||||
background: $gray-400 !important;
|
||||
&:hover {
|
||||
.daily-todo-control { background: rgba(255, 255, 255, 0.72) !important; }
|
||||
}
|
||||
background: $gray-200 !important;
|
||||
.daily-todo-control:hover { background: rgba($white, 0.75) !important; }
|
||||
}
|
||||
&-inner { background: $gray-500 !important; }
|
||||
&-checkbox { color: $gray-400 !important; }
|
||||
&-bg-noninteractive {
|
||||
background: $gray-200 !important;
|
||||
}
|
||||
&-inner { background: rgba($white, 0.5) !important; }
|
||||
&-checkbox { color: $gray-10 !important; }
|
||||
&-content {
|
||||
background: $gray-600;
|
||||
|
||||
|
|
@ -337,6 +334,24 @@
|
|||
border-radius: 100px;
|
||||
color: $white;
|
||||
|
||||
&-negative {
|
||||
&-enabled {
|
||||
padding-top: 13px;
|
||||
}
|
||||
&-disabled {
|
||||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-positive {
|
||||
&-enabled {
|
||||
padding-top: 9px;
|
||||
}
|
||||
&-disabled {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -347,14 +362,10 @@
|
|||
margin-top: 7px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.positive {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.negative {
|
||||
margin-top: 13px;
|
||||
&.disabled {
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,13 +25,16 @@
|
|||
>
|
||||
<div
|
||||
class="task-control habit-control"
|
||||
:class="controlClass.up.inner"
|
||||
:class="[{
|
||||
'habit-control-positive-enabled': task.up && isUser,
|
||||
'habit-control-positive-disabled': !task.up && isUser,
|
||||
}, controlClass.up.inner]"
|
||||
@click="(isUser && task.up) ? score('up') : null"
|
||||
>
|
||||
<div
|
||||
v-if="task.group.id && !isUser"
|
||||
v-if="!isUser"
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.up.icon"
|
||||
:class="task.up ? controlClass.up.icon : 'positive'"
|
||||
v-html="icons.lock"
|
||||
></div>
|
||||
<div
|
||||
|
|
@ -55,7 +58,7 @@
|
|||
@click="isUser ? score(task.completed ? 'down' : 'up') : null"
|
||||
>
|
||||
<div
|
||||
v-if="task.group.id && !isUser && !task.completed"
|
||||
v-if="!isUser"
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.icon"
|
||||
v-html="icons.lock"
|
||||
|
|
@ -186,7 +189,7 @@
|
|||
v-if="!task.collapseChecklist"
|
||||
:key="item.id"
|
||||
class="custom-control custom-checkbox checklist-item"
|
||||
:class="{'checklist-item-done': item.completed}"
|
||||
:class="{'checklist-item-done': item.completed, 'cursor-auto': !isUser}"
|
||||
>
|
||||
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
||||
<input
|
||||
|
|
@ -307,13 +310,16 @@
|
|||
>
|
||||
<div
|
||||
class="task-control habit-control"
|
||||
:class="controlClass.down.inner"
|
||||
:class="[{
|
||||
'habit-control-negative-enabled': task.down && isUser,
|
||||
'habit-control-negative-disabled': !task.down && isUser,
|
||||
}, controlClass.down.inner]"
|
||||
@click="(isUser && task.down) ? score('down') : null"
|
||||
>
|
||||
<div
|
||||
v-if="task.group.id && !isUser"
|
||||
class="svg-icon lock"
|
||||
:class="controlClass.down.icon"
|
||||
:class="task.down ? controlClass.down.icon : 'negative'"
|
||||
v-html="icons.lock"
|
||||
></div>
|
||||
<div
|
||||
|
|
@ -353,15 +359,18 @@
|
|||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.control-bottom-box {
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.control-top-box {
|
||||
border-top-left-radius: 0px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.task {
|
||||
margin-bottom: 2px;
|
||||
|
|
|
|||
|
|
@ -11,58 +11,80 @@
|
|||
<div
|
||||
v-if="task"
|
||||
slot="modal-header"
|
||||
class="task-modal-header"
|
||||
class="task-modal-header p-4"
|
||||
:class="cssClass('bg')"
|
||||
@click="handleClick($event)"
|
||||
>
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<h2
|
||||
class="my-auto"
|
||||
:class="cssClassHeadings"
|
||||
>
|
||||
{{ title }}
|
||||
</h1>
|
||||
<div class="float-right d-flex align-items-center">
|
||||
</h2>
|
||||
<div class="ml-auto d-flex align-items-center">
|
||||
<span
|
||||
v-once
|
||||
class="cancel-task-btn mr-2"
|
||||
class="cancel-task-btn mr-3"
|
||||
:class="cssClassHeadings"
|
||||
@click="cancel()"
|
||||
>{{ $t('cancel') }}</span>
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-secondary"
|
||||
<div
|
||||
class="btn btn-secondary d-flex align-items-center justify-content-center"
|
||||
:class="{disabled: !canSave}"
|
||||
@click="submit()"
|
||||
>
|
||||
{{ $t('save') }}
|
||||
</button>
|
||||
<div
|
||||
class="m-auto"
|
||||
v-if="purpose === 'edit'"
|
||||
>
|
||||
{{ $t('save') }}
|
||||
</div>
|
||||
<div
|
||||
class="m-auto"
|
||||
v-if="purpose === 'create'"
|
||||
>
|
||||
{{ $t('create') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label v-once>{{ `${$t('text')}*` }}</label>
|
||||
<label
|
||||
:class="cssClassHeadings"
|
||||
class="mb-1"
|
||||
>{{ `${$t('text')}*` }}</label>
|
||||
<input
|
||||
ref="inputToFocus"
|
||||
v-model="task.text"
|
||||
class="form-control title-input"
|
||||
class="form-control input-title"
|
||||
:class="cssClass('input')"
|
||||
type="text"
|
||||
required="required"
|
||||
spellcheck="true"
|
||||
:disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
|
||||
:placeholder="$t('addATitle')"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-0">
|
||||
<label
|
||||
v-once
|
||||
class="d-flex align-items-center justify-content-between"
|
||||
class="d-flex align-items-center justify-content-between mb-1"
|
||||
>
|
||||
<span>{{ $t('notes') }}</span>
|
||||
<small v-once>
|
||||
<span
|
||||
:class="cssClassHeadings"
|
||||
>{{ $t('notes') }}</span>
|
||||
<small>
|
||||
<a
|
||||
target="_blank"
|
||||
href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet"
|
||||
:class="cssClassHeadings"
|
||||
>{{ $t('markdownHelpLink') }}</a>
|
||||
</small>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="task.notes"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
class="form-control input-notes"
|
||||
:class="cssClass('input')"
|
||||
:placeholder="$t('addNotes')"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -147,49 +169,49 @@
|
|||
class="d-flex justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="option-item habit-control"
|
||||
:class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
|
||||
class="habit-option-container no-transition
|
||||
d-flex flex-column justify-content-center align-items-center"
|
||||
@click="toggleUpDirection()"
|
||||
:class="!task.up ? cssClass('habit-control-disabled') : ''"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
class="habit-option-button no-transition
|
||||
d-flex justify-content-center align-items-center mb-2"
|
||||
:class="task.up ? cssClass('bg') : ''"
|
||||
>
|
||||
<div class="task-control habit-control">
|
||||
<div
|
||||
class="svg-icon positive"
|
||||
:class="task.up ? cssClass('icon') : ''"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="habit-option-icon svg-icon no-transition"
|
||||
:class="task.up ? '' : 'disabled'"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.up ? cssClass('text') : ''"
|
||||
class="habit-option-label no-transition"
|
||||
:class="task.up ? cssClass('icon') : 'disabled'"
|
||||
>
|
||||
{{ $t('positive') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="option-item habit-control"
|
||||
:class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
|
||||
class="habit-option-container no-transition
|
||||
d-flex flex-column justify-content-center align-items-center"
|
||||
@click="toggleDownDirection()"
|
||||
:class="!task.down ? cssClass('habit-control-disabled') : ''"
|
||||
>
|
||||
<div
|
||||
class="option-item-box"
|
||||
class="habit-option-button no-transition
|
||||
d-flex justify-content-center align-items-center mb-2"
|
||||
:class="task.down ? cssClass('bg') : ''"
|
||||
>
|
||||
<div class="task-control habit-control">
|
||||
<div
|
||||
class="svg-icon negative"
|
||||
:class="task.down ? cssClass('icon') : ''"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="habit-option-icon no-transition svg-icon negative mx-auto"
|
||||
:class="task.down ? '' : 'disabled'"
|
||||
v-html="icons.negative"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="option-item-label"
|
||||
:class="task.down ? cssClass('text') : ''"
|
||||
class="habit-option-label no-transition"
|
||||
:class="task.down ? cssClass('icon') : 'disabled'"
|
||||
>
|
||||
{{ $t('negative') }}
|
||||
</div>
|
||||
|
|
@ -600,7 +622,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="task.type !== 'reward'"
|
||||
v-if="advancedSettingsAvailable"
|
||||
class="advanced-settings"
|
||||
>
|
||||
<div
|
||||
|
|
@ -718,10 +740,10 @@
|
|||
@click="destroy()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon d-inline-b"
|
||||
class="svg-icon d-inline-b mt-1 mb-1"
|
||||
v-html="icons.destroy"
|
||||
></div>
|
||||
<span>{{ $t('deleteTask') }}</span>
|
||||
<span class="delete-text mt-1 mb-1">{{ $t('deleteTask') }}</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -731,19 +753,14 @@
|
|||
@click="handleClick($event)"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="cancel-task-btn"
|
||||
@click="cancel()"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</div>
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
v-if="purpose === 'create'"
|
||||
class="btn btn-primary btn-footer
|
||||
d-flex align-items-center justify-content-center mt-2 mb-2"
|
||||
:class="{disabled: !canSave}"
|
||||
@click="submit()"
|
||||
>
|
||||
{{ $t('save') }}
|
||||
</button>
|
||||
{{ $t('create') }}
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
|
@ -756,27 +773,29 @@
|
|||
max-width: 448px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
.no-transition {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.input-group > * {
|
||||
height: 40px;
|
||||
.form-control:not(.input-title):not(.input-notes):not(.checklist-item) {
|
||||
height: 40px !important; // until the new changes of teams-2020 are applied
|
||||
}
|
||||
|
||||
// until the new changes of teams-2020 are applied
|
||||
.vdp-datepicker {
|
||||
.input-group-append {
|
||||
height: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
color: rgba($white, 0.64) !important;
|
||||
transition-property: border-color, box-shadow, color, background;
|
||||
|
||||
&:focus, &:active {
|
||||
color: $white !important;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
|
||||
&:not(:host-context(.tags-popup)) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
transition-property: border-color, box-shadow, color, background;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
&:focus, &:active, &:hover {
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -785,6 +804,12 @@
|
|||
border: none;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
// the body has a margin/padding that can't be found
|
||||
// if found please remove that padding and this style
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
.modal-header, .modal-body, .modal-footer {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
|
|
@ -795,6 +820,10 @@
|
|||
padding-right: 23px;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.task-modal-header {
|
||||
color: $white;
|
||||
width: 100%;
|
||||
|
|
@ -803,7 +832,7 @@
|
|||
padding-top: 16px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
h1 {
|
||||
h2 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -894,25 +923,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -1070,27 +1080,44 @@
|
|||
}
|
||||
}
|
||||
|
||||
.delete-task-btn, .cancel-task-btn {
|
||||
.delete-task-btn, .cancel-task-btn {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-task-btn {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 8px;
|
||||
color: $red-50;
|
||||
|
||||
height: 1.5rem;
|
||||
align-items: center;
|
||||
&:hover, &:focus, &:active {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $maroon-50;
|
||||
}
|
||||
.delete-text {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.71;
|
||||
letter-spacing: normal;
|
||||
color: $maroon-50;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.svg-icon {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
margin-right: 8.5px;
|
||||
svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
margin-right: 0.5rem;
|
||||
color: $maroon-50;
|
||||
}
|
||||
}
|
||||
|
||||
.task-modal-footer {
|
||||
margin: 0;
|
||||
padding: 16px 24px;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -1147,10 +1174,69 @@
|
|||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.gold {
|
||||
width: 24px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
.habit-option {
|
||||
&-container {
|
||||
min-width: 3rem;
|
||||
cursor: pointer;
|
||||
&:first-of-type {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
&-button {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
color: $white;
|
||||
&.disabled {
|
||||
color: $gray-200;
|
||||
}
|
||||
&.negative {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
&-label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
&.disabled {
|
||||
color: $gray-100;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea, input.form-control, textarea.form-control {
|
||||
padding: 0.25rem 0.75rem;
|
||||
line-height: 1.71;
|
||||
}
|
||||
.input-title {
|
||||
height: 2rem;
|
||||
}
|
||||
.input-notes {
|
||||
height: 3.5rem;
|
||||
}
|
||||
label {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
}
|
||||
.flex-group {
|
||||
display: flex;
|
||||
.flex {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -1237,6 +1323,15 @@ export default {
|
|||
dayMapping: 'constants.DAY_MAPPING',
|
||||
ATTRIBUTES: 'constants.ATTRIBUTES',
|
||||
}),
|
||||
advancedSettingsAvailable () {
|
||||
if (
|
||||
this.task.type === 'reward'
|
||||
|| this.task.type === 'todo'
|
||||
|| this.purpose === 'create'
|
||||
|| !this.isUserTask
|
||||
) return false;
|
||||
return true;
|
||||
},
|
||||
groupAccessRequiredAndOnPersonalPage () {
|
||||
if (!this.groupId && this.task.group && this.task.group.id) return true;
|
||||
return false;
|
||||
|
|
@ -1261,6 +1356,9 @@ export default {
|
|||
canDelete () {
|
||||
return this.purpose !== 'create' && this.canDeleteTask(this.task);
|
||||
},
|
||||
canSave () {
|
||||
return this.task && this.task.text && this.task.text.length > 0;
|
||||
},
|
||||
title () {
|
||||
const type = this.$t(this.task.type);
|
||||
return this.$t(this.purpose === 'edit' ? 'editATask' : 'createTask', { type });
|
||||
|
|
@ -1305,6 +1403,11 @@ export default {
|
|||
remainingSelectedTags () {
|
||||
return this.selectedTags.slice(this.maxTags);
|
||||
},
|
||||
cssClassHeadings () {
|
||||
const textClass = this.cssClass('text');
|
||||
if (textClass.indexOf('purple') !== -1 || textClass.indexOf('worst') !== -1) return null;
|
||||
return textClass;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
task () {
|
||||
|
|
@ -1359,6 +1462,10 @@ export default {
|
|||
this.syncTask();
|
||||
},
|
||||
cssClass (suffix) {
|
||||
if (!this.task) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.getTaskClasses(this.task, `${this.purpose === 'edit' ? 'edit' : 'create'}-modal-${suffix}`);
|
||||
},
|
||||
closeTagsPopup () {
|
||||
|
|
@ -1434,6 +1541,7 @@ export default {
|
|||
}
|
||||
},
|
||||
async submit () {
|
||||
if (!this.canSave) return;
|
||||
if (this.newChecklistItem) this.addChecklistItem();
|
||||
|
||||
// TODO Fix up permissions on task.group so we don't have to keep doing these hacks
|
||||
|
|
|
|||
|
|
@ -108,6 +108,11 @@ export function canEdit (store) {
|
|||
};
|
||||
}
|
||||
|
||||
function _nonInteractive (task) {
|
||||
return (task.group && task.group.id && !task.userId)
|
||||
|| (task.challenge && task.challenge.id && !task.userId);
|
||||
}
|
||||
|
||||
export function getTaskClasses (store) {
|
||||
const userPreferences = store.state.user.data.preferences;
|
||||
|
||||
|
|
@ -123,10 +128,16 @@ export function getTaskClasses (store) {
|
|||
switch (purpose) {
|
||||
case 'edit-modal-bg':
|
||||
return `task-${color}-modal-bg`;
|
||||
case 'edit-modal-content':
|
||||
return `task-${color}-modal-content`;
|
||||
case 'create-modal-content':
|
||||
return 'task-purple-modal-content';
|
||||
case 'edit-modal-text':
|
||||
return `task-${color}-modal-text`;
|
||||
case 'edit-modal-icon':
|
||||
return `task-${color}-modal-icon`;
|
||||
case 'edit-modal-input':
|
||||
return `task-${color}-modal-text task-${color}-modal-input`;
|
||||
case 'edit-modal-option-disabled':
|
||||
return `task-${color}-modal-option-disabled`;
|
||||
case 'edit-modal-habit-control-disabled':
|
||||
|
|
@ -135,6 +146,8 @@ export function getTaskClasses (store) {
|
|||
return 'task-purple-modal-bg';
|
||||
case 'create-modal-text':
|
||||
return 'task-purple-modal-text';
|
||||
case 'create-modal-input':
|
||||
return 'task-purple-modal-text task-purple-modal-input';
|
||||
case 'create-modal-icon':
|
||||
return 'task-purple-modal-icon';
|
||||
case 'create-modal-option-disabled':
|
||||
|
|
@ -146,7 +159,7 @@ export function getTaskClasses (store) {
|
|||
if (type === 'todo' || type === 'daily') {
|
||||
if (task.completed || (!shouldDo(dueDate, task, userPreferences) && type === 'daily')) {
|
||||
return {
|
||||
bg: 'task-disabled-daily-todo-control-bg',
|
||||
bg: _nonInteractive(task) ? 'task-disabled-daily-todo-control-bg-noninteractive' : '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',
|
||||
|
|
@ -154,22 +167,30 @@ export function getTaskClasses (store) {
|
|||
}
|
||||
|
||||
return {
|
||||
bg: task.group && task.group.id && !task.userId ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
|
||||
bg: _nonInteractive(task) ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
|
||||
checkbox: `task-${color}-control-checkbox`,
|
||||
inner: `task-${color}-control-inner-daily-todo`,
|
||||
icon: `task-${color}-control-icon`,
|
||||
};
|
||||
} if (type === 'reward') {
|
||||
return {
|
||||
bg: task.group && task.group.id && !task.userId ? 'task-reward-control-bg-noninteractive' : 'task-reward-control-bg',
|
||||
bg: _nonInteractive(task) ? 'task-reward-control-bg-noninteractive' : 'task-reward-control-bg',
|
||||
};
|
||||
} if (type === 'habit') {
|
||||
return {
|
||||
up: task.up
|
||||
? { bg: task.group && task.group.id && !task.userId ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`, inner: `task-${color}-control-inner-habit`, icon: `task-${color}-control-icon` }
|
||||
? {
|
||||
bg: _nonInteractive(task) ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
|
||||
inner: _nonInteractive(task) ? `task-${color}-control-inner-habit-noninteractive` : `task-${color}-control-inner-habit`,
|
||||
icon: `task-${color}-control-icon`,
|
||||
}
|
||||
: { bg: 'task-disabled-habit-control-bg', inner: 'task-disabled-habit-control-inner', icon: `task-${color}-control-icon` },
|
||||
down: task.down
|
||||
? { bg: task.group && task.group.id && !task.userId ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`, inner: `task-${color}-control-inner-habit`, icon: `task-${color}-control-icon` }
|
||||
? {
|
||||
bg: _nonInteractive(task) ? `task-${color}-control-bg-noninteractive` : `task-${color}-control-bg`,
|
||||
inner: _nonInteractive(task) ? `task-${color}-control-inner-habit-noninteractive` : `task-${color}-control-inner-habit`,
|
||||
icon: `task-${color}-control-icon`,
|
||||
}
|
||||
: { bg: 'task-disabled-habit-control-bg', inner: 'task-disabled-habit-control-inner', icon: `task-${color}-control-icon` },
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
"addMultipleTip": "<strong>Tip:</strong> To add multiple <%= taskType %>, separate each one using a line break (Shift + Enter) and then press \"Enter.\"",
|
||||
"addsingle": "Add Single",
|
||||
"addATask": "Add a <%= type %>",
|
||||
"editATask": "Edit a <%= type %>",
|
||||
"addATitle": "Add a title",
|
||||
"editATask": "Edit <%= type %>",
|
||||
"createTask": "Create <%= type %>",
|
||||
"addTaskToUser": "Add Task",
|
||||
"scheduled": "Scheduled",
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
"text": "Title",
|
||||
"extraNotes": "Extra Notes",
|
||||
"notes": "Notes",
|
||||
"addNotes": "Add notes",
|
||||
"direction/Actions": "Direction/Actions",
|
||||
"advancedSettings": "Advanced Settings",
|
||||
"taskAlias": "Task Alias",
|
||||
|
|
|
|||
Loading…
Reference in a new issue