PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-01-23 13:35:12 +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 (
<div className="body">
<div className="body-row">
<div className="body-row split-6-4">
<div className="body-top-title">
Voice Changer Setting
</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>
{clearRow}
{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()
}
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 (
<>
<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}%` : ""}
</div>
<div className="body-button-container">
<div className="body-button" onClick={onModelUploadClicked}>upload</div>
<div className={uploadButtonClassName} onClick={uploadButtonAction}>{uploadButtonLabel}</div>
</div>
</div>
</>

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

@ -63,6 +63,21 @@ body {
}
.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 {
display: flex;
width: 100%;
@ -218,6 +233,25 @@ body {
.body-top-title {
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 {
font-size: 1.5rem;
color: rgb(51, 49, 49);
@ -246,28 +280,45 @@ body {
display: flex;
flex-direction: row;
align-items: center;
& > div {
margin-left:5px;
margin-right:5px;
padding-left:20px;
padding-right:20px;
}
.body-button {
user-select: none;
border: solid 1px #333;
border: solid 1px #999;
border-radius: 2px;
padding: 2px;
cursor:pointer;
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 {
user-select: none;
border: solid 1px #333;
border-radius: 2px;
padding: 2px;
background:#ada;
}
.body-button-stanby {
user-select: none;
border: solid 1px #333;
border: solid 1px #999;
border-radius: 2px;
padding: 2px;
background:#aba;
cursor:pointer;
&:hover{
border: solid 1px #000;
}
}
}
.body-select-container {