Skip to content

Commit

Permalink
feat: basic theming
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimlimjustin
kimlimjustin committed Apr 14, 2024
1 parent f29d240 commit 2463f7f
Show file tree
Hide file tree
Showing 34 changed files with 1,733 additions and 1,254 deletions.
28 changes: 28 additions & 0 deletions src-tauri/Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src-tauri/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ bincode = "1.3"
zip = "0.6.2"
tauri-plugin-clipboard-manager = "2.1.0-beta.0"
tauri-plugin-os = "2.0.0-beta.3"
dirs="5.0.1"

[target."cfg(any(target_os = \"windows\", target_os = \"macos\"))".dependencies]
window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy" }
Expand Down
7 changes: 5 additions & 2 deletions src-tauri/capabilities/main.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"permissions": [
"path:default",
"event:default",
"window:default",
"app:default",
"resources:default",
"menu:default",
Expand All @@ -16,6 +15,10 @@
"os:allow-hostname",
"os:allow-os-type",
"os:allow-platform",
"fs:allow-watch"
"fs:allow-watch",
"window:allow-start-dragging",
"window:allow-minimize",
"window:allow-maximize",
"window:allow-close"
]
}
2 changes: 1 addition & 1 deletion src-tauri/gen/schemas/capabilities.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"main-capability":{"identifier":"main-capability","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","tray:default","window:allow-set-title","os:allow-arch","os:allow-hostname","os:allow-os-type","os:allow-platform","fs:allow-watch"]}}
{"main-capability":{"identifier":"main-capability","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["path:default","event:default","app:default","resources:default","menu:default","tray:default","window:allow-set-title","os:allow-arch","os:allow-hostname","os:allow-os-type","os:allow-platform","fs:allow-watch","window:allow-start-dragging","window:allow-minimize","window:allow-maximize","window:allow-close"]}}
9 changes: 4 additions & 5 deletions src-tauri/src/storage.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ use std::fs;
use std::path::Path;
use std::str;
use tauri::path::PathResolver;
use dirs;

#[derive(serde::Serialize, Debug)]
pub struct StorageData {
Expand All @@ -11,8 +12,7 @@ pub struct StorageData {

#[tauri::command]
pub fn write_data(key: &str, value: serde_json::Value) {
// let storage_dir = Path::new(&PathResolver::local_data_dir().unwrap()).join("Xplorer");
let storage_dir = Path::new("C:\\Users\\User\\AppData\\Roaming\\Xplorer");
let storage_dir = Path::new(&dirs::data_local_dir().unwrap()).join("Xplorer");
if let Err(e) = fs::create_dir_all(&storage_dir) {
eprintln!("Failed to create dirs: {:?}", e);
}
Expand All @@ -25,8 +25,7 @@ pub fn write_data(key: &str, value: serde_json::Value) {

#[tauri::command]
pub fn read_data(key: &str) -> Result<StorageData, String> {
// let storage_dir = Path::new(&PathResolver::local_data_dir().unwrap()).join("Xplorer");
let storage_dir = Path::new("C:\\Users\\User\\AppData\\Roaming\\Xplorer");
let storage_dir = Path::new(&dirs::data_local_dir().unwrap()).join("Xplorer");

let mut status = true;
let data: String;
Expand Down Expand Up @@ -55,7 +54,7 @@ pub fn read_data(key: &str) -> Result<StorageData, String> {

#[tauri::command]
pub fn delete_storage_data(key: String) {
let storage_dir = Path::new("C:\\Users\\User\\AppData\\Roaming\\Xplorer");
let storage_dir = Path::new(&dirs::data_local_dir().unwrap()).join("Xplorer");


if let Ok(_) = fs::remove_file(storage_dir.join(key)) {}
Expand Down
6 changes: 4 additions & 2 deletions src-tauri/tauri.conf.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@
"windows": [
{
"title": "Xplorer",
"width": 800,
"height": 600
"width": 1000,
"height": 600,
"decorations": false,
"transparent": true
}
],
"security": {
Expand Down
44 changes: 26 additions & 18 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ import Header from "./Components/Header";
import LoadingBar from "./Components/LoadingBar";
import Properties from "./Components/Properties";
import Sidebar from "./Components/Sidebar";
import Infobar from "./Components/Infobar";

import { setActiveTab } from "./Store/ActionCreators/TabActionCreators";
import { IAppState } from "./Store/Reducers";
import "./Public/style.scss";
import { ThemedDiv } from "./Components/Theme";

const App = () => {
const dispatch = useDispatch();
Expand Down Expand Up @@ -40,26 +42,32 @@ const App = () => {
const scaledOpacity = Math.round(opacity * 255); // Scales to 0-255
return scaledOpacity.toString(16);
};
const styles = {
fontFamily: config.fontFamily,
fontSize: `${config.fontSize}px`,
opacity: opacityToHex(config.opacity),
"--mainbox-transparency": config.mainBoxTransparency,
"--topbar-transparency": config.topbarTransparency,
"--sidebar-transparency": config.sidebarTransparency,
};

return (
<div
id="app-container"
style={{
backgroundColor: `${config?.background ?? "#000000"}${opacityToHex(config?.opacity ?? 1)}`,
}}
>
<div className="container">
<Sidebar />
<main className="main">
<Header />
<LoadingBar isLoading={false} />
<MainView currentDirectory={activeTab.path} />
</main>
</div>
<SettingsView />
<ContextMenu />
<Properties />
</div>
<ThemedDiv componentName="root">
<ThemedDiv componentName="appContainer" id="app-container" style={styles}>
<ThemedDiv componentName="container" className="container">
<Sidebar />
<ThemedDiv componentName="main" className="main">
<Header />
<LoadingBar isLoading={false} />
<MainView currentDirectory={activeTab.path} />
<Infobar />
</ThemedDiv>
</ThemedDiv>
<SettingsView />
<ContextMenu />
<Properties />
</ThemedDiv>
</ThemedDiv>
);
};

Expand Down
40 changes: 24 additions & 16 deletions src/Components/File/DetailFile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,39 @@
import React, { MouseEvent } from "react";
import FileMetaData from "../../Typings/fileMetaData";

import { ThemedButton, ThemedSpan } from "../Theme";
import { useSelector } from "react-redux";
import { IAppState } from "../../Store/Reducers";
export interface IDetailFileProps {
metadata: FileMetaData;
handleFileRightClick: (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, path: string) => void;
handleFileDoubleClick: (isDir: boolean, dirName: string) => void;
handleFileSingleClick: (dirName: string) => void;
}

const DetailFile = ({ metadata, handleFileRightClick, handleFileDoubleClick }: IDetailFileProps): JSX.Element => {
const DetailFile = ({ metadata, handleFileRightClick, handleFileDoubleClick, handleFileSingleClick }: IDetailFileProps): JSX.Element => {
const selectedFiles = useSelector<IAppState, IAppState["selection"]["selected"]>((state) => state.selection.selected);

return (
<button
className="detailfile-container"
type="button"
<ThemedButton
componentName={selectedFiles.includes(metadata.file_path) ? "fileDetailViewSelected" : "fileDetailView"}
className="detail-view"
onContextMenu={(e) => handleFileRightClick(e, metadata.file_path)}
onDoubleClick={() => handleFileDoubleClick(!!metadata.is_dir, metadata.file_path)}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
}}
onClick={() => handleFileSingleClick(metadata.file_path)}
>
<p>{metadata.basename}</p>
<p>{metadata.created ? new Date(metadata.created.secs_since_epoch * 1000).toDateString() : null}</p>
<p>{metadata.size}</p>
<p>{metadata.file_type}</p>
</button>
<ThemedSpan className="file-detail-view-basename" componentName="fileDetailViewBaseName">
{metadata.basename}
</ThemedSpan>
<ThemedSpan className="file-detail-view-timeline" componentName="fileDetailViewTimeline">
{metadata.last_accessed ? new Date(metadata.last_accessed.secs_since_epoch * 1000).toDateString() : null}
</ThemedSpan>
<ThemedSpan className="file-detail-view-size" componentName="fileDetailViewSize">
{metadata.size}
</ThemedSpan>
<ThemedSpan className="file-detail-view-filetype" componentName="fileDetailViewFileType">
{metadata.file_type}
</ThemedSpan>
</ThemedButton>
);
};

Expand Down
10 changes: 6 additions & 4 deletions src/Components/File/GridFile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import React, { MouseEvent } from "react";
import FileMetaData from "../../Typings/fileMetaData";
import { ThemedButton } from "../Theme";

export interface IGridFileProps {
size: number;
metadata: FileMetaData;
handleFileRightClick: (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, path: string) => void;
handleFileDoubleClick: (isDir: boolean, dirName: string) => void;
handleFileSingleClick: (dirName: string) => void;
}

const GridFile = ({ size, metadata, handleFileRightClick, handleFileDoubleClick }: IGridFileProps): JSX.Element => {
const GridFile = ({ size, metadata, handleFileRightClick, handleFileDoubleClick, handleFileSingleClick }: IGridFileProps): JSX.Element => {
return (
<button
type="button"
<ThemedButton
componentName="fileGrid"
onContextMenu={(e) => handleFileRightClick(e, metadata.file_path)}
onDoubleClick={() => handleFileDoubleClick(!!metadata.is_dir, metadata.file_path)}
style={{ width: size, minHeight: size }}
className="gridfile-container"
>
<span>Icon</span>
<p style={{ wordWrap: "break-word", margin: 0 }}>{metadata.basename}</p>
</button>
</ThemedButton>
);
};

Expand Down
40 changes: 35 additions & 5 deletions src/Components/File/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { openFileRequest, openFilePreview } from "../../Store/ActionCreators/Fil
import { setActiveTab, updateTab } from "../../Store/ActionCreators/TabActionCreators";
import { IAppState } from "../../Store/Reducers";
import FileMetaData from "../../Typings/fileMetaData";
import { updateSelection } from "../../Store/ActionCreators/SelectionActionCreators";

export type FileDisplayMode = "GridLarge" | "GridMedium" | "GridSmall" | "Detail";

Expand All @@ -21,6 +22,10 @@ export const File = ({ mode, metadata }: IFileProps): JSX.Element => {
const dispatch = useDispatch();
const activeTab = useSelector<IAppState, IAppState["tabs"]["activeTab"]>((state) => state.tabs.activeTab);

const handleFileSingleClick = (filePath: string) => {
dispatch(updateSelection({ selected: [filePath] }));
};

const handleFileRightClick = (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, path: string) => {
e.preventDefault();
dispatch(openFilePreview(path));
Expand All @@ -39,24 +44,49 @@ export const File = ({ mode, metadata }: IFileProps): JSX.Element => {
name: filePath.split("\\").pop() || "",
}),
);
dispatch(setActiveTab({ name: filePath.split("\\").pop() || "", path: getStandardPath(filePath) }));
dispatch(setActiveTab({ name: filePath.split("\\").pop() || "", path: getStandardPath(filePath), id: activeTab.id }));
};

switch (mode) {
case "GridLarge":
return (
<GridFile size={96} metadata={metadata} handleFileRightClick={handleFileRightClick} handleFileDoubleClick={handleFileDoubleClick} />
<GridFile
size={96}
metadata={metadata}
handleFileRightClick={handleFileRightClick}
handleFileDoubleClick={handleFileDoubleClick}
handleFileSingleClick={handleFileSingleClick}
/>
);
case "GridMedium":
return (
<GridFile size={72} metadata={metadata} handleFileRightClick={handleFileRightClick} handleFileDoubleClick={handleFileDoubleClick} />
<GridFile
size={72}
metadata={metadata}
handleFileRightClick={handleFileRightClick}
handleFileDoubleClick={handleFileDoubleClick}
handleFileSingleClick={handleFileSingleClick}
/>
);
case "GridSmall":
return (
<GridFile size={48} metadata={metadata} handleFileRightClick={handleFileRightClick} handleFileDoubleClick={handleFileDoubleClick} />
<GridFile
size={48}
metadata={metadata}
handleFileRightClick={handleFileRightClick}
handleFileDoubleClick={handleFileDoubleClick}
handleFileSingleClick={handleFileSingleClick}
/>
);
case "Detail":
return <DetailFile metadata={metadata} handleFileRightClick={handleFileRightClick} handleFileDoubleClick={handleFileDoubleClick} />;
return (
<DetailFile
metadata={metadata}
handleFileRightClick={handleFileRightClick}
handleFileDoubleClick={handleFileDoubleClick}
handleFileSingleClick={handleFileSingleClick}
/>
);
default:
return <div>File mode not supported</div>;
}
Expand Down
Loading

0 comments on commit 2463f7f

Please sign in to comment.