theluyuan/RWKV-Runner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve styles

Browse Source
This commit is contained in:
josc146 2023-11-20 20:16:55 +08:00
parent bbcc6b07b6
commit cd7a9896dc
5 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ConfigSelector.tsx
View File

@ -4,7 +4,7 @@ import { Dropdown, Option } from '@fluentui/react-components';
import commonStore from '../stores/commonStore'; import commonStore from '../stores/commonStore';
export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => { export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => {
return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }} return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
value={commonStore.getCurrentModelConfig().name} value={commonStore.getCurrentModelConfig().name}
selectedOptions={[commonStore.currentModelConfigIndex.toString()]} selectedOptions={[commonStore.currentModelConfigIndex.toString()]}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {

4
frontend/src/pages/Completion.tsx
View File

@ -29,8 +29,10 @@ const CompletionPanel: FC = observer(() => {
}; };
useEffect(() => { useEffect(() => {
if (inputRef.current) if (inputRef.current) {
inputRef.current.style.height = '100%'; inputRef.current.style.height = '100%';
inputRef.current.style.maxHeight = '100%';
}
scrollToBottom(); scrollToBottom();
}, []); }, []);

4
frontend/src/pages/Composition.tsx
View File

@ -82,8 +82,10 @@ const CompositionPanel: FC = observer(() => {
}; };
useEffect(() => { useEffect(() => {
if (inputRef.current) if (inputRef.current) {
inputRef.current.style.height = '100%'; inputRef.current.style.height = '100%';
inputRef.current.style.maxHeight = '100%';
}
scrollToBottom(); scrollToBottom();
if (playerRef.current && visualizerRef.current) { if (playerRef.current && visualizerRef.current) {

3
frontend/src/pages/PresetsManager/MessagesEditor.tsx
View File

@ -108,7 +108,8 @@ const MessagesEditor: FC = observer(() => {
style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}> style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
<ReOrderDotsVertical20Regular /> <ReOrderDotsVertical20Regular />
</Card> </Card>
<Dropdown style={{ minWidth: 0, borderRadius: 0 }} listbox={{ style: { minWidth: 0 } }} <Dropdown style={{ minWidth: 0, borderRadius: 0 }}
listbox={{ style: { minWidth: 'fit-content' } }}
value={t(item.role)!} value={t(item.role)!}
selectedOptions={[item.role]} selectedOptions={[item.role]}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {

10
frontend/src/pages/Settings.tsx
View File

@ -23,7 +23,7 @@ export const GeneralSettings: FC = observer(() => {
return <div className="flex flex-col gap-2"> return <div className="flex flex-col gap-2">
<Labeled label={t('Language')} flex spaceBetween content={ <Labeled label={t('Language')} flex spaceBetween content={
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }} <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
value={Languages[commonStore.settings.language]} value={Languages[commonStore.settings.language]}
selectedOptions={[commonStore.settings.language]} selectedOptions={[commonStore.settings.language]}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {
@ -43,7 +43,7 @@ export const GeneralSettings: FC = observer(() => {
{ {
commonStore.platform === 'windows' && commonStore.platform === 'windows' &&
<Labeled label={t('DPI Scaling')} flex spaceBetween content={ <Labeled label={t('DPI Scaling')} flex spaceBetween content={
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }} <Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
value={commonStore.settings.dpiScaling + '%'} value={commonStore.settings.dpiScaling + '%'}
selectedOptions={[commonStore.settings.dpiScaling.toString()]} selectedOptions={[commonStore.settings.dpiScaling.toString()]}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {
@ -89,7 +89,7 @@ export const AdvancedGeneralSettings: FC = observer(() => {
apiUrl: data.value apiUrl: data.value
}); });
}} /> }} />
<Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }} <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 'fit-content' } }}
value="..." selectedOptions={[]} expandIcon={null} value="..." selectedOptions={[]} expandIcon={null}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {
commonStore.setSettings({ commonStore.setSettings({
@ -140,7 +140,7 @@ export const AdvancedGeneralSettings: FC = observer(() => {
apiChatModelName: data.value apiChatModelName: data.value
}); });
}} /> }} />
<Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }} <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 'fit-content' } }}
value="..." selectedOptions={[]} expandIcon={null} value="..." selectedOptions={[]} expandIcon={null}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {
if (data.optionValue) { if (data.optionValue) {
@ -168,7 +168,7 @@ export const AdvancedGeneralSettings: FC = observer(() => {
apiCompletionModelName: data.value apiCompletionModelName: data.value
}); });
}} /> }} />
<Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 0 } }} <Dropdown style={{ minWidth: '33px' }} listbox={{ style: { minWidth: 'fit-content', minHeight: 0 } }}
value="..." selectedOptions={[]} expandIcon={null} value="..." selectedOptions={[]} expandIcon={null}
onOptionSelect={(_, data) => { onOptionSelect={(_, data) => {
if (data.optionValue) { if (data.optionValue) {