Release v1.0.12

README.md

@@ -23,7 +23,7 @@
 
 ## ⬇️ Download
 
-- macOS: <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.11/PlainColor_1.0.11_aarch64.dmg">dmg</a>
+- macOS: <a href="https://github.com/ModuleArt/plain-color/releases/download/v1.0.12/PlainColor_1.0.12_aarch64.dmg">dmg</a>
 - Windows: exe | microsoft store - Coming soon...
 - Linux: deb | flathub - Coming soon...
 
@@ -39,6 +39,7 @@
   - `rgb()` `R,G,B` `color(display-p3)`
   - `hsl()` `H,S,L`
   - `cmyk()` `C,M,Y,K`
+  - `oklch()`
 - 🍎 <b>Great macOS support</b>
   - Works on top of menu bar and fullscreen windows
 
@@ -63,6 +64,7 @@ If you want to report a bug, first, thank you, that helps us a lot. Please open
 - Add ability to reorder palettes
 - More color formats:
   - Common:
+    - HSB/HSV `268, 69, 57`
     - RGB/RGBA from 0 to 1 `0,36; 0,18; 0,57`
     - LAB
     - RAL
@@ -95,7 +97,4 @@ If you want to report a bug, first, thank you, that helps us a lot. Please open
 - Instant copy shortcut `CommandOrControl+Alt+C`
 - Instant pick shortcut `CommandOrControl+Shift+C`
 - <a href="https://github.com/tauri-apps/tauri-action">Build app releases with GitHub action</a>
-- New color formats:
-  - Oklab `oklch(40.1% 0.123 21.57)`
-  - HSB/HSV `268, 69, 57`
-- Control Select component with arrows keys (up/down)
+- Better export preview (see ColorSlurp export)

package.json

@@ -2,13 +2,12 @@
   "name": "plain-color",
   "description": "Lightweight, versatile, cross-platform color picker app",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.0.12",
   "license": "GPL-3.0-only",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
     "t:dev": "tauri dev",
     "t:build:debug": "tauri build --debug",
     "t:build:release": "tauri build && node src-tauri/updater/generate-artifacts.js"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "PlainColor"
