Skip to content

Commit

Permalink
Update Translation.razor
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeepBeepBopBop
BeepBeepBopBop committed Dec 19, 2024
1 parent bf3a9e4 commit f8ae21a
Showing 1 changed file with 103 additions and 111 deletions.
214 changes: 103 additions & 111 deletions LM-Kit-Maestro/UI/Razor/Components/Translation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,47 @@
@inject IClipboardHandler ClipboardHandler

<div id="container" class="dark">
<div class="card">

<div id="translation-container">
<div id="translation-header">
<div class="language-select">
<MudSelect @bind-Value="TranslationViewModel.InputLanguage">
@foreach (var language in GetAvailableLanguages(true))
<div id="translation-container">
<div id="translation-header">
<div>
<MudSelect Underline="false" class="language-select" @bind-Value="TranslationViewModel.InputLanguage">
@foreach (var language in GetAvailableLanguages(true))
{
if (language == Language.Undefined)
{
if (language == Language.Undefined)
{
<MudSelectItem Value="Language.Undefined">Automatically detect</MudSelectItem>
}
else
{
<MudSelectItem Value="@language">@language</MudSelectItem>
}
<MudSelectItem Value="Language.Undefined">Automatically detect</MudSelectItem>
}
</MudSelect>
</div>

<button class="chatActionButton material-icons small">
swap_horiz
</button>

<div>
<MudSelect class="language-select" @bind-Value="TranslationViewModel.OutputLanguage">
@foreach (var language in GetAvailableLanguages(false))
else
{
<MudSelectItem Value="@language">@language</MudSelectItem>

}
</MudSelect>
</div>
}
</MudSelect>
</div>

<button style="background-color: red" class="chatActionButton material-icons small">
swap_horiz
</button>

<div>
<MudSelect Underline="false" class="language-select" @bind-Value="TranslationViewModel.OutputLanguage">
@foreach (var language in GetAvailableLanguages(false))
{
<MudSelectItem Value="@language">@language</MudSelectItem>

}
</MudSelect>
</div>

@* <MudSelect class="language-select" @bind-Value="TranslationViewModel.Language">
@* <MudSelect class="language-select" @bind-Value="TranslationViewModel.Language">
@foreach (var language in Enum.GetValues<Language>())
{
<MudSelectItem Value="@language">@language</MudSelectItem>
}
</MudSelect> *@

@*
@*
<div class="language-select">
<label for="input-language">Input Language:</label>
<select id="input-language" @bind="TranslationViewModel.Language" class="multi-column-dropdown">
Expand All @@ -54,135 +52,129 @@
</select>
</div> *@
</div>

<div id="translation-body">
<div id="translation-input">
<textarea @bind="TranslationViewModel.InputText"
@bind:event="oninput"
placeholder="Enter text here..."></textarea>
</div>
</div>

<div id="translation-output">
<textarea @bind="TranslationViewModel.LatestResult" placeholder="Translation will appear here..." readonly></textarea>
</div>
<div id="translation-body">
<div id="translation-input">
<textarea @bind="TranslationViewModel.InputText"
@bind:event="oninput"
placeholder="Enter text here..."></textarea>
</div>

<div id="translation-footer">
<div id="translation-output">
<textarea @bind="TranslationViewModel.LatestResult" placeholder="Translation will appear here..." readonly></textarea>
</div>
</div>

<div id="translation-footer">
</div>
</div>
</div>

<style>
#loaderDiv {
display: flex;
height: 72px;
background-color: transparent;
align-items: center;
align-content: center;
justify-content: center;
display: flex;
height: 72px;
background-color: transparent;
align-items: center;
align-content: center;
justify-content: center;
}
#container {
width: 100%;
padding-inline: 8px;
padding-block: 8px;
}
.card {
background-color: var(--Surface);
width: 100%;
padding: 20px;
border: 1px solid var(--Surface4);
border-radius: 4px;
width: 100%;
padding-inline: 8px;
padding-block: 8px;
}
#result {
margin-block: 16px;
background-color: var(--Surface15);
color: white;
min-height: 72px;
margin-top: 10px;
padding: 10px;
margin-block: 16px;
background-color: var(--Surface15);
color: white;
min-height: 72px;
margin-top: 10px;
padding: 10px;
}
/* #result:hover {
background-color: var(--Surface3);
} */
background-color: var(--Surface3);
} */
#translation-container {
display: flex;
border: 1px solid var(--Outline);
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-rows: 40px auto auto;
display: flex;
border: 1px solid var(--OutlineVariant);
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-rows: 40px auto auto;
}
#translation-input, #translation-output {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
}
#translation-header {
display: flex;
justify-content: space-between;
display: flex;
border-bottom: 1px solid var(--OutlineVariant);
justify-content: space-between;
}
#translation-body {
grid-template-columns: 1fr 1fr;
display: grid;
padding: 40px;
grid-template-columns: 1fr 1fr;
display: grid;
padding: 40px;
}
#translation-input {
border-right: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#translation-output {
background-color: #f9f9f9;
background-color: #f9f9f9;
}
#translation-output textarea {
border: none;
color: white;
}
#translation-output textarea {
border: none;
color: white;
}
#translation-output textarea:focus {
outline: none;
}
#translation-output textarea:focus {
outline: none;
}
/* .language-select {
margin-bottom: 10px;
}
margin-bottom: 10px;
}
.language-select label {
font-weight: bold;
margin-right: 10px;
} */
.language-select label {
font-weight: bold;
margin-right: 10px;
} */
textarea {
width: 100%;
height: 100%;
resize: none;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
width: 100%;
height: 100%;
resize: none;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}
textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}
.language-select {
width: 180px;
background-color: red;
width: 180px;
vertical-align: central;
}
</style>

Expand Down

0 comments on commit f8ae21a

Please sign in to comment.