PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-02-03 00:33:57 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

design update

Browse Source
This commit is contained in:
wataru 2023-01-14 17:58:57 +09:00
parent 71e0acc823
commit 3acdebfa37
3 changed files with 77 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/demo/src/000_index.tsx
View File

@ -37,10 +37,25 @@ const App = () => {
return ( return (
<div className="body"> <div className="body">
<div className="body-row"> <div className="body-row split-6-4">
<div className="body-top-title"> <div className="body-top-title">
Voice Changer Setting Voice Changer Setting
</div> </div>
<div className="body-top-title-belongings">
<div className="belonging-item">
<a className="link" href="https://github.com/w-okada/voice-changer" target="_blank" rel="noopener noreferrer">
<img src="./assets/icons/github.svg" />
<span>github</span>
</a>
</div>
<div className="belonging-item">
<a className="link" href="https://zenn.dev/wok/articles/s01_vc001_top" target="_blank" rel="noopener noreferrer">
<img src="./assets/icons/help-circle.svg" />
<span>manual</span>
</a>
</div>
</div>
</div> </div>
{clearRow} {clearRow}
{voiceChangerSetting} {voiceChangerSetting}

6
client/demo/src/101_server_setting.tsx
View File

@ -68,6 +68,10 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
props.clientState.serverSetting.loadModel() props.clientState.serverSetting.loadModel()
} }
const uploadButtonClassName = props.clientState.serverSetting.isUploading ? "body-button-disabled" : "body-button"
const uploadButtonAction = props.clientState.serverSetting.isUploading ? () => { } : onModelUploadClicked
const uploadButtonLabel = props.clientState.serverSetting.isUploading ? "wait..." : "upload"
return ( return (
<> <>
<div className="body-row split-3-3-4 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
@ -115,7 +119,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
{props.clientState.serverSetting.isUploading ? `uploading.... ${props.clientState.serverSetting.uploadProgress}%` : ""} {props.clientState.serverSetting.isUploading ? `uploading.... ${props.clientState.serverSetting.uploadProgress}%` : ""}
</div> </div>
<div className="body-button-container"> <div className="body-button-container">
<div className="body-button" onClick={onModelUploadClicked}>upload</div> <div className={uploadButtonClassName} onClick={uploadButtonAction}>{uploadButtonLabel}</div>
</div> </div>
</div> </div>
</> </>

61
client/demo/src/css/App.css
View File

@ -63,6 +63,21 @@ body {
} }
.body-row { .body-row {
} }
.split-6-4 {
display: flex;
width: 100%;
justify-content: center;
margin: 1px 0px 1px 0px;
& > div:nth-child(1) {
left: 0px;
width: 60%;
}
& > div:nth-child(2) {
left: 60%;
width: 40%;
}
}
.split-4-6 { .split-4-6 {
display: flex; display: flex;
width: 100%; width: 100%;
@ -218,6 +233,25 @@ body {
.body-top-title { .body-top-title {
font-size: 3rem; font-size: 3rem;
} }
.body-top-title-belongings{
display: flex;
align-items: flex-end;
justify-content: flex-start;
& > div {
margin-left:10px;
margin-right:10px;
}
&>.belonging-item{
&>.link{
text-decoration: none;
&>span{
font-size: small;
}
}
}
}
.body-section-title { .body-section-title {
font-size: 1.5rem; font-size: 1.5rem;
color: rgb(51, 49, 49); color: rgb(51, 49, 49);
@ -246,28 +280,45 @@ body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
& > div {
margin-left:5px;
margin-right:5px;
padding-left:20px;
padding-right:20px;
}
.body-button { .body-button {
user-select: none; user-select: none;
border: solid 1px #333; border: solid 1px #999;
border-radius: 2px; border-radius: 2px;
padding: 2px;
cursor:pointer; cursor:pointer;
vertical-align:middle; vertical-align:middle;
&:hover{
border: solid 1px #000;
}
}
.body-button-disabled {
user-select: none;
border: solid 1px #999;
border-radius: 2px;
vertical-align:middle;
background:#ddd;
} }
.body-button-active { .body-button-active {
user-select: none; user-select: none;
border: solid 1px #333; border: solid 1px #333;
border-radius: 2px; border-radius: 2px;
padding: 2px;
background:#ada; background:#ada;
} }
.body-button-stanby { .body-button-stanby {
user-select: none; user-select: none;
border: solid 1px #333; border: solid 1px #999;
border-radius: 2px; border-radius: 2px;
padding: 2px;
background:#aba; background:#aba;
cursor:pointer; cursor:pointer;
&:hover{
border: solid 1px #000;
}
} }
} }
.body-select-container { .body-select-container {