-version = "1.0.11"
+version = "1.0.12"
 description = "Lightweight, versatile, cross-platform color picker app"
 authors = ["Eugene Volynko <volynko.ua@gmail.com>"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "PlainColor",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "identifier": "com.moduleart.plaincolor",
   "build": {
     "beforeDevCommand": "yarn dev",

src/components/ColorCard/index.scss

@@ -15,6 +15,15 @@
     height: var(--size_basicHeight);
   }
 
+  &__bg {
+    padding-right: 0;
+    width: 100%;
+  }
+
+  &__header {
+    padding-right: 0.75rem;
+  }
+
   &__copied-overlay {
     animation-name: keyframes_messageOverlay;
     animation-duration: 1000ms;
@@ -31,10 +40,21 @@
   }
 
   &__copy-variants {
-    margin: -0.25rem;
+    overflow-x: auto;
+    width: fit-content;
+    max-width: calc(100% - 90px);
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+    overscroll-behavior-y: auto;
+    padding-right: 0.75rem;
+
+    &::-webkit-scrollbar {
+      display: none; /* Safari and Chrome */
+    }
 
-    & > * {
-      padding: 0.25rem;
+    &::before {
+      content: '';
+      flex: 1;
     }
   }
 }

src/components/ColorCard/index.tsx

@@ -26,6 +26,8 @@ export const ColorCard: FC<IColorCardProps> = ({
   onColorChange,
   variant = 'list',
   colorCardRef,
+  showQuickCopyVariants = true,
+  showHex = true,
   ...props
 }) => {
   const [copied, setCopied] = useState('')
@@ -145,7 +147,7 @@ export const ColorCard: FC<IColorCardProps> = ({
         )}
         {variant === 'list' && (
           <>
-            <Stack>
+            <Stack className="color-card__header">
               <Text
                 text={color.label}
                 grow
@@ -162,23 +164,28 @@ export const ColorCard: FC<IColorCardProps> = ({
                 onClick={(event) => showOptions({ event })}
               />
             </Stack>
-            <Stack>
-              <Stack grow wrap gap="none" className="color-card__copy-variants">
-                {quickCopyVariants.map((copyVariant) => (
-                  <Button
-                    key={copyVariant.id}
-                    label={copyVariant.label}
-                    size="inline"
-                    variant="clear"
-                    iconPre={Copy}
-                    tinted
-                    onClick={() => copy(copyVariant.id)}
-                    nativeTooltip={copyVariant.label}
-                  />
-                ))}
+
+            {(showHex || showQuickCopyVariants) && (
+              <Stack justify="between" className="color-card__footer">
+                {showHex && <Text text={color.hex} tinted transform="uppercase" pointerEvents="disable" />}
+                {showQuickCopyVariants && (
+                  <Stack grow className="color-card__copy-variants">
+                    {quickCopyVariants.map((copyVariant) => (
+                      <Button
+                        key={copyVariant.id}
+                        label={copyVariant.label}
+                        size="inline"
+                        variant="clear"
+                        iconPre={Copy}
+                        tinted
+                        onClick={() => copy(copyVariant.id)}
+                        justify="end"
+                      />
+                    ))}
+                  </Stack>
+                )}
               </Stack>
-              <Text text={color.hex} tinted transform="uppercase" pointerEvents="disable" />
-            </Stack>
+            )}
           </>
         )}
       </Stack>

src/components/ColorCard/props.ts

@@ -9,4 +9,6 @@ export interface IColorCardProps extends IPlainlibComponentProps {
   onColorChange?: (color: IColor) => void
   variant?: 'list' | 'grid'
   colorCardRef?: TPlainlibRef<HTMLDivElement>
+  showQuickCopyVariants?: boolean
+  showHex?: boolean
 }

src/components/PaletteCard/index.scss

@@ -8,6 +8,12 @@
     height: 1.75rem;
   }
 
+  &__empty {
+    background-image: var(--bgImg_checkerboard);
+    background-color: var(--color_element);
+    height: 100%;
+  }
+
   &__color {
     height: 100%;
     flex: 1;

src/components/PaletteCard/index.tsx

@@ -119,10 +119,9 @@ export const PaletteCard: FC<IPaletteCardProps> = ({ palette, onDelete, onDuplic
       </Stack>
       <Stack gap="none" className="palette-card__colors">
         {uniqueColors.length === 0 && (
-          <button className="palette-card__color" onClick={openPalette}>
-            <div className="palette-card__color-bg" />
+          <Stack className="palette-card__empty" align="center" padding="medium" grow>
             <Text text="Empty" tinted size="small" />
-          </button>
+          </Stack>
         )}
         {uniqueColors.map((color, index) => (
           <button

src/components/ProgressBar/index.scss

@@ -0,0 +1,13 @@
+.progress-bar {
+  height: 0.25rem;
+  overflow: hidden;
+  position: relative;
+
+  &__value {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--color_primary);
+  }
+}

src/components/ProgressBar/index.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import { IProgressBarProps } from './props'
+import './index.scss'
+
+export const ProgressBar: FC<IProgressBarProps> = ({ value, maxValue = 1 }) => {
+  return (
+    <div className="progress-bar">
+      <div className="progress-bar__value" style={{ width: `${(value / maxValue) * 100}%` }} />
+    </div>
+  )
+}

src/components/ProgressBar/props.ts

@@ -0,0 +1,4 @@
+export interface IProgressBarProps {
+  value: number
+  maxValue?: number
+}

src/components/Updater/index.tsx

@@ -4,19 +4,28 @@ import { relaunch } from '@tauri-apps/plugin-process'
 import { Text } from '@/components/Text'
 import { Stack } from '@/components/Stack'
 import { Button } from '@/components/Button'
+import { app } from '@tauri-apps/api'
+import { ProgressBar } from '@/components/ProgressBar'
 
 export const Updater: FC = () => {
+  const [version, setVersion] = useState('0')
+  const [isCheckingForUpdates, setIsCheckingForUpdates] = useState(true)
   const [updateAvailable, setUpdateAvailable] = useState<Update | null>(null)
   const [isDownloading, setIsDownloading] = useState(false)
   const [contentLength, setContentLength] = useState(0)
   const [downloadedLength, setDownloadedLength] = useState(0)
   const [isFinished, setIsFinished] = useState(false)
 
   useEffect(() => {
+    setIsCheckingForUpdates(true)
+
+    app.getVersion().then((v) => setVersion(v))
+
     check().then((update) => {
       if (update) {
         setUpdateAvailable(update)
       }
+      setIsCheckingForUpdates(false)
     })
   }, [])
 
@@ -30,7 +39,7 @@ export const Updater: FC = () => {
             setContentLength(event.data.contentLength || 0)
             break
           case 'Progress':
-            setDownloadedLength(downloadedLength + event.data.chunkLength)
+            setDownloadedLength((downloadedLength) => downloadedLength + event.data.chunkLength)
             break
           case 'Finished':
             setIsFinished(true)
@@ -42,7 +51,26 @@ export const Updater: FC = () => {
       })
   }
 
-  if (!updateAvailable) return null
+  if (isCheckingForUpdates) {
+    return (
+      <Stack dir="vertical" gap="extra-small">
+        <Stack dir="vertical">
+          <Text text="Checking for updates..." size="small" tinted />
+        </Stack>
+      </Stack>
+    )
+  }
+
+  if (!updateAvailable) {
+    return (
+      <Stack dir="vertical" gap="extra-small">
+        <Stack dir="vertical">
+          <Text text="You're up-to-date!" />
+          <Text text={`PlainColor v${version} is currently the newest version available`} size="small" tinted />
+        </Stack>
+      </Stack>
+    )
+  }
 
   return (
     <Stack dir="vertical" gap="extra-small">
@@ -54,14 +82,16 @@ export const Updater: FC = () => {
               ? 'Finished. Relaunching...'
               : isDownloading
               ? contentLength > 0
-                ? `Downloading: ${(downloadedLength / contentLength).toFixed(0)}%`
+                ? `Downloading... ${((downloadedLength / contentLength) * 100).toFixed(0)}%`
                 : 'Downloading...'
-              : `v${updateAvailable.version}`
+              : `The new version of PlainColor v${updateAvailable.version} is available`
           }
           size="small"
           tinted
         />
+        {isDownloading && <ProgressBar value={downloadedLength} maxValue={contentLength} />}
       </Stack>
+
       {!isDownloading && (
         <Stack>
           <Button label="Download and Install" padding="medium" onClick={downloadAndInstall} />

src/components/VirtualScroller/index.tsx

@@ -60,8 +60,9 @@ export const VirtualScroller = <T extends any>({
         <div ref={virtualScroll.innerRef as any} className="virtual-scroller__inner">
           {virtualScroll.items.map((item) => (
             <div className="virtual-scroller__row">
-              {rows[item.index]?.map((cell) => (
+              {rows[item.index]?.map((cell, cellIndex) => (
                 <div
+                  key={cellIndex}
                   className="virtual-scroller__cell"
                   style={{ width: `calc((100% + 0.5rem) / ${columnCount} - 0.5rem)` }}
                 >

src/pages/ColorPage/index.tsx

@@ -81,7 +81,7 @@ export const ColorPage: FC = () => {
     <Stack dir="vertical" gap="none" grow>
       <Scroller grow>
         <Stack dir="vertical" gap="medium" grow padding="medium">
-          <ColorCard color={color} onColorChange={onColorChange} />
+          <ColorCard color={color} onColorChange={onColorChange} showQuickCopyVariants={false} showHex={false} />
           <ColorPicker hexValue={color.hex} onChange={(hex) => setColor({ ...color, hex })} grow />
           <ColorInput colorHex={color.hex} onChange={(hex) => setColor({ ...color, hex })} />
           <Stack>

src/types/settings.types.ts

@@ -17,4 +17,7 @@ export enum ECopyVariant {
   // cmyk
   CMYK_FUNCTION = 'CMYK_FUNCTION',
   CMYK_COMMA_SEPARATED = 'CMYK_COMMA_SEPARATED',
+
+  // oklch
+  CSS_OKLCH = 'CSS_OKLCH',
 }

src/utils/color/cmyk.color.util.ts

@@ -5,7 +5,7 @@ export interface TColorCmyk {
   key: number
 }
 
-export const hexToCmykObj = (hexColor: string) => {
+export const hexToCmykObj = (hexColor: string): TColorCmyk => {
   let C = 0,
     M = 0,
     Y = 0,