Skip to content

Commit

Permalink
remove color dependecy
Browse files Browse the repository at this point in the history
smart search cleanup

update colors

repair icons
  • Loading branch information
0-don committed Apr 28, 2024
1 parent a10b48c commit 951372a
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 123 deletions.
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,12 @@
},
"dependencies": {
"@tauri-apps/api": "^1.5.3",
"color-convert": "^2.0.1",
"dayjs": "^1.11.10",
"solid-icons": "^1.1.0",
"solid-js": "^1.8.16"
},
"devDependencies": {
"@tauri-apps/cli": "^1.5.11",
"@types/color-convert": "^2.0.3",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
Expand Down
108 changes: 44 additions & 64 deletions src-tauri/src/service/clipboard.rs
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ use crate::connection;
use alloc::borrow::Cow;
use arboard::ImageData;
use entity::clipboard::{self, ActiveModel, Model};
use migration::IntoIndexColumn;
use sea_orm::{
ActiveModelTrait, ColumnTrait, DbErr, EntityTrait, PaginatorTrait, QueryFilter, QueryOrder,
QuerySelect, QueryTrait, Set,
Expand Down Expand Up @@ -49,78 +48,60 @@ pub async fn get_clipboards_db(
) -> Result<Vec<Model>, DbErr> {
let db = connection::establish_connection().await?;

let mut query = clipboard::Entity::find();

// filter to get only pinned entries
if let Some(starred) = star {
query = query.filter(clipboard::Column::Star.eq(starred));
}

// filter to get only images
if let Some(img) = img {
query = query.filter(clipboard::Column::Type.eq("image"));
}

// smart search
if let Some(content) = search {

// display text entries
let filter = if content == "txt" || content == "text" {
clipboard::Column::Content.contains(&content)
.or(clipboard::Column::Type.eq("text"))

// display image entries
} else if content == "img" || content == "image" {
clipboard::Column::Content.contains(&content)
.or(clipboard::Column::Type.eq("image"))

// display link entries
} else if content == "lnk" || content == "link" {
clipboard::Column::Content.contains(&content)
.or(clipboard::Column::Type.eq("link"))

// display color entries
} else if content == "clr" || content == "color" {
clipboard::Column::Content.contains(&content)
.or(clipboard::Column::Type.eq("hex"))
.or(clipboard::Column::Type.eq("rgb"))
} else if content == "hex" {
clipboard::Column::Content.contains(&content)
.or(clipboard::Column::Type.eq("hex"))
} else if content == "rgb" {
clipboard::Column::Content.contains(&content)
.or(clipboard::Column::Type.eq("rgb"))

// use default search
} else {
clipboard::Column::Content.contains(&content)
};

query = query.filter(filter)
.order_by_desc(clipboard::Column::Content.starts_with(&content));

} else {
// order the results by creation time by default
query = query.order_by_desc(clipboard::Column::Id);
}

query = query.offset(cursor).limit(10);

let model = query.all(&db).await?;
let model = clipboard::Entity::find()
.apply_if(star, |query, starred| {
query.filter(clipboard::Column::Star.eq(starred))
})
.apply_if(search, |query, search| {
let filter = match search.as_str() {
"txt" | "text" => clipboard::Column::Content
.contains(search)
.or(clipboard::Column::Type.eq("text")),

"img" | "image" => clipboard::Column::Content
.contains(search)
.or(clipboard::Column::Type.eq("image")),

"lnk" | "link" => clipboard::Column::Content
.contains(search)
.or(clipboard::Column::Type.eq("link")),

"clr" | "color" | "colour" => clipboard::Column::Content
.contains(search)
.or(clipboard::Column::Type.eq("hex"))
.or(clipboard::Column::Type.eq("rgb")),

"hex" => clipboard::Column::Content
.contains(search)
.or(clipboard::Column::Type.eq("hex")),

"rgb" => clipboard::Column::Content
.contains(search)
.or(clipboard::Column::Type.eq("rgb")),

_ => clipboard::Column::Content.contains(search),
};
query.filter(filter)
})
.apply_if(img, |query, _img| {
query.filter(clipboard::Column::Type.eq("image"))
})
.offset(cursor)
.limit(10)
.order_by_desc(clipboard::Column::Id)
.all(&db)
.await?;

let parsed_model: Vec<Model> = model
.into_iter()
.map(|mut m| {
if let Some(blob) = &m.blob {
if let Some(blob) = m.blob.take() {
let base64_string = base64::encode_config(blob, base64::STANDARD);
m.base64 = Some(format!("data:image/png;base64,{}", base64_string));
m.blob = None;
}

// Safely truncate content if it's longer than 100 characters
if let Some(content) = &m.content {
if content.chars().count() > 100 {
// Take the first 100 characters, and collect them back into a String
let truncated = content.chars().take(100).collect::<String>();
m.content = Some(truncated);
}
Expand All @@ -132,7 +113,6 @@ pub async fn get_clipboards_db(

Ok(parsed_model)
}

pub async fn star_clipboard_db(id: i32, star: bool) -> Result<bool, DbErr> {
let db = connection::establish_connection().await?;

Expand Down
24 changes: 6 additions & 18 deletions src/components/pages/app/Clipboards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { Clips } from "../../../@types";
import clippy from "../../../assets/clippy.png";
import ClipboardStore from "../../../store/ClipboardStore";
import HotkeyStore from "../../../store/HotkeyStore";
import { rgbCompatible } from "../../../utils/colors";
import { formatBytes } from "../../../utils/helpers";
import { hsvToRgbString, hwbToRgbString } from "../../../utils/convertors";

dayjs.extend(utc);
dayjs.extend(relativeTime);
Expand Down Expand Up @@ -58,7 +58,7 @@ export const Clipboards: Component<ClipboardsProps> = ({}) => {
}}
class={`${
clipboard.star ? "text-yellow-400 dark:text-yellow-300" : "hidden text-zinc-700"
} z-10 h-2/4 w-8 py-2 text-xs hover:text-yellow-400 group-hover:block dark:text-white dark:hover:text-yellow-300`}
} z-10 hover:text-yellow-400 group-hover:block dark:text-white dark:hover:text-yellow-300`}
/>
<IoTrashOutline
onClick={async (e) => {
Expand All @@ -67,7 +67,7 @@ export const Clipboards: Component<ClipboardsProps> = ({}) => {
setClipboards((prev) => prev.filter((o) => o.id !== id));
}
}}
class="hidden h-2/4 w-8 py-2 text-xs text-zinc-700 hover:text-red-600 group-hover:block dark:text-white dark:hover:text-red-600"
class="hidden text-zinc-700 hover:text-red-600 group-hover:block dark:text-white dark:hover:text-red-600"
/>
</>
);
Expand Down Expand Up @@ -135,23 +135,13 @@ export const Clipboards: Component<ClipboardsProps> = ({}) => {
{type === "hex" && (
<div
class="h-5 w-5 rounded-md border border-solid border-zinc-400 dark:border-black"
style={{
"background-color": `${content?.includes("#") ? `${content}` : `#${content}`}`,
}}
style={{ "background-color": `${content?.includes("#") ? `${content}` : `#${content}`}` }}
/>
)}
{type === "rgb" && (
<div
class="h-5 w-5 rounded-md border border-solid border-zinc-400 dark:border-black"
style={{
"background-color": `${
content?.includes("hsv(")
? hsvToRgbString(content)
: content?.includes("hwb(")
? hwbToRgbString(content)
: content
}`,
}}
style={{ "background-color": `${rgbCompatible(content)}` }}
/>
)}
<Show when={globalHotkeyEvent()}>
Expand Down Expand Up @@ -179,9 +169,7 @@ export const Clipboards: Component<ClipboardsProps> = ({}) => {
<div class="text-left text-xs text-zinc-400">{dayjs.utc(created_date!).fromNow()}</div>
</div>
</div>
<div class="absolute right-0 top-0 h-full w-full">
<div class="flex h-full flex-col items-end justify-start">{IconFunctions(clipboard)}</div>
</div>
<div class="flex w-[3.25rem] flex-col items-end justify-between">{IconFunctions(clipboard)}</div>
</div>
<hr class="border-zinc-400 dark:border-zinc-700" />
</button>
Expand Down
103 changes: 103 additions & 0 deletions src/utils/colors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
export function rgbCompatible(color?: string | null) {
if (color?.includes("hsv")) return hsvToRgbString(color);
if (color?.includes("hwb")) return hwbToRgbString(color);
return color;
}

export function hsvToRgbString(hsvString: string): string {
// Parse HSV values from input string
const hsvRegex = /hsv\((\d+),\s*(\d+)%?,\s*(\d+)%?\)/;
const match = hsvString.match(hsvRegex);
if (!match) {
return "";
}

const hue: number = parseInt(match[1]);
const saturation: number = parseInt(match[2]) / 100;
const value: number = parseInt(match[3]) / 100;

const chroma: number = value * saturation;
const hueSegment: number = hue / 60;
const x: number = chroma * (1 - Math.abs((hueSegment % 2) - 1));
const m: number = value - chroma;

let red: number = 0;
let green: number = 0;
let blue: number = 0;

if (hueSegment >= 0 && hueSegment < 1) {
red = chroma;
green = x;
} else if (hueSegment >= 1 && hueSegment < 2) {
red = x;
green = chroma;
} else if (hueSegment >= 2 && hueSegment < 3) {
green = chroma;
blue = x;
} else if (hueSegment >= 3 && hueSegment < 4) {
green = x;
blue = chroma;
} else if (hueSegment >= 4 && hueSegment < 5) {
red = x;
blue = chroma;
} else {
red = chroma;
blue = x;
}

red = Math.round((red + m) * 255);
green = Math.round((green + m) * 255);
blue = Math.round((blue + m) * 255);

const rgbString: string = `rgb(${red}, ${green}, ${blue})`;
return rgbString;
}

export function hwbToRgbString(hwbString: string): string {
// Parse HWB values from input string
const hwbRegex = /hwb\((\d+),\s*(\d+\.?\d*?)%,\s*(\d+\.?\d*?)%\)/;
const match = hwbString.match(hwbRegex);
if (!match) {
return "";
}

const hue: number = parseFloat(match[1]);
const whiteness: number = parseFloat(match[2]) / 100;
const blackness: number = parseFloat(match[3]) / 100;

const chroma: number = 1 - whiteness - blackness;
const hueSegment: number = hue / 60;
const x: number = chroma * (1 - Math.abs((hueSegment % 2) - 1));
const m: number = 1 - chroma;

let red: number = 0;
let green: number = 0;
let blue: number = 0;

if (hueSegment >= 0 && hueSegment < 1) {
red = chroma;
green = x;
} else if (hueSegment >= 1 && hueSegment < 2) {
red = x;
green = chroma;
} else if (hueSegment >= 2 && hueSegment < 3) {
green = chroma;
blue = x;
} else if (hueSegment >= 3 && hueSegment < 4) {
green = x;
blue = chroma;
} else if (hueSegment >= 4 && hueSegment < 5) {
red = x;
blue = chroma;
} else {
red = chroma;
blue = x;
}

red = Math.round((red + whiteness) * 255);
green = Math.round((green + whiteness) * 255);
blue = Math.round((blue + whiteness) * 255);

const rgbString: string = `rgb(${red}, ${green}, ${blue})`;
return rgbString;
}
39 changes: 0 additions & 39 deletions src/utils/convertors.ts

This file was deleted.

0 comments on commit 951372a

Please sign in to comment.