mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-14 02:02:19 +00:00
feat(teams): Day Start and adjust uncheck wording
This commit is contained in:
Sabe Jones
SabreCat
parent
dcaba7f186
commit
0806391ab8
5 changed files with 134 additions and 110 deletions
|
|
@ -1,9 +1,47 @@
|
|||
.create-task-area {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
right: 12px;
|
||||
top: -24px;
|
||||
z-index: 998;
|
||||
align-items: center;
|
||||
|
||||
.dropdown {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
|
||||
background-color: $white;
|
||||
margin-top: 2px;
|
||||
|
||||
.dropdown-item:hover {
|
||||
.svg-icon {
|
||||
color: $purple-300;
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $gray-200;
|
||||
|
||||
&.icon-habit {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.icon-daily {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.icon-todo {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.icon-reward {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide-tasks-btns-leave-active, .slide-tasks-btns-enter-active {
|
||||
|
|
@ -18,69 +56,33 @@
|
|||
}
|
||||
|
||||
.diamond-btn {
|
||||
margin-left: 24px;
|
||||
margin-left: 8px;
|
||||
background: $white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
|
||||
cursor: pointer;
|
||||
color: $gray-200;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&:hover:not(.create-btn) {
|
||||
color: $purple-400;
|
||||
box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
&.icon-habit {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.icon-daily {
|
||||
width: 21.6px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&.icon-todo {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&.icon-reward {
|
||||
width: 23.4px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
color: $white;
|
||||
background-color: $green-100;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background-color: $purple-200;
|
||||
height: 32px;
|
||||
width: 112px;
|
||||
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: rotate(-45deg);
|
||||
transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
&.open {
|
||||
background: $gray-200 !important;
|
||||
|
||||
.svg-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
color: $purple-500;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,32 +25,17 @@
|
|||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="canCreateTasks"
|
||||
class="create-task-area d-flex"
|
||||
>
|
||||
<transition name="slide-tasks-btns">
|
||||
<div
|
||||
v-if="openCreateBtn"
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
v-b-tooltip.hover.bottom="$t(type)"
|
||||
class="create-task-btn diamond-btn"
|
||||
@click="createTask(type)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="day-start d-flex align-items-center"
|
||||
v-html="$t('dayStart', { startTime: groupStartTime } )"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
id="create-task-btn"
|
||||
class="create-btn diamond-btn btn btn-success"
|
||||
v-if="canCreateTasks"
|
||||
class="create-btn diamond-btn btn"
|
||||
:class="{open: openCreateBtn}"
|
||||
@click="openCreateBtn = !openCreateBtn"
|
||||
>
|
||||
|
|
@ -58,14 +43,30 @@
|
|||
class="svg-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
<div class="ml-2"> {{ $t('addTask') }} </div>
|
||||
</div>
|
||||
<b-tooltip
|
||||
v-if="!openCreateBtn"
|
||||
target="create-task-btn"
|
||||
placement="bottom"
|
||||
<div
|
||||
v-if="openCreateBtn"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ $t('create') }}
|
||||
</b-tooltip>
|
||||
<div
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
@click="createTask(type)"
|
||||
class="dropdown-item d-flex pl-2 py-1"
|
||||
>
|
||||
<div class="w-25 d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="svg-icon m-auto"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div>
|
||||
</div>
|
||||
<div class="w-75 ml-1">
|
||||
{{ $t(type) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -95,11 +96,20 @@
|
|||
}
|
||||
|
||||
.create-task-area {
|
||||
top: 1rem;
|
||||
}
|
||||
top: 1.5rem;
|
||||
right: 2.25rem;
|
||||
|
||||
.tasks-navigation {
|
||||
margin-bottom: 40px;
|
||||
.day-start {
|
||||
height: 2rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 2px;
|
||||
color: $gray-100;
|
||||
background-color: $gray-600;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.positive {
|
||||
|
|
@ -116,6 +126,7 @@ import Vue from 'vue';
|
|||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import findIndex from 'lodash/findIndex';
|
||||
import groupBy from 'lodash/groupBy';
|
||||
import moment from 'moment';
|
||||
import taskDefaults from '@/../../common/script/libs/taskDefaults';
|
||||
import TaskColumn from '../tasks/column';
|
||||
import TaskModal from '../tasks/taskModal';
|
||||
|
|
@ -207,6 +218,15 @@ export default {
|
|||
return (this.group.leader && this.group.leader._id === this.user._id)
|
||||
|| (this.group.managers && Boolean(this.group.managers[this.user._id]));
|
||||
},
|
||||
groupStartTime () {
|
||||
if (!this.group || !this.group.cron) return null;
|
||||
const { dayStart, timezoneOffset } = this.group.cron;
|
||||
const meridian = dayStart < 12 ? 'AM' : 'PM';
|
||||
let hour = dayStart % 12;
|
||||
if (!hour) hour = 12;
|
||||
const timezone = moment().utcOffset(-timezoneOffset).format('Z');
|
||||
return `${hour} ${meridian} UTC${timezone}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// call again the method if the route changes (when this route is already active)
|
||||
|
|
|
|||
|
|
@ -160,30 +160,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="create-task-area d-flex">
|
||||
<transition name="slide-tasks-btns">
|
||||
<div
|
||||
v-if="openCreateBtn"
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
v-b-tooltip.hover.bottom="$t(type)"
|
||||
class="create-task-btn diamond-btn"
|
||||
@click="createTask(type)"
|
||||
>
|
||||
<div
|
||||
class="svg-icon"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="create-task-area">
|
||||
<div
|
||||
id="create-task-btn"
|
||||
class="create-btn diamond-btn btn btn-success"
|
||||
class="create-btn diamond-btn btn"
|
||||
:class="{open: openCreateBtn}"
|
||||
@click="openCreateBtn = !openCreateBtn"
|
||||
>
|
||||
|
|
@ -191,14 +171,30 @@
|
|||
class="svg-icon"
|
||||
v-html="icons.positive"
|
||||
></div>
|
||||
<div class="ml-2"> {{ $t('addTask') }} </div>
|
||||
</div>
|
||||
<b-tooltip
|
||||
v-if="!openCreateBtn"
|
||||
target="create-task-btn"
|
||||
placement="bottom"
|
||||
<div
|
||||
v-if="openCreateBtn"
|
||||
class="dropdown"
|
||||
>
|
||||
{{ $t('addTask') }}
|
||||
</b-tooltip>
|
||||
<div
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
@click="createTask(type)"
|
||||
class="dropdown-item d-flex pl-2 py-1"
|
||||
>
|
||||
<div class="w-25 d-flex align-items-center justify-content-center">
|
||||
<div
|
||||
class="svg-icon m-auto"
|
||||
:class="`icon-${type}`"
|
||||
v-html="icons[type]"
|
||||
></div>
|
||||
</div>
|
||||
<div class="w-75 ml-1">
|
||||
{{ $t(type) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row tasks-columns">
|
||||
|
|
@ -345,7 +341,7 @@
|
|||
}
|
||||
|
||||
.create-task-area {
|
||||
top: -2.5rem;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.drag {
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@
|
|||
"yourTaskHasBeenApproved": "Your task <span class=\"notification-green notification-bold\"><%- taskText %></span> has been approved.",
|
||||
"thisTaskApproved": "This task was approved",
|
||||
"taskClaimed": "<%- userName %> has claimed the task <span class=\"notification-bold\"><%- taskText %></span>.",
|
||||
"taskNeedsWork": "<span class=\"notification-bold\"><%- managerName %></span> marked <span class=\"notification-bold\"><%- taskText %></span> as needing additional work.",
|
||||
"taskNeedsWork": "<span class=\"notification-bold\"><%- taskText %></span> was unchecked by <span class=\"notification-bold\"><%- managerName %></span>. Your rewards for completing the task were reverted.",
|
||||
"userHasRequestedTaskApproval": "<span class=\"notification-bold\"><%- user %></span> requests approval for <span class=\"notification-bold\"><%- taskName %></span>",
|
||||
"approve": "Approve",
|
||||
"approveTask": "Approve Task",
|
||||
|
|
@ -363,5 +363,6 @@
|
|||
"managerNotes": "Manager's Notes",
|
||||
"assignedDateOnly": "Assigned on <strong><%= date %></strong>",
|
||||
"assignedDateAndUser": "Assigned by <strong>@<%- username %></strong> on <strong><%= date %></strong>",
|
||||
"claimRewards": "Claim Rewards"
|
||||
"claimRewards": "Claim Rewards",
|
||||
"dayStart": "<strong>Day start</strong>: <%= startTime %>"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -415,8 +415,13 @@ api.getGroup = {
|
|||
}
|
||||
|
||||
// Instead of populate we make a find call manually because of https://github.com/Automattic/mongoose/issues/3833
|
||||
const leader = await User.findById(groupJson.leader).select(nameFields).exec();
|
||||
const leader = await User.findById(groupJson.leader).select(`${nameFields} preferences.timezoneOffset preferences.dayStart`).exec();
|
||||
if (leader) groupJson.leader = leader.toJSON({ minimize: true });
|
||||
if (groupJson.purchased.plan.planId) {
|
||||
groupJson.cron.timezoneOffset = leader.preferences.timezoneOffset;
|
||||
groupJson.cron.dayStart = leader.preferences.dayStart;
|
||||
}
|
||||
delete groupJson.leader.preferences;
|
||||
|
||||
res.respond(200, groupJson);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue