freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

re-styling

Browse Source
This commit is contained in:
Mike Liao 2024-07-03 14:05:22 -07:00
parent d699077d45
commit 7d1b110f34
10 changed files with 172 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/FreeleapsEditor.vue
View File

@ -98,12 +98,11 @@
</button> </button>
</div> </div>
<div class="editor-item"> <div class="editor-item">
<input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction"> <input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction" />
<svg-icon icon="msg-enter" class-name="item-enter-icon" /> <svg-icon icon="msg-enter" class-name="item-enter-icon" />
</div> </div>
</template> </template>
</transition-group> </transition-group>
</div> </div>
</div> </div>
</template> </template>
@ -201,7 +200,7 @@ export default {
icon: 'fe-link', icon: 'fe-link',
drop: false, drop: false,
canChoose: true canChoose: true
}, }
// { // {
// name: 'align-justify', // name: 'align-justify',
// type: 'alignjustify', // type: 'alignjustify',

18
frontend/src/headers/HeaderUser.vue
View File

@ -15,7 +15,7 @@
:class="activePath == 'Workspace' ? 'active' : ''" :class="activePath == 'Workspace' ? 'active' : ''"
> >
<svg-icon icon="workspace" class-name="icon" /> <svg-icon icon="workspace" class-name="icon" />
{{$t('Workspace')}} {{ $t('Workspace') }}
</button> </button>
<button <button
class="navigation-item" class="navigation-item"
@ -23,7 +23,7 @@
:class="activePath == 'Requests' ? 'active' : ''" :class="activePath == 'Requests' ? 'active' : ''"
> >
<svg-icon icon="requests" class-name="icon" /> <svg-icon icon="requests" class-name="icon" />
{{$t('Requests')}} {{ $t('Requests') }}
</button> </button>
<button <button
class="navigation-item" class="navigation-item"
@ -31,7 +31,7 @@
:class="activePath == 'Providers' ? 'active' : ''" :class="activePath == 'Providers' ? 'active' : ''"
> >
<svg-icon icon="providers" class-name="icon" /> <svg-icon icon="providers" class-name="icon" />
{{$t('Providers')}} {{ $t('Providers') }}
</button> </button>
<button <button
class="navigation-item" class="navigation-item"
@ -39,7 +39,7 @@
:class="activePath == 'Post' ? 'active' : ''" :class="activePath == 'Post' ? 'active' : ''"
> >
<svg-icon icon="post" class-name="icon" /> <svg-icon icon="post" class-name="icon" />
{{$t('Post')}} {{ $t('Post') }}
</button> </button>
<div class="form-check form-switch header-switch-container"> <div class="form-check form-switch header-switch-container">
<input <input
@ -50,10 +50,10 @@
disabled disabled
/> />
<label class="form-check-label" for="personal-earning-now-checkbox"> <label class="form-check-label" for="personal-earning-now-checkbox">
<span>{{$t('Providing service')}}</span> <span>{{ $t('Providing service') }}</span>
</label> </label>
<div class="header-switch-desc"> <div class="header-switch-desc">
{{$t('Please go to profile page to add money receiving method')}} {{ $t('Please go to profile page to add money receiving method') }}
</div> </div>
</div> </div>
<laguage-switch class="laguage-switch" /> <laguage-switch class="laguage-switch" />
@ -68,17 +68,17 @@
/> />
<ul class="dropdown-menu" aria-labelledby="accountButton"> <ul class="dropdown-menu" aria-labelledby="accountButton">
<li> <li>
<button class="account-menu-button" @click="gotoProfile">{{$t('Profile')}}</button> <button class="account-menu-button" @click="gotoProfile">{{ $t('Profile') }}</button>
</li> </li>
<li> <li>
<button class="account-menu-button" @click="gotoHistory">{{$t('History')}}</button> <button class="account-menu-button" @click="gotoHistory">{{ $t('History') }}</button>
</li> </li>
<li> <li>
<hr class="dropdown-divider" /> <hr class="dropdown-divider" />
</li> </li>
<li> <li>
<button class="account-menu-button" @click="signout"> <button class="account-menu-button" @click="signout">
{{$t('Log out')}} ({{ userIdentityNote }}) {{ $t('Log out') }} ({{ userIdentityNote }})
</button> </button>
</li> </li>
</ul> </ul>

26
frontend/src/lang/en.js
View File

@ -182,30 +182,26 @@ export default {
'Execution plan proposed by the service provider', 'Execution plan proposed by the service provider',
'Proceed to workspace': 'Proceed to workspace', 'Proceed to workspace': 'Proceed to workspace',
Workspace: 'Workspace',
Requests: 'Requests',
Providers: 'Providers',
Post: 'Post',
'Workspace': 'Workspace',
'Requests': 'Requests',
'Providers': 'Providers',
'Post': 'Post',
'Providing service': 'Providing service', 'Providing service': 'Providing service',
'Please go to profile page to add money receiving method': 'Please go to profile page to add money receiving method', 'Please go to profile page to add money receiving method':
'History': 'History', 'Please go to profile page to add money receiving method',
History: 'History',
'Log out': 'Log out', 'Log out': 'Log out',
'Proposals': 'Proposals', Proposals: 'Proposals',
'Milestone(s)': 'Milestone(s)', 'Milestone(s)': 'Milestone(s)',
'Information': 'Information', Information: 'Information',
'Operation Complete': 'Operation Complete', 'Operation Complete': 'Operation Complete',
'Wait for completion': 'Wait for completion', 'Wait for completion': 'Wait for completion',
'Mission complete': 'Mission complete', 'Mission complete': 'Mission complete',
'Wait for payment': 'Wait for payment', 'Wait for payment': 'Wait for payment',
'Wait for confirmation': 'Wait for confirmation', 'Wait for confirmation': 'Wait for confirmation',
'Confirm receipt': 'Confirm receipt', 'Confirm receipt': 'Confirm receipt',
'Ready': 'Ready', Ready: 'Ready',
'Not available': 'Not available', 'Not available': 'Not available',
'Please input issue description': 'Please input issue description', 'Please input issue description': 'Please input issue description',
'day(s)': 'day(s)', 'day(s)': 'day(s)'
} }

14
frontend/src/pages/user/account/UserProfile.vue
View File

@ -271,7 +271,11 @@
class="profile-photo" class="profile-photo"
alt="user portrait" alt="user portrait"
id="personal-photo-operation-image" id="personal-photo-operation-image"
:src="userProfile.account.basic.photo.base64 ? userProfile.account.basic.photo.base64 : profileUrl" :src="
userProfile.account.basic.photo.base64
? userProfile.account.basic.photo.base64
: profileUrl
"
/> />
<label class="profile-item-label" for="personal-photo-operation-image">{{ <label class="profile-item-label" for="personal-photo-operation-image">{{
$t('Portrait') $t('Portrait')
@ -362,7 +366,11 @@
class="user-portrait-img" class="user-portrait-img"
id="personal-photo-operation-image" id="personal-photo-operation-image"
alt="user portrait" alt="user portrait"
:src="userProfile.account.basic.photo.base64 ? userProfile.account.basic.photo.base64 : profileUrl" :src="
userProfile.account.basic.photo.base64
? userProfile.account.basic.photo.base64
: profileUrl
"
v-tooltip v-tooltip
title="Click to update" title="Click to update"
@click="selectUserPhoto()" @click="selectUserPhoto()"
@ -521,7 +529,7 @@
<div class="panel-table-content"> <div class="panel-table-content">
<span class="panel-table-label">{{ $t('On Freeleaps') }}</span> <span class="panel-table-label">{{ $t('On Freeleaps') }}</span>
<span class="panel-table-span"> <span class="panel-table-span">
{{ userProfile.achievemnt.activeness.days_of_staying_on }} {{$t('day(s)')}} {{ userProfile.achievemnt.activeness.days_of_staying_on }} {{ $t('day(s)') }}
</span> </span>
</div> </div>
</td> </td>

6
frontend/src/pages/user/providers/Home.vue
View File

@ -34,7 +34,8 @@
>{{ $t('Stay on Freeleaps') }}</label >{{ $t('Stay on Freeleaps') }}</label
> >
<span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps"> <span class="provider-stay-on-freeleaps-span" id="provider-stay-on-freeleaps">
{{ provider.activeness_achievement.days_of_staying_on }} {{$t('day(s)')}}</span {{ provider.activeness_achievement.days_of_staying_on }}
{{ $t('day(s)') }}</span
> >
</div> </div>
<div class="provider-delivered-projects-container"> <div class="provider-delivered-projects-container">
@ -101,7 +102,8 @@
$t('Project delivering time') $t('Project delivering time')
}}</label> }}</label>
<span class="dd-project-span" id="delivery-time-per-project"> <span class="dd-project-span" id="delivery-time-per-project">
{{ provider.provider_deliveries.delivering_time_per_project_in_day }} {{$t('day(s)')}} {{ provider.provider_deliveries.delivering_time_per_project_in_day }}
{{ $t('day(s)') }}
</span> </span>
</div> </div>
<div class="dd-project-container"> <div class="dd-project-container">

2
frontend/src/pages/user/requests/Home.vue
View File

@ -119,7 +119,7 @@
> >
<span class="issuer-achievement-stay-content-text"> <span class="issuer-achievement-stay-content-text">
{{ request.issuer_achievement.activeness.days_of_staying_on }} {{ request.issuer_achievement.activeness.days_of_staying_on }}
{{$t('day(s)')}}</span {{ $t('day(s)') }}</span
> >
</div> </div>
</div> </div>

4
frontend/src/pages/user/requests/Propose.vue
View File

@ -199,7 +199,7 @@
/> />
<label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label> <label :for="`stage-duration-content-${index}`">{{ $t('Duration') }}</label>
</div> </div>
<span class="btn-start">{{$t('day(s)')}}</span> <span class="btn-start">{{ $t('day(s)') }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -266,7 +266,7 @@
{{ $t('Total payment') }}:{{ summary.total_payment }} {{ summary.currency }} {{ $t('Total payment') }}:{{ summary.total_payment }} {{ summary.currency }}
</span> </span>
<span id="summary-total-duration-content"> <span id="summary-total-duration-content">
{{ $t('Total duration') }}:{{ summary.total_duration_in_days }} {{$t('day(s)')}} {{ $t('Total duration') }}:{{ summary.total_duration_in_days }} {{ $t('day(s)') }}
</span> </span>
</div> </div>
</div> </div>

106
frontend/src/pages/user/workspace/Home.vue
View File

@ -225,7 +225,14 @@
data-bs-parent="#collapse-project-invite-collaborator" data-bs-parent="#collapse-project-invite-collaborator"
> >
<div class="project-invite-collaborator-form-container"> <div class="project-invite-collaborator-form-container">
<input type="text" v-model="newInviteCollaborator[project_index]" :placeholder="$t('Input E-mail to invite other')" @keydown.enter="inviteCollaborator(project.project_id, newInviteCollaborator[project_index])"> <input
type="text"
v-model="newInviteCollaborator[project_index]"
:placeholder="$t('Input E-mail to invite other')"
@keydown.enter="
inviteCollaborator(project.project_id, newInviteCollaborator[project_index])
"
/>
<svg-icon icon="msg-enter" class-name="project-invite-enter" /> <svg-icon icon="msg-enter" class-name="project-invite-enter" />
</div> </div>
</div> </div>
@ -282,29 +289,45 @@
data-bs-parent="#collapse-project-milestone" data-bs-parent="#collapse-project-milestone"
> >
<table class="project-milestones-table"> <table class="project-milestones-table">
<tbody v-for="milestone in project.project.progress.milestones" :key="milestone.index" :id="'project-milestone-' + milestone.index"> <tbody
v-for="milestone in project.project.progress.milestones"
:key="milestone.index"
:id="'project-milestone-' + milestone.index"
>
<tr> <tr>
<td> <td>
<div class="project-milestones-table-content"> <div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Milestone') }}</span> <span class="project-milestones-table-label">{{
<span class="project-milestones-table-span">{{ milestone.index }}</span> $t('Milestone')
}}</span>
<span class="project-milestones-table-span">{{
milestone.index
}}</span>
</div> </div>
</td> </td>
<td> <td>
<div class="project-milestones-table-content"> <div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Description') }}</span> <span class="project-milestones-table-label">{{
<span class="project-milestones-table-span">{{ milestone.description }}</span> $t('Description')
}}</span>
<span class="project-milestones-table-span">{{
milestone.description
}}</span>
</div> </div>
</td> </td>
<td> <td>
<div class="project-milestones-table-content"> <div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Status') }}</span> <span class="project-milestones-table-label">{{ $t('Status') }}</span>
<span class="project-milestones-table-span">{{ fromIntToMilestoneStatus(milestone.status) }}</span> <span class="project-milestones-table-span">{{
fromIntToMilestoneStatus(milestone.status)
}}</span>
</div> </div>
</td> </td>
<td> <td>
<div class="project-milestones-table-content"> <div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Payment') }}</span> <span class="project-milestones-table-label">{{
$t('Payment')
}}</span>
<span class="project-milestones-table-span"> <span class="project-milestones-table-span">
{{ milestone.actual_paid }} / {{ milestone.expected_payment }} {{ milestone.actual_paid }} / {{ milestone.expected_payment }}
{{ project.project.progress.payment_currency }} {{ project.project.progress.payment_currency }}
@ -314,7 +337,9 @@
<td> <td>
<div class="project-milestones-table-content"> <div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Update') }}</span> <span class="project-milestones-table-label">{{ $t('Update') }}</span>
<span class="project-milestones-table-span">{{ getDateFromFulltimeString(milestone.update_time) }}</span> <span class="project-milestones-table-span">{{
getDateFromFulltimeString(milestone.update_time)
}}</span>
</div> </div>
</td> </td>
<td> <td>
@ -322,7 +347,9 @@
<span class="project-milestones-table-label">{{ $t('Action') }}</span> <span class="project-milestones-table-label">{{ $t('Action') }}</span>
<button <button
class="btn btn-link" class="btn btn-link"
:disabled="isMilestoneActionButtonDisabled(project.project, milestone)" :disabled="
isMilestoneActionButtonDisabled(project.project, milestone)
"
:hidden="isMilestoneActionButtonHidden(project.project, milestone)" :hidden="isMilestoneActionButtonHidden(project.project, milestone)"
@click="handleMilestoneAction(project.project, milestone)" @click="handleMilestoneAction(project.project, milestone)"
> >
@ -335,7 +362,7 @@
<tr v-if="this.qrCode.index === milestone.index"> <tr v-if="this.qrCode.index === milestone.index">
<td colspan="6"> <td colspan="6">
<div class="project-milestones-qrcode-content"> <div class="project-milestones-qrcode-content">
<img :src="this.qrCode.imageUrl" alt="freeleaps"> <img :src="this.qrCode.imageUrl" alt="freeleaps" />
<button <button
class="project-milestones-qrcode-button" class="project-milestones-qrcode-button"
@click="handlePaymentAction(project.project, milestone)" @click="handlePaymentAction(project.project, milestone)"
@ -465,7 +492,9 @@
> >
<div class="project-issue-description-container"> <div class="project-issue-description-container">
<div class="project-issue-description"> <div class="project-issue-description">
<label class="project-item-label">{{ $t('New issue description') }}</label> <label class="project-item-label">{{
$t('New issue description')
}}</label>
<button <button
class="project-issue-description-btn" class="project-issue-description-btn"
@click=" @click="
@ -479,10 +508,7 @@
{{ $t('Submit') }} {{ $t('Submit') }}
</button> </button>
</div> </div>
<textarea <textarea type="text" v-model="newIssueDescriptions[project_index]" />
type="text"
v-model="newIssueDescriptions[project_index]"
/>
<!-- <div class="project-new-issue-action-container"> <!-- <div class="project-new-issue-action-container">
</div> --> </div> -->
@ -533,16 +559,22 @@
> >
<div class="project-issue-description-container"> <div class="project-issue-description-container">
<div class="project-issue-description"> <div class="project-issue-description">
<label class="project-item-label">{{ $t('Issue description') }}</label> <label class="project-item-label">{{
$t('Issue description')
}}</label>
<button <button
:hidden="!showIssueActionButton(project.project, issue, 'Resolve')" :hidden="
!showIssueActionButton(project.project, issue, 'Resolve')
"
class="project-issue-description-btn" class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 1)" @click="setProjectIssueStatus(issue.id, 1)"
> >
{{ $t('Resolve') }} {{ $t('Resolve') }}
</button> </button>
<button <button
:hidden="!showIssueActionButton(project.project, issue, 'Confirm')" :hidden="
!showIssueActionButton(project.project, issue, 'Confirm')
"
class="project-issue-description-btn" class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 2)" @click="setProjectIssueStatus(issue.id, 2)"
> >
@ -592,12 +624,12 @@ import {
convertIntoToMilestoneStatus, convertIntoToMilestoneStatus,
convertIntoToProjectIssueStatus convertIntoToProjectIssueStatus
} from '@/types/index' } from '@/types/index'
import { use } from 'echarts/core'; import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'; import { LineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'; import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'; import VChart from 'vue-echarts'
use([ CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent ]); use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
export default { export default {
name: 'Workspace', name: 'Workspace',
components: { VChart }, components: { VChart },
@ -629,7 +661,7 @@ export default {
{ {
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line', type: 'line',
areaStyle: {color: 'rgba(63,73,255,0.1)'}, areaStyle: { color: 'rgba(63,73,255,0.1)' },
smooth: true, smooth: true,
symbol: 'none', symbol: 'none',
connectNulls: true connectNulls: true
@ -1286,7 +1318,7 @@ export default {
color: $primary; color: $primary;
font-weight: bold; font-weight: bold;
border: 1px solid $primary; border: 1px solid $primary;
background-color: #F3F6FF; background-color: #f3f6ff;
box-shadow: none; box-shadow: none;
border-radius: 2px; border-radius: 2px;
} }
@ -1306,7 +1338,7 @@ export default {
} }
} }
} }
} }
.project-milestones-containter { .project-milestones-containter {
@extend .container; @extend .container;
@ -1412,7 +1444,7 @@ export default {
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 12px;
label { label {
flex: 1 flex: 1;
} }
.project-issue-description-btn { .project-issue-description-btn {
@ -1444,7 +1476,7 @@ export default {
} }
.project-issue-header { .project-issue-header {
display: flex display: flex;
} }
.project-issue-title { .project-issue-title {
@ -1472,7 +1504,9 @@ export default {
width: 6vw; width: 6vw;
} }
.inline-accordion-body {padding: 0 !important} .inline-accordion-body {
padding: 0 !important;
}
.project-invite-collaborator-containter { .project-invite-collaborator-containter {
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
@ -1482,7 +1516,9 @@ export default {
// color: $primary; // color: $primary;
// background-color: #F3F6FF; // background-color: #F3F6FF;
padding: 12px !important; padding: 12px !important;
&::after {display: none} &::after {
display: none;
}
} }
} }
@ -1491,7 +1527,7 @@ export default {
text-align: center; text-align: center;
@extend .initiate-button; @extend .initiate-button;
color: $primary; color: $primary;
background-color: #F3F6FF; background-color: #f3f6ff;
} }
.project-invite-collaborator-form-container { .project-invite-collaborator-form-container {
@ -1501,7 +1537,7 @@ export default {
padding: 0 12px; padding: 0 12px;
border-radius: 3px; border-radius: 3px;
align-items: center; align-items: center;
border: 1px solid #E7E8EB; border: 1px solid #e7e8eb;
&:focus-within { &:focus-within {
border: 1px solid #1748f8; border: 1px solid #1748f8;
} }
@ -1517,7 +1553,7 @@ export default {
width: 16px; width: 16px;
height: 16px; height: 16px;
padding: 3px; padding: 3px;
background: #F3F3F5; background: #f3f3f5;
border-radius: 3px; border-radius: 3px;
} }
} }

2
frontend/src/pages/user/workspace/requestManage/ReviewProposal.vue
View File

@ -52,7 +52,7 @@
> >
<div class="execution-duration-containter" id="execution-duration-containter"> <div class="execution-duration-containter" id="execution-duration-containter">
<span class="execution-duration-span" id="execution-duration-span"> <span class="execution-duration-span" id="execution-duration-span">
{{ proposal.duration_in_day }} {{$t('day(s)')}}</span {{ proposal.duration_in_day }} {{ $t('day(s)') }}</span
> >
</div> </div>
</div> </div>