Rework details sections
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
This commit is contained in:
Raimund Schlüßler
parent
dd16cf014d
commit
7430a9d9e3
2 changed files with 297 additions and 273 deletions
|
|
@ -808,262 +808,16 @@
|
|||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
color: var(--color-text-lighter);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
color: $blue_due;
|
||||
}
|
||||
|
||||
&.high {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.date:hover .icon.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.date .icon {
|
||||
&.icon-calendar-due,
|
||||
&.icon-calendar-overdue,
|
||||
&.icon-percent,
|
||||
&.icon-percent-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.detail-all-day {
|
||||
div,
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type='checkbox'].checkbox + label {
|
||||
&::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
>span {
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.icon {
|
||||
&.detail-save,
|
||||
&.icon-trash {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon-trash {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
&.icon-privacy,
|
||||
&.icon-status {
|
||||
opacity: 1;
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
&.detail-save {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
line-height: 44px;
|
||||
|
||||
&.utils {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-right: 15px;
|
||||
&.section-content {
|
||||
flex-grow: 1;
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
line-height: 22px;
|
||||
width: calc(100% - 100px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0;
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.calendar-indicator {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 50px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
background: none repeat scroll 0 0 $gray_easy;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
|
||||
&.duration-input {
|
||||
margin: 2px 0 0 .3em;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
&.percent-input,
|
||||
&.priority-input {
|
||||
width: 44px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray_light;
|
||||
padding: 0;
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: none;
|
||||
padding-left: 12px;
|
||||
vertical-align: middle;
|
||||
width: calc(100% - 80px);
|
||||
line-height: 0;
|
||||
|
||||
.mx-datepicker {
|
||||
&.date {
|
||||
width: 59%;
|
||||
}
|
||||
&.time {
|
||||
width: 39%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-calendar-container .multiselect__single {
|
||||
color: $blue_due;
|
||||
}
|
||||
|
||||
.detail-categories-container,
|
||||
.detail-calendar-container {
|
||||
width: calc(100% - 52px);
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
|
||||
.multiselect.multiselect-vue {
|
||||
width: 100%;
|
||||
margin: 1px -1px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.multiselect--disabled {
|
||||
background-color: var(--color-main-background) !important;
|
||||
cursor: default;
|
||||
.multiselect__single, input:not([type='range']):disabled {
|
||||
background-color: var(--color-main-background) !important;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.multiselect--active .multiselect__tags {
|
||||
border: 1px solid var(--color-border-dark);
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
border: 1px solid transparent;
|
||||
|
||||
.multiselect__tags-wrap {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
padding: 0px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
padding-left: 0px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
color: $blue_due;
|
||||
background: $gray_easy;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.multiselect__element {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
&.note {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $gray_light;
|
||||
|
|
@ -1118,6 +872,7 @@
|
|||
min-height: 140px;
|
||||
word-wrap: break-word;
|
||||
cursor: text;
|
||||
width: 100%;
|
||||
|
||||
.content-fakeable {
|
||||
&.editing {
|
||||
|
|
@ -1140,6 +895,254 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
padding: 14px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calendar-indicator {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: calc(100% - 44px);
|
||||
padding-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: none;
|
||||
flex-grow: 1;
|
||||
|
||||
.mx-datepicker {
|
||||
&.date {
|
||||
width: 59%;
|
||||
}
|
||||
&.time {
|
||||
width: 39%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-multiselect-container {
|
||||
width: calc(100% - 44px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20px;
|
||||
|
||||
&.blue .multiselect__single {
|
||||
color: $blue_due;
|
||||
}
|
||||
|
||||
.multiselect.multiselect-vue {
|
||||
width: 100%;
|
||||
margin: 1px -1px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.multiselect--disabled {
|
||||
background-color: var(--color-main-background) !important;
|
||||
cursor: default;
|
||||
.multiselect__single, input:not([type='range']):disabled {
|
||||
background-color: var(--color-main-background) !important;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.multiselect--active .multiselect__tags {
|
||||
border: 1px solid var(--color-border-dark);
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
border: 1px solid transparent;
|
||||
|
||||
.multiselect__tags-wrap {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
padding: 0px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
padding-left: 0px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
color: $blue_due;
|
||||
background: $gray_easy;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.multiselect__element {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.section-utils button {
|
||||
box-sizing: border-box;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
padding: 14px;
|
||||
|
||||
&:hover .icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.date:hover button.delete {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.editing {
|
||||
.section-utils button {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.section-edit {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
&.low,
|
||||
&.date {
|
||||
color: $blue_due;
|
||||
}
|
||||
|
||||
&.high {
|
||||
color: $red_overdue;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.date .icon {
|
||||
&.icon-calendar-due,
|
||||
&.icon-calendar-overdue,
|
||||
&.icon-percent,
|
||||
&.icon-percent-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.detail-note {
|
||||
padding: 20px 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.detail-all-day {
|
||||
label {
|
||||
padding-left: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div,
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox + label {
|
||||
&::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
>span {
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.icon-privacy,
|
||||
&.icon-status {
|
||||
opacity: 1;
|
||||
cursor: unset;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
border: medium none;
|
||||
box-shadow: none;
|
||||
width: calc(100% - 50px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
background: none repeat scroll 0 0 $gray_easy;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
color: $gray_dark;
|
||||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
|
||||
&.duration-input {
|
||||
margin: 2px 0 0 .3em;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
&.percent-input,
|
||||
&.priority-input {
|
||||
width: 44px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
border: 1px solid $gray_light;
|
||||
padding: 0;
|
||||
width: 98px;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
height: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -74,11 +74,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
class="section detail-start"
|
||||
>
|
||||
<div v-click-outside="() => finishEditing('start')"
|
||||
class="section-content"
|
||||
@click="editProperty('start', $event)"
|
||||
>
|
||||
<span class="section-icon">
|
||||
<span :class="[dateIcon(task.startMoment)]"
|
||||
class="icon"
|
||||
/>
|
||||
</span>
|
||||
<span class="section-title">
|
||||
{{ startDateString }}
|
||||
</span>
|
||||
|
|
@ -95,24 +98,27 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
|
||||
</a>
|
||||
<a class="end-edit" @click="setStart({ task: task, start: null })">
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
</button>
|
||||
<button class="delete" @click="setStart({ task: task, start: null })">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="!task.calendar.readOnly || task.due" :class="{'date': task.dueMoment.isValid(), 'editing': edit=='due', 'high': overdue(task.dueMoment)}"
|
||||
class="section detail-date"
|
||||
>
|
||||
<div v-click-outside="() => finishEditing('due')"
|
||||
class="section-content"
|
||||
@click="editProperty('due', $event)"
|
||||
>
|
||||
<span class="section-icon">
|
||||
<span :class="[dateIcon(task.dueMoment)]"
|
||||
class="icon"
|
||||
/>
|
||||
</span>
|
||||
<span class="section-title">
|
||||
{{ dueDateString }}
|
||||
</span>
|
||||
|
|
@ -129,19 +135,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
|
||||
</a>
|
||||
<a class="end-edit" @click="setDue({ task: task, due: null })">
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
</button>
|
||||
<button class="delete" @click="setDue({ task: task, due: null })">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="isAllDayPossible"
|
||||
class="section detail-all-day reactive"
|
||||
>
|
||||
<div>
|
||||
<div class="section-content">
|
||||
<input id="isAllDayPossible"
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
|
|
@ -159,10 +165,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</li>
|
||||
<li class="section detail-calendar reactive">
|
||||
<div v-click-outside="() => finishEditing('calendar')"
|
||||
class="section-content"
|
||||
@click="editProperty('calendar')"
|
||||
>
|
||||
<span class="section-icon">
|
||||
<span :style="{'background-color': task.calendar.color}" class="calendar-indicator" />
|
||||
<div class="detail-calendar-container">
|
||||
</span>
|
||||
<div class="detail-multiselect-container blue">
|
||||
<Multiselect
|
||||
:value="task.calendar"
|
||||
:multiple="false"
|
||||
|
|
@ -182,10 +191,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</li>
|
||||
<li class="section detail-class reactive">
|
||||
<div v-click-outside="() => finishEditing('class')"
|
||||
class="section-content"
|
||||
@click="editProperty('class')"
|
||||
>
|
||||
<span class="section-icon">
|
||||
<span class="icon icon-color icon-privacy" />
|
||||
<div class="detail-calendar-container">
|
||||
</span>
|
||||
<div class="detail-multiselect-container blue">
|
||||
<Multiselect
|
||||
:value="classSelect.find( _ => _.type === task.class )"
|
||||
:multiple="false"
|
||||
|
|
@ -205,10 +217,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</li>
|
||||
<li class="section detail-class reactive">
|
||||
<div v-click-outside="() => finishEditing('status')"
|
||||
class="section-content"
|
||||
@click="editProperty('status')"
|
||||
>
|
||||
<span class="section-icon">
|
||||
<span :class="[iconStatus]" class="icon" />
|
||||
<div class="detail-calendar-container">
|
||||
</span>
|
||||
<div class="detail-multiselect-container blue">
|
||||
<Multiselect
|
||||
:value="statusSelect.find( _ => _.type === task.status )"
|
||||
:multiple="false"
|
||||
|
|
@ -230,11 +245,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
class="section detail-priority"
|
||||
>
|
||||
<div v-click-outside="() => finishEditing('priority')"
|
||||
class="section-content"
|
||||
@click="editProperty('priority')"
|
||||
>
|
||||
<span :class="[iconStar]"
|
||||
class="icon"
|
||||
/>
|
||||
<span class="section-icon">
|
||||
<span :class="[iconStar]" class="icon" />
|
||||
</span>
|
||||
<span class="section-title">
|
||||
{{ priorityString }}
|
||||
</span>
|
||||
|
|
@ -255,22 +271,25 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
|
||||
</a>
|
||||
<a class="end-edit" @click="setProperty('priority', 0)">
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
</button>
|
||||
<button class="delete" @click="setProperty('priority', 0)">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="!task.calendar.readOnly || task.complete" :class="{'editing': edit=='complete', 'date': task.complete>0}"
|
||||
class="section detail-complete"
|
||||
>
|
||||
<div v-click-outside="() => finishEditing('complete')"
|
||||
class="section-content"
|
||||
@click="editProperty('complete')"
|
||||
>
|
||||
<span class="section-icon">
|
||||
<span :class="[iconPercent]" class="icon" />
|
||||
</span>
|
||||
<span class="section-title">
|
||||
{{ completeString }}
|
||||
</span>
|
||||
|
|
@ -291,19 +310,21 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="utils">
|
||||
<a>
|
||||
<span class="icon icon-color detail-save icon-checkmark-color end-edit reactive" />
|
||||
</a>
|
||||
<a class="end-edit" @click="setProperty('complete', 0)">
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
</button>
|
||||
<button class="delete" @click="setProperty('complete', 0)">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-show="!task.calendar.readOnly || task.categories.length>0" :class="{'active': task.categories.length>0}" class="section detail-categories">
|
||||
<div>
|
||||
<div class="section-content">
|
||||
<span class="section-icon">
|
||||
<span :class="[iconCategories]" class="icon detail-categories" />
|
||||
<div class="detail-categories-container">
|
||||
</span>
|
||||
<div class="detail-multiselect-container">
|
||||
<Multiselect v-if="task.categories"
|
||||
v-model="task.categories"
|
||||
:multiple="true"
|
||||
|
|
@ -322,7 +343,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
</li>
|
||||
<li v-show="!task.calendar.readOnly || task.note" class="section detail-note">
|
||||
<div class="note">
|
||||
<div class="section-content note">
|
||||
<div v-click-outside="() => finishEditing('note')"
|
||||
class="note-body selectable"
|
||||
@click="editProperty('note', $event)"
|
||||
|
|
|
|||
Loading…
Reference in a new issue