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

Merge branch 'main' of https://dev.azure.com/freeleaps/freeleaps2-frontend/_git/freeleaps2-frontend

Browse Source
This commit is contained in:
jetli 2024-06-18 17:17:27 +08:00
commit 0435dd00e6
4 changed files with 172 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/headers/HeaderGuest.vue
View File

@ -1,12 +1,7 @@
<template>
<div class="header-container">
<div class="header-content">
<img
class="company-logo"
alt="freeleaps logo"
src="@/assets/freeleaps.png"
@click="gotoFrontdoor()"
/>
<img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" @click="gotoFrontdoor()" />
<!-- <div class="content-area">
<span class="company-slogan"
>Freeleaps: A trustworthy platform to find a software development partner</span
@ -16,7 +11,9 @@
<button class="public-site-button" @click="gotoAbout()">About</button>
<button class="public-site-button" @click="gotoBlogs()">Blogs</button>
<button class="public-site-button" @click="gotoCareer()">Career</button>
<button class="public-site-button" @click="gotoContact()">Contact</button>
<button class="public-site-button" @click="gotoContact()">
{{ getContactText }}
</button>
</div>
</div>
</div>
@ -25,7 +22,22 @@
export default {
name: 'HeaderGuest',
components: {},
computed: {},
computed: {
getContactText() {
if (this.getRegion === "CN") {
return "联系我们"
}
return "Contact"
},
getRegion() {
// To be consistent with Region definition
// For now, region is only China and non-China
if (window.location.href.includes('localhost') || window.location.href.includes('com.cn')) {
return "CN"
}
return "Other"
}
},
methods: {
gotoFrontdoor() {
this.mnx_navToFrontDoor()
@ -52,6 +64,7 @@ export default {
height: 100%;
background: white;
max-width: 100%;
.header-content {
display: flex;
align-items: center;
@ -83,6 +96,7 @@ export default {
.public-sites {
display: flex;
align-items: center;
.public-site-button {
@extend .btn;
@extend .btn-link;

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

@ -1,54 +1,28 @@
<template>
<div class="header-container">
<div class="header-content">
<div
class="information-bar"
@click="gotoMessages"
:class="activePath == 'message' ? 'active' : ''"
>
<div class="information-bar" @click="gotoMessages" :class="activePath == 'message' ? 'active' : ''">
<img alt="freeleaps logo" src="@/assets/message.png" />
</div>
<div class="navigation-container" role="navigation">
<button
class="navigation-item"
@click="gotoWorkspace"
:class="activePath == 'Workspace' ? 'active' : ''"
>
<button class="navigation-item" @click="gotoWorkspace" :class="activePath == 'Workspace' ? 'active' : ''">
<svg-icon icon="workspace" class-name="icon" />
Workspace
</button>
<button
class="navigation-item"
@click="gotoRequests"
:class="activePath == 'Requests' ? 'active' : ''"
>
<button class="navigation-item" @click="gotoRequests" :class="activePath == 'Requests' ? 'active' : ''">
<svg-icon icon="requests" class-name="icon" />
Requests
</button>
<button
class="navigation-item"
@click="gotoProviders"
:class="activePath == 'Providers' ? 'active' : ''"
>
<button class="navigation-item" @click="gotoProviders" :class="activePath == 'Providers' ? 'active' : ''">
<svg-icon icon="providers" class-name="icon" />
Providers
</button>
<button
class="navigation-item"
@click="gotoIssueRequest"
:class="activePath == 'Post' ? 'active' : ''"
>
<button class="navigation-item" @click="gotoIssueRequest" :class="activePath == 'Post' ? 'active' : ''">
<svg-icon icon="post" class-name="icon" />
Post
</button>
<div class="form-check form-switch header-switch-container">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="personal-earning-now-checkbox"
disabled
/>
<input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" disabled />
<label class="form-check-label" for="personal-earning-now-checkbox">
<span>Providing service</span>
</label>
@ -58,13 +32,8 @@
</div>
</div>
<div class="profile-container">
<img
alt="freeleaps logo"
data-bs-toggle="dropdown"
aria-expanded="false"
id="accountButton"
src="@/assets/profile.png"
/>
<img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton"
src="@/assets/profile.png" />
<ul class="dropdown-menu" aria-labelledby="accountButton">
<li>
<button class="account-menu-button" @click="gotoProfile">Profile</button>
@ -162,6 +131,7 @@ export default {
height: 100%;
background: #f8fafc;
max-width: 100%;
.header-content {
display: flex;
align-items: center;
@ -182,10 +152,12 @@ export default {
justify-content: center;
position: relative;
background-color: white;
img {
width: 24px;
height: 24px;
}
&::after {
content: '';
display: block;
@ -197,6 +169,7 @@ export default {
top: 0;
background-color: #f44837;
}
&.active {
border: 1px solid $primary;
}
@ -204,6 +177,7 @@ export default {
.profile-container {
position: relative;
img {
width: 56px;
}
@ -213,15 +187,18 @@ export default {
display: flex;
align-items: center;
justify-content: center;
.navigation-item {
@extend .btn;
@extend .btn-link;
color: #6e7387;
text-decoration: none;
margin: 0 30px;
&:hover {
color: $primary;
}
&.active {
color: $primary;
font-weight: 500;
@ -238,7 +215,7 @@ export default {
left: 0;
bottom: -20px;
font-size: 12px;
color: #3D455f;
color: #3d455f;
white-space: nowrap;
padding: 2px 5px;
}

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

@ -265,7 +265,9 @@
id="personal-photo-operation-image"
src="@/assets/profile.png"
/>
<label class="profile-item-label" for="personal-photo-operation-image">Portrait</label>
<label class="profile-item-label" for="personal-photo-operation-image"
>Portrait</label
>
</div>
</button>
<button
@ -373,9 +375,18 @@
>
<div class="collapse-item-container">
<div class="collapse-item-editor">
<freeleaps-editor v-model:content="personalOperation.self_intro.content_html" :disabled="!personalOperation.self_intro.is_editing" />
<freeleaps-editor
v-model:content="personalOperation.self_intro.content_html"
:disabled="!personalOperation.self_intro.is_editing"
/>
<div class="btn-group-container">
<button v-if="!personalOperation.self_intro.is_editing" class="btn btn-link" @click="personalOperation.self_intro.is_editing = true">Edit</button>
<button
v-if="!personalOperation.self_intro.is_editing"
class="btn btn-link"
@click="personalOperation.self_intro.is_editing = true"
>
Edit
</button>
<button
v-if="personalOperation.self_intro.is_editing"
class="btn btn-link"
@ -386,8 +397,18 @@
>
Templates
</button>
<button v-if="personalOperation.self_intro.is_editing" @click="updateSelfIntro()" class="btn btn-link">Update</button>
<button v-if="personalOperation.self_intro.is_editing" @click="stopEdittingSelfintro($event)" class="btn btn-link">
<button
v-if="personalOperation.self_intro.is_editing"
@click="updateSelfIntro()"
class="btn btn-link"
>
Update
</button>
<button
v-if="personalOperation.self_intro.is_editing"
@click="stopEdittingSelfintro($event)"
class="btn btn-link"
>
Cancel
</button>
</div>
@ -402,10 +423,20 @@
>
<div class="collapse-checkbox-container">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="personal-earning-now-checkbox" v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)" :disabled="!paymentOperation.ready_to_receive_money">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="personal-earning-now-checkbox"
v-model="personalOperation.accepting_request"
@click="updateAcceptingRequest($event)"
:disabled="!paymentOperation.ready_to_receive_money"
/>
<label class="form-check-label" for="personal-earning-now-checkbox">
<span>I want to be a service provider and earn money</span>
<span v-if="personalOperation.show_stripe_status" style="color: red">* Stripe account onboarding is not completed.</span>
<span v-if="personalOperation.show_stripe_status" style="color: red"
>* Stripe account onboarding is not completed.</span
>
</label>
</div>
<div class="flex-1" />
@ -427,14 +458,24 @@
</div>
</div>
<div class="collapse-item-container">
<label v-if="Is_Wechat_QR_Code_Payment()" class="collapse-item-uploader" for="qr-uploader">
<label
v-if="Is_Wechat_QR_Code_Payment()"
class="collapse-item-uploader"
for="qr-uploader"
>
<img
v-if="paymentOperation.wechat_qr_code_img.data"
class="uploader-img-show"
:src="paymentOperation.wechat_qr_code_img.data"
/>
<img v-if="!paymentOperation.wechat_qr_code_img.data" class="uploader-img-btn" src="@/assets/images/qr-code.png" />
<span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn">Upload QR code to receive payment</span>
<img
v-if="!paymentOperation.wechat_qr_code_img.data"
class="uploader-img-btn"
src="@/assets/images/qr-code.png"
/>
<span v-if="!paymentOperation.wechat_qr_code_img.data" class="upload-text-btn"
>Upload QR code to receive payment</span
>
</label>
<input
v-if="Is_Wechat_QR_Code_Payment()"
@ -447,10 +488,14 @@
/>
</div>
<div v-if="Is_Stripe_Payment()" class="collapse-item-container">
<span>Have you linked your strip account?</span><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
<span>Have you linked your strip account?</span
><button class="btn btn-link" @click="visitStripe()">Visit Stripe</button>
</div>
<div v-if="personalOperation.accepting_request" class="collapse-item-container">
<span>You are a service provider now. Please review your self-intro to reflect your skills to deliver projects.</span>
<span
>You are a service provider now. Please review your self-intro to reflect your skills to
deliver projects.</span
>
</div>
</div>
</div>
@ -597,7 +642,10 @@
<div class="panel-table-content">
<span class="panel-table-label">Delivering time</span>
<span class="panel-table-span">
{{ userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day }} days
{{
userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
}}
days
</span>
</div>
</td>
@ -1229,7 +1277,7 @@ export default {
padding: 12px;
// overflow: hidden;
border-radius: 12px;
box-shadow: 0px 0px 24px 0px #D4D3E380;
box-shadow: 0px 0px 24px 0px #d4d3e380;
background-color: white;
margin-bottom: 20px;
@ -1247,7 +1295,7 @@ export default {
.panel-item-container {
width: calc(25% - 9px);
border: 1px dashed #1748F8;
border: 1px dashed #1748f8;
background-color: white;
padding: 0 12px;
height: 46px;
@ -1258,13 +1306,13 @@ export default {
outline: none;
&:hover {
background-color: #F3F6FF;
background-color: #f3f6ff;
}
// &.active {
// background-color: #F3F6FF;
// }
&[aria-expanded=true] {
background-color: #F3F6FF;
&[aria-expanded='true'] {
background-color: #f3f6ff;
}
.profile-item-container {
@ -1291,13 +1339,22 @@ export default {
color: #666666;
line-height: 1;
}
.profile-item-span {font-size: 14px; font-weight: bold; color: #242424; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; line-height: 1}
.profile-item-span {
font-size: 14px;
font-weight: bold;
color: #242424;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
line-height: 1;
}
}
}
}
.collapse-content-container {
margin: 12px -12px -12px -12px;
border-top: 1px solid #E7E8EB;
border-top: 1px solid #e7e8eb;
.collapse-item-container {
padding: 32px;
@ -1314,7 +1371,7 @@ export default {
width: 100%;
position: relative;
.btn-group-container{
.btn-group-container {
position: absolute;
right: 32px;
top: 10px;
@ -1323,55 +1380,55 @@ export default {
}
.collapse-item-input {
height: 37px;
width: 350px;
border: 1px solid #E1E1E1;
border-radius: 3px;
margin: 0 8px;
box-shadow: none;
padding: 0 8px;
display: flex;
align-items: center;
position: relative;
height: 37px;
width: 350px;
border: 1px solid #e1e1e1;
border-radius: 3px;
margin: 0 8px;
box-shadow: none;
padding: 0 8px;
display: flex;
align-items: center;
position: relative;
&:focus-within {
border: 1px solid #1748F8;
}
input {
flex: 1;
height: 100%;
border: none;
outline: none;
box-shadow: none;
}
.error-message {
color: #916AD4;
font-size: 16px;
position: absolute;
left: 0;
bottom: -26px;
margin: 0;
}
.enter-icon {
width: 13px;
height: 13px;
margin-left: 12px;
background-color: #E7E9ED;
border-radius: 3px;
padding: 2px;
}
.collapse-item-currency {
font-size: 14px;
font-weight: bold;
color: #0D1637;
margin-left: 12px;
}
&:focus-within {
border: 1px solid #1748f8;
}
input {
flex: 1;
height: 100%;
border: none;
outline: none;
box-shadow: none;
}
.error-message {
color: #916ad4;
font-size: 16px;
position: absolute;
left: 0;
bottom: -26px;
margin: 0;
}
.enter-icon {
width: 13px;
height: 13px;
margin-left: 12px;
background-color: #e7e9ed;
border-radius: 3px;
padding: 2px;
}
.collapse-item-currency {
font-size: 14px;
font-weight: bold;
color: #0d1637;
margin-left: 12px;
}
}
.collapse-item-uploader {
width: 150px;
height: 150px;
@ -1382,7 +1439,9 @@ export default {
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {opacity: .78;}
&:hover {
opacity: 0.78;
}
.uploader-img-btn {
width: 50px;
@ -1405,13 +1464,13 @@ export default {
padding: 12px;
display: flex;
align-items: center;
border-bottom: 1px solid #E7E8EB
border-bottom: 1px solid #e7e8eb;
}
}
.panel-table-container {
border: 0;
border-collapse: collapse;
border-collapse: collapse;
width: 100%;
.panel-table-content {

8
frontend/src/pages/user/messages/Home.vue
View File

@ -8,8 +8,8 @@
class="conversation-container"
:class="{
selected:
current_thread?.conversation?.information?.conversation_id ===
conversation.summary.last_message.conversation_id
current_thread?.conversation?.information?.id ===
conversation.summary.last_message?.conversation_id
}"
@click="selectConversation(conversation)"
>
@ -21,11 +21,11 @@
{{ conversation.summary.contact.last_name }}
</span>
<span class="conversation-last-update-date">{{
getDateFromFulltimeString(conversation.summary.last_message.create_time)
getDateFromFulltimeString(conversation.summary.last_message?.create_time)
}}</span>
</div>
<div class="conversation-summary-highlight-container">
{{ conversation.summary.last_message.message_body }}
{{ conversation.summary.last_message?.message_body }}
</div>
</div>
</div>