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>
</div>
<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" />
</div>
</template>
</transition-group>
</div>
</div>
</template>
@ -201,7 +200,7 @@ export default {
icon: 'fe-link',
drop: false,
canChoose: true
},
}
// {
// name: 'align-justify',
// type: 'alignjustify',

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

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

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

@ -182,30 +182,26 @@ export default {
'Execution plan proposed by the service provider',
'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',
'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':
'Please go to profile page to add money receiving method',
History: 'History',
'Log out': 'Log out',
'Proposals': 'Proposals',
Proposals: 'Proposals',
'Milestone(s)': 'Milestone(s)',
'Information': 'Information',
Information: 'Information',
'Operation Complete': 'Operation Complete',
'Wait for completion': 'Wait for completion',
'Mission complete': 'Mission complete',
'Wait for payment': 'Wait for payment',
'Wait for confirmation': 'Wait for confirmation',
'Confirm receipt': 'Confirm receipt',
'Ready': 'Ready',
Ready: 'Ready',
'Not available': 'Not available',
'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"
alt="user portrait"
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">{{
$t('Portrait')
@ -362,7 +366,11 @@
class="user-portrait-img"
id="personal-photo-operation-image"
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
title="Click to update"
@click="selectUserPhoto()"
@ -521,7 +529,7 @@
<div class="panel-table-content">
<span class="panel-table-label">{{ $t('On Freeleaps') }}</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>
</div>
</td>

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

@ -34,7 +34,8 @@
>{{ $t('Stay on Freeleaps') }}</label
>
<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 class="provider-delivered-projects-container">
@ -101,7 +102,8 @@
$t('Project delivering time')
}}</label>
<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>
</div>
<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">
{{ request.issuer_achievement.activeness.days_of_staying_on }}
{{$t('day(s)')}}</span
{{ $t('day(s)') }}</span
>
</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>
</div>
<span class="btn-start">{{$t('day(s)')}}</span>
<span class="btn-start">{{ $t('day(s)') }}</span>
</div>
</div>
</div>
@ -266,7 +266,7 @@
{{ $t('Total payment') }}:{{ summary.total_payment }} {{ summary.currency }}
</span>
<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>
</div>
</div>

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

@ -225,7 +225,14 @@
data-bs-parent="#collapse-project-invite-collaborator"
>
<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" />
</div>
</div>
@ -282,29 +289,45 @@
data-bs-parent="#collapse-project-milestone"
>
<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>
<td>
<div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Milestone') }}</span>
<span class="project-milestones-table-span">{{ milestone.index }}</span>
<span class="project-milestones-table-label">{{
$t('Milestone')
}}</span>
<span class="project-milestones-table-span">{{
milestone.index
}}</span>
</div>
</td>
<td>
<div class="project-milestones-table-content">
<span class="project-milestones-table-label">{{ $t('Description') }}</span>
<span class="project-milestones-table-span">{{ milestone.description }}</span>
<span class="project-milestones-table-label">{{
$t('Description')
}}</span>
<span class="project-milestones-table-span">{{
milestone.description
}}</span>
</div>
</td>
<td>
<div class="project-milestones-table-content">
<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>
</td>
<td>
<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">
{{ milestone.actual_paid }} / {{ milestone.expected_payment }}
{{ project.project.progress.payment_currency }}
@ -314,7 +337,9 @@
<td>
<div class="project-milestones-table-content">
<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>
</td>
<td>
@ -322,7 +347,9 @@
<span class="project-milestones-table-label">{{ $t('Action') }}</span>
<button
class="btn btn-link"
:disabled="isMilestoneActionButtonDisabled(project.project, milestone)"
:disabled="
isMilestoneActionButtonDisabled(project.project, milestone)
"
:hidden="isMilestoneActionButtonHidden(project.project, milestone)"
@click="handleMilestoneAction(project.project, milestone)"
>
@ -335,7 +362,7 @@
<tr v-if="this.qrCode.index === milestone.index">
<td colspan="6">
<div class="project-milestones-qrcode-content">
<img :src="this.qrCode.imageUrl" alt="freeleaps">
<img :src="this.qrCode.imageUrl" alt="freeleaps" />
<button
class="project-milestones-qrcode-button"
@click="handlePaymentAction(project.project, milestone)"
@ -359,7 +386,7 @@
aria-expanded="false"
aria-controls="collapse-project-code"
>
<div class="project-code-bar-container dashed-container">
<div class="project-code-bar-container dashed-container">
<div class="project-code-git-status">
<label class="project-item-label">{{ $t('Code Depot') }}</label>
<p class="project-item-text">{{ getGitStatus(project) }}</p>
@ -420,7 +447,7 @@
aria-expanded="false"
aria-controls="collapse-project-issue"
>
<div class="project-issue-bar-container dashed-container">
<div class="project-issue-bar-container dashed-container">
<div class="project-issue-open-issues">
<label class="project-item-label">{{ $t('Open issues') }}</label>
<p class="project-item-text">
@ -465,7 +492,9 @@
>
<div class="project-issue-description-container">
<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
class="project-issue-description-btn"
@click="
@ -479,10 +508,7 @@
{{ $t('Submit') }}
</button>
</div>
<textarea
type="text"
v-model="newIssueDescriptions[project_index]"
/>
<textarea type="text" v-model="newIssueDescriptions[project_index]" />
<!-- <div class="project-new-issue-action-container">
</div> -->
@ -533,16 +559,22 @@
>
<div class="project-issue-description-container">
<div class="project-issue-description">
<label class="project-item-label">{{ $t('Issue description') }}</label>
<label class="project-item-label">{{
$t('Issue description')
}}</label>
<button
:hidden="!showIssueActionButton(project.project, issue, 'Resolve')"
:hidden="
!showIssueActionButton(project.project, issue, 'Resolve')
"
class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 1)"
>
{{ $t('Resolve') }}
</button>
<button
:hidden="!showIssueActionButton(project.project, issue, 'Confirm')"
:hidden="
!showIssueActionButton(project.project, issue, 'Confirm')
"
class="project-issue-description-btn"
@click="setProjectIssueStatus(issue.id, 2)"
>
@ -592,12 +624,12 @@ import {
convertIntoToMilestoneStatus,
convertIntoToProjectIssueStatus
} from '@/types/index'
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
use([ CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent ]);
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
use([CanvasRenderer, LineChart, LegendComponent, GridComponent, TooltipComponent])
export default {
name: 'Workspace',
components: { VChart },
@ -629,9 +661,9 @@ export default {
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {color: 'rgba(63,73,255,0.1)'},
smooth: true,
symbol: 'none',
areaStyle: { color: 'rgba(63,73,255,0.1)' },
smooth: true,
symbol: 'none',
connectNulls: true
}
]
@ -1239,74 +1271,74 @@ export default {
}
.project-milestones-table {
border: 0;
border-collapse: collapse;
width: 100%;
border: 0;
border-collapse: collapse;
width: 100%;
.project-milestones-table-content {
padding: 12px;
text-align: left;
display: flex;
flex-direction: column;
.project-milestones-table-content {
padding: 12px;
text-align: left;
display: flex;
flex-direction: column;
.project-milestones-table-label {
font-size: 12px;
color: #666666;
line-height: 1;
margin-bottom: 3px;
}
.project-milestones-table-span {
font-size: 14px;
font-weight: bold;
color: #242424;
line-height: 1;
}
.btn-link {
padding: 0;
width: fit-content;
}
.project-milestones-table-label {
font-size: 12px;
color: #666666;
line-height: 1;
margin-bottom: 3px;
}
.project-milestones-table-span {
font-size: 14px;
font-weight: bold;
color: #242424;
line-height: 1;
}
.btn-link {
padding: 0;
width: fit-content;
}
}
.project-milestones-qrcode-content {
padding: 32px 12px;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 154px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
}
.project-milestones-qrcode-content {
padding: 32px 12px;
display: flex;
flex-direction: column;
align-items: center;
.project-milestones-qrcode-button {
padding: 2px 6px;
font-size: 14px;
color: $primary;
font-weight: bold;
border: 1px solid $primary;
background-color: #f3f6ff;
box-shadow: none;
border-radius: 2px;
}
}
img {
width: 154px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
}
tr {
border-bottom: 1px solid #e1e1e1;
.project-milestones-qrcode-button {
padding: 2px 6px;
font-size: 14px;
color: $primary;
font-weight: bold;
border: 1px solid $primary;
background-color: #F3F6FF;
box-shadow: none;
border-radius: 2px;
td:first-child {
.project-milestones-table-content {
padding-left: 24px;
}
}
tr {
border-bottom: 1px solid #e1e1e1;
td:first-child {
.project-milestones-table-content {
padding-left: 24px;
}
}
td:last-child {
.project-milestones-table-content {
padding-right: 24px;
}
td:last-child {
.project-milestones-table-content {
padding-right: 24px;
}
}
}
}
.project-milestones-containter {
@extend .container;
@ -1412,7 +1444,7 @@ export default {
align-items: center;
margin-bottom: 12px;
label {
flex: 1
flex: 1;
}
.project-issue-description-btn {
@ -1444,7 +1476,7 @@ export default {
}
.project-issue-header {
display: flex
display: flex;
}
.project-issue-title {
@ -1472,7 +1504,9 @@ export default {
width: 6vw;
}
.inline-accordion-body {padding: 0 !important}
.inline-accordion-body {
padding: 0 !important;
}
.project-invite-collaborator-containter {
border-bottom: 1px solid #e1e1e1;
@ -1482,7 +1516,9 @@ export default {
// color: $primary;
// background-color: #F3F6FF;
padding: 12px !important;
&::after {display: none}
&::after {
display: none;
}
}
}
@ -1491,7 +1527,7 @@ export default {
text-align: center;
@extend .initiate-button;
color: $primary;
background-color: #F3F6FF;
background-color: #f3f6ff;
}
.project-invite-collaborator-form-container {
@ -1501,7 +1537,7 @@ export default {
padding: 0 12px;
border-radius: 3px;
align-items: center;
border: 1px solid #E7E8EB;
border: 1px solid #e7e8eb;
&:focus-within {
border: 1px solid #1748f8;
}
@ -1517,7 +1553,7 @@ export default {
width: 16px;
height: 16px;
padding: 3px;
background: #F3F3F5;
background: #f3f3f5;
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">
<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>

2
frontend/src/utils/common/index.js
View File

@ -1,3 +1,3 @@
export { ValueChecker } from './checker'
export { DateUtils } from './dateUtils'
export { OIDUtils } from './oidUtils'
export { OIDUtils } from './oidUtils'