Skip to content

feat: custom theme extension #201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 17 commits into from
Dec 22, 2021
Merged

feat: custom theme extension #201

merged 17 commits into from
Dec 22, 2021

Conversation

kimlimjustin
Copy link
Owner

@kimlimjustin kimlimjustin commented Dec 21, 2021 •
edited by gitpod-io bot
Loading

Motivation

It's too boring to see the same theme every time opens and uses Xplorer, this PR is intended to let user able to customize their own theme.

Changes

  • Update the theme structure to make it more customizable (Breaking changes ❗)
    The new structure of the theme.json as well as user's custom theme will be structured as below:

    "<scope><element query><CSS key>": "<CSS value>"

    Scopes are: root, windowmanager, tabs, settings, favorites, favorites, grid, contextmenu, prompt, preview and `properties (basically just to group them)
    Element query: basically just like what a CSS query does.

    NB: please note that snakeCase will be converted into snake-case

    Some CSS variables provided to the theme value that you can make use of are:

    1. --sidebar-transparency, the transparency of the sidebar, in percentage
    2. --workspace-transparency, the transparency of the workspace, in percentage
    3. --topbar-transparency, the transparency of the topbar, in percentage

    Example:

    "root.sidebar.background": "rgb(20, 20, 27)"

  • Add yeoman-generator, yosay, and lerna dependency.

  • Make Xplorer code as monorepo project

  • User can start developing their own theme
    Xplorer uses yeoman to generate project structure for the extension. To get started, user will have to install yeoman globally and install xplorer-extensions package globally (this can be done by npm i -g xplorer-extensions or use yarn link on development process).

    Afterward, simply running npm start will popup an Xplorer window for the theme development process, features like hot reload is supposed to be working. To build packaged theme extension, the user can simply run npm build and install it to Xplorer by running npm xplorer:install. Please note that the packaged extension's file name will be ended with .xtension extension which is Xplorer's reserved file type, double-clicking it on Xplorer/file explorer will install it too. To uninstall an extension, simply running xplorer extensions uninstall <identifier> is enough.

    Users can also publish the extension to somewhere that can be accessed on the internet, (ex: GitHub Gists) and other users can install it by simply running xplorer extensions install <URL>.

  • Add 2 examples of custom themes (under the example folder)

Additional Comments

Sharing a theme on Discussion will be welcomed :)

A detailed docs update will be shipped by another PR

@kimlimjustin
feat: color theme customization development process
3748932
@kimlimjustin
Merge branch 'master' into feat/extensions
e98c1dd
@kimlimjustin
refactor: developing theme extension structure
c1f3877
@kimlimjustin
Merge branch 'master' into feat/extensions
936492b
@kimlimjustin
Merge branch 'master' into feat/extensions
ba770d0
@kimlimjustin
feat: build theme extension into a dist file
73fa528
@kimlimjustin
Merge branch 'master' into feat/extensions
ef81720
@kimlimjustin
feat: make programming language highlights customizable
24798ae
@kimlimjustin
refactor: new way to customize theme
e3a7755
@kimlimjustin
feat: install custom theme
bb931a3
@kimlimjustin
Merge branch 'master' into feat/extensions
ab142d8
@kimlimjustin
feat: install packages extensions by reading its type and add uninsta…
8ffb58f 
…ll extension feature
@kimlimjustin
refactor: remove useless imports
9d313d5
@kimlimjustin
refactor: make bundled xplorer extension output as new file extension…
1fa883a 
… (`.xtension)
@kimlimjustin
feat: install extensions from url
871a08a
@vercel
Copy link

vercel bot commented Dec 21, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

xplorer – ./docs

🔍 Inspect: https://vercel.com/kimlimjustin/xplorer/6kFnyuGfLTufBcfnHcNmYeW3WGQD
✅ Preview: https://xplorer-git-feat-extensions-kimlimjustin.vercel.app

updater – ./api/updater

🔍 Inspect: https://vercel.com/kimlimjustin/updater/8PpNhQiC1HDa8UHy8dAg1WEKbkwU
✅ Preview: https://updater-git-feat-extensions-kimlimjustin.vercel.app

@kimlimjustin kimlimjustin changed the title Feat/extensions feat: custom theme extension Dec 21, 2021
@stanleyowen stanleyowen added code style dependencies Pull requests that update a dependency file enhancement New feature or request UI About Xplorer UI labels Dec 22, 2021
stanleyowen
stanleyowen suggested changes Dec 22, 2021
View reviewed changes
Copy link
Contributor

@stanleyowen stanleyowen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work, I love the winter theme really much 😆. However I notice that after I run the themes.xtension file, it doesn't automatically apply the theme. Is it possible to automatically apply the theme as users run the themes.xtension file?

@kimlimjustin kimlimjustin merged commit 1cce487 into master Dec 22, 2021
@kimlimjustin kimlimjustin deleted the feat/extensions branch December 22, 2021 14:48
kimlimjustin added a commit that referenced this pull request Dec 23, 2021
@kimlimjustin
Squashed commit of the following:
f8c4adb 
commit 349187f
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 23 14:45:56 2021 +0700

    fix: opening some directory crashes xplorer

commit 288bdff
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 23 14:42:04 2021 +0700

    feat: simplify the process to set Xplorer as default file explorer (Windows) (#203)

    * feat: simplify the process to set Xplorer as default file explorer (windows)

    * locales: pull locales from crowdin

commit c85372e
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 23:38:56 2021 +0700

    fix: broken `reveal` tag

commit 1cce487
Merge: 8d228d1 b9fe970
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 21:48:45 2021 +0700

    Merge pull request #201 from kimlimjustin/feat/extensions

    feat: custom theme extension

commit 8d228d1
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 20:03:14 2021 +0700

    chore: add open collective sponsor option

commit b9fe970
Merge: e9a8a22 cd993a2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 15:08:04 2021 +0700

    Merge branch 'master' into feat/extensions

commit e9a8a22
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 15:04:55 2021 +0700

    feat: automatically apply theme on install

commit cd993a2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 14:33:37 2021 +0700

    docs: introduce new xplorer domain (https://xplorer.space)

commit c46dd92
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 22 14:16:04 2021 +0700

    feat: updater for Xplorer

commit 24501a4
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 21:38:52 2021 +0700

    Revert "refactor<chore>: remove build workflow workaround as it's been fixed on Tauri"

    This reverts commit b7db463.

commit 543c360
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 21:35:59 2021 +0700

    fix: double click is set as default to open files/dirs when there is no preference set

commit 9432bed
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 20:31:35 2021 +0700

    fix: double click is set as default to click sidebar item when there is no preference set

commit b7db463
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 20:11:41 2021 +0700

    refactor<chore>: remove build workflow workaround as it's been fixed on Tauri

commit 871a08a
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 19:23:21 2021 +0700

    feat: install extensions from url

commit 1fa883a
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 16:59:42 2021 +0700

    refactor: make bundled xplorer extension output as new file extension (`.xtension)

commit 9d313d5
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 11:27:55 2021 +0700

    refactor: remove useless imports

commit 8ffb58f
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 21 11:26:48 2021 +0700

    feat: install packages extensions by reading its type and add uninstall extension feature

commit 2b4c16a
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Mon Dec 20 17:53:20 2021 +0700

    chore: add funding

commit c15df60
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Dec 19 16:04:39 2021 +0700

    fix: buggy GitPod environment on first load

commit 14c993f
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Dec 19 15:15:48 2021 +0700

    fix: icon not loaded on home files when first opening on linux

commit ab142d8
Merge: bb931a3 216f7f2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 18 21:51:46 2021 +0700

    Merge branch 'master' into feat/extensions

commit 216f7f2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 18 21:24:00 2021 +0700

    fix: improper image hover preview (resolve #200)

commit bb931a3
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 18 19:19:32 2021 +0700

    feat: install custom theme

commit c566774
Merge: 0bd18e5 9852de2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 17 17:47:42 2021 +0700

    Merge pull request #199 from kimlimjustin/feat/lnk

    feat: add support for `lnk` files

commit 0bd18e5
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 16 11:07:07 2021 +0700

    refactor<ci>: make rust tests run on pull request

commit 9852de2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 16 10:46:13 2021 +0700

    feat: add support for `lnk` files

commit eb79f81
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 15 20:13:26 2021 +0700

    refactor: remove unused import and variable

commit e3a7755
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 15 19:53:18 2021 +0700

    refactor: new way to customize theme

commit 59251e6
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Dec 12 12:57:34 2021 +0700

    feat: sort files by name using locale compare(#196) (#198)

    * feat: sort files by name using localeCompare (#196)

    * refactor: avoid conditional statement on sorting A-Z and Z-A

    * refactor: make sort inside conditional statement instead of conditional statement inside sort function

    Co-authored-by: uahnbu <qaqqyl@gmail.com>

    * fix: typescript compiled failed

    Co-authored-by: uahnbu <qaqqyl@gmail.com>

commit 1381f04
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 11 16:31:42 2021 +0700

    refactor<gp>: make gitpod works with tauri (#197)

    * refactor<gp>: make gitpod works with tauri

    * docs: update gitpod instruction

commit 9929f35
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 10 17:43:12 2021 +0700

    fix: app crashes when favorites path is null

commit c193ec7
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 10 13:50:32 2021 +0700

    docs: not functioning in Gitpod notice

commit 24798ae
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 10 09:31:00 2021 +0700

    feat: make programming language highlights customizable

commit ef81720
Merge: 73fa528 6a63bcf
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 9 21:09:31 2021 +0700

    Merge branch 'master' into feat/extensions

commit 6a63bcf
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 9 20:00:59 2021 +0700

    feat: add preference option to open dir/file by single clicking it

commit 6f9239c
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 9 13:38:33 2021 +0700

    feat: remove english language diacritics for instant search function

commit 5dd9859
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 8 14:59:35 2021 +0700

    feat: search for the next file if user type the same input for instant search with the previous

commit 2a1dc71
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 8 07:58:07 2021 +0700

    refactor: make search state reset timer as 750ms (#193)

commit 107f2ff
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 7 20:31:07 2021 +0700

    fix: buggy file selection

commit 0b2a673
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Dec 7 20:08:19 2021 +0700

    feat: ensure scrollbar is updated when selecting files

commit 73fa528
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Mon Dec 6 20:20:04 2021 +0700

    feat: build theme extension into a dist file

commit 10007b0
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Mon Dec 6 19:38:26 2021 +0700

    feat: search and select file/folder name by typing its starting letter (#191)

commit ba770d0
Merge: 936492b 14e42ff
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Dec 5 12:27:13 2021 +0700

    Merge branch 'master' into feat/extensions

commit 14e42ff
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Dec 5 12:12:04 2021 +0700

    feat: add ability to automatically change the preview file according to file selected

commit 71cc612
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Dec 5 11:57:59 2021 +0700

    feat: `ctrl/cmd + o`  close the preview pane if the pane is already opened (#191)

commit a962470
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 4 19:22:47 2021 +0700

    fix: broken preview `txt` file

commit 2b130d2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 4 17:33:47 2021 +0700

    fix: scrollable context menu remember its position (#186 (comment))

commit e508a32
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sat Dec 4 17:22:50 2021 +0700

    fix: read directory returned error when there is no preference set

commit 5e5b4a6
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 3 20:12:54 2021 +0700

    fix: broken tests

commit 5634675
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 3 19:36:15 2021 +0700

    fix: (right) clicking on certain area giving error

commit 9949e04
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 3 19:28:37 2021 +0700

    feat: make context menu scrollable when it's overflow (#186)

commit 1b5a269
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Fri Dec 3 17:31:11 2021 +0700

    fix: bunch of errors when preference/appearance is null

commit 936492b
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 2 20:58:15 2021 +0700

    Merge branch 'master' into feat/extensions

commit 05f5111
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 2 20:42:16 2021 +0700

    feat: add transparent effect options (blur, acrylic, none)

commit dd4e208
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Thu Dec 2 19:44:56 2021 +0700

    refactor: use serde on Rust instead of JSON class on JavaScript

commit 0890e93
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 1 20:26:29 2021 +0700

    fix<styles>: grid background become transparent after stop hovering it and update grid background color for `light+` theme

commit a7f1c1c
Merge: ec12eb2 9fd7734
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Wed Dec 1 19:39:42 2021 +0700

    Merge pull request #187 from kimlimjustin/refactor/styles

    Minor improvement for `select` and `hover` styling

commit 9fd7734
Merge: f044269 ec12eb2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Nov 30 17:36:15 2021 +0700

    Merge branch 'master' into refactor/styles

commit ec12eb2
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Tue Nov 30 16:55:06 2021 +0700

    test: write tests for rust functions

commit f044269
Author: Stanley Owen <69080584+stanleyowen@users.noreply.github.com>
Date:   Tue Nov 30 16:20:26 2021 +0700

    fix: use `box-shadow` instead of `border` to avoid additional width for selected files

commit 216e0eb
Author: Stanley Owen <69080584+stanleyowen@users.noreply.github.com>
Date:   Tue Nov 30 16:18:19 2021 +0700

    feat: add soft edges for sidebar

commit 392f758
Author: Stanley Owen <69080584+stanleyowen@users.noreply.github.com>
Date:   Tue Nov 30 15:56:09 2021 +0700

    feat: improve hover effect for light theme

commit 7ddf245
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Mon Nov 29 21:40:30 2021 +0700

    docs: documenting rust functions

commit 943f56d
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Mon Nov 29 19:59:56 2021 +0700

    fix: repetitive confirm dialog when permanently deleting multiple files

commit c1f3877
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Mon Nov 29 17:21:38 2021 +0700

    refactor: developing theme extension structure

commit e98c1dd
Merge: 3748932 73a856a
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Nov 28 20:10:44 2021 +0700

    Merge branch 'master' into feat/extensions

commit 3748932
Author: Justin Maximillian Kimlim <kimlimjustin@gmail.com>
Date:   Sun Nov 28 19:57:52 2021 +0700

    feat: color theme customization development process

commit 442434f
Author: Stanley Owen <69080584+stanleyowen@users.noreply.github.com>
Date:   Tue Nov 23 18:03:53 2021 +0700

    feat: improve hover and active effects across themes

commit e3500b0
Author: Stanley Owen <69080584+stanleyowen@users.noreply.github.com>
Date:   Sat Nov 20 21:59:02 2021 +0700

    feat: add `active` attribute for components in home section

commit cd843bb
Author: Stanley Owen <69080584+stanleyowen@users.noreply.github.com>
Date:   Sat Nov 20 21:50:07 2021 +0700

    feat: improve ui for selected files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
1 more reviewer

@stanleyowen stanleyowen stanleyowen approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees

@kimlimjustin kimlimjustin

Labels
code style dependencies Pull requests that update a dependency file enhancement New feature or request UI About Xplorer UI
Projects
@kimlimjustin's todo
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@kimlimjustin @stanleyowen