feat(ui): 界面样式调整。

This commit is contained in:
Ivan Li 2023-03-19 10:15:26 +08:00
parent f92883199c
commit 86d4ab6e6a
5 changed files with 51 additions and 51 deletions

View File

@ -1,7 +0,0 @@
.logo.vite:hover {
filter: drop-shadow(0 0 2em #747bff);
}
.logo.solid:hover {
filter: drop-shadow(0 0 2em #2f5d90);
}

View File

@ -1,12 +1,9 @@
import { createEffect, createSignal } from "solid-js";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";
import { invoke } from '@tauri-apps/api/tauri';
import { DisplayInfo } from './models/display-info.model';
import { DisplayInfoPanel } from './components/display-info-panel';
import { ScreenView } from './components/screen-view';
import { DisplayView } from './components/\u0016display-view';
function App() {
const [screenshots, setScreenshots] = createSignal<string[]>([]);
const [displays, setDisplays] = createSignal<DisplayInfo[]>([]);
createEffect(() => {
@ -15,32 +12,11 @@ function App() {
});
});
// createEffect(() => {
// take_all_display_screenshot();
// }, [displays]);
async function take_all_display_screenshot() {
console.log('take_all_display_screenshot');
displays().forEach((display) => {
invoke<string>('take_screenshot', {
displayId: display.id,
scaleFactor: display.scale_factor,
}).then((image) => {
setScreenshots((screenshots) => [...screenshots, image]);
});
});
}
return (
<div class="container">
<ol>
{displays().map((display) => {
return (
<li>
<DisplayInfoPanel display={display} />
<ScreenView displayId={display.id} />
</li>
);
return <DisplayView display={display} />;
})}
</ol>
</div>

View File

@ -0,0 +1,20 @@
import { Component } from 'solid-js';
import { DisplayInfo } from '../models/display-info.model';
import { DisplayInfoPanel } from './display-info-panel';
import { ScreenView } from './screen-view';
type DisplayViewProps = {
display: DisplayInfo;
};
export const DisplayView: Component<DisplayViewProps> = (props) => {
return (
<section class="relative">
<ScreenView displayId={props.display.id} />
<DisplayInfoPanel
display={props.display}
class="absolute bg-slate-50/10 top-1/4 left-1/4 rounded backdrop-blur w-1/3 min-w-fit text-black"
/>
</section>
);
};

View File

@ -1,4 +1,4 @@
import { Component, ParentComponent } from 'solid-js';
import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
import { DisplayInfo } from '../models/display-info.model';
type DisplayInfoItemProps = {
@ -7,32 +7,35 @@ type DisplayInfoItemProps = {
export const DisplayInfoItem: ParentComponent<DisplayInfoItemProps> = (props) => {
return (
<dl class="m-1 flex hover:bg-gray-100 gap-2 text-gray-700">
<dt class="uppercase w-1/3">{props.label}</dt>
<dd>{props.children}</dd>
<dl class="px-3 py-1 flex hover:bg-gray-100/50 gap-2 text-black rounded">
<dt class="uppercase w-1/2 select-all">{props.label}</dt>
<dd class="select-all">{props.children}</dd>
</dl>
);
};
type DisplayInfoPanelProps = {
display: DisplayInfo;
};
} & JSX.HTMLAttributes<HTMLElement>;
export const DisplayInfoPanel: Component<DisplayInfoPanelProps> = (props) => {
const [localProps, rootProps] = splitProps(props, ['display']);
return (
<section class="m-2">
<section {...rootProps} class={'m-2 flex flex-col gap-1 py-2 ' + rootProps.class}>
<DisplayInfoItem label="ID">
<code>{props.display.id}</code>
<code>{localProps.display.id}</code>
</DisplayInfoItem>
<DisplayInfoItem label="Position">
({props.display.x}, {props.display.y})
({localProps.display.x}, {localProps.display.y})
</DisplayInfoItem>
<DisplayInfoItem label="Size">
{props.display.width} x {props.display.height}
{localProps.display.width} x {localProps.display.height}
</DisplayInfoItem>
<DisplayInfoItem label="Scale Factor">
{localProps.display.scale_factor}
</DisplayInfoItem>
<DisplayInfoItem label="Scale Factor">{props.display.scale_factor}</DisplayInfoItem>
<DisplayInfoItem label="is Primary">
{props.display.is_primary ? 'True' : 'False'}
{localProps.display.is_primary ? 'True' : 'False'}
</DisplayInfoItem>
</section>
);

View File

@ -1,10 +1,17 @@
import { invoke } from '@tauri-apps/api';
import { listen } from '@tauri-apps/api/event';
import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
import {
Component,
createEffect,
createSignal,
JSX,
onCleanup,
splitProps,
} from 'solid-js';
type ScreenViewProps = {
displayId: number;
};
} & JSX.HTMLAttributes<HTMLImageElement>;
async function subscribeScreenshotUpdate(displayId: number) {
await invoke('subscribe_encoded_screenshot_updated', {
@ -13,19 +20,20 @@ async function subscribeScreenshotUpdate(displayId: number) {
}
export const ScreenView: Component<ScreenViewProps> = (props) => {
const [localProps, rootProps] = splitProps(props, ['displayId']);
const [image, setImage] = createSignal<string>();
createEffect(() => {
const unlisten = listen<{ base64_image: string; display_id: number }>(
'encoded-screenshot-updated',
(event) => {
if (event.payload.display_id === props.displayId) {
if (event.payload.display_id === localProps.displayId) {
setImage(event.payload.base64_image);
}
console.log(event.payload.display_id, props.displayId);
console.log(event.payload.display_id, localProps.displayId);
},
);
subscribeScreenshotUpdate(props.displayId);
subscribeScreenshotUpdate(localProps.displayId);
onCleanup(() => {
unlisten.then((unlisten) => {
@ -34,5 +42,5 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
});
});
return <img src={image()} class="object-contain" />;
return <img src={image()} class="object-contain" {...rootProps} />;
};