phocus / gtk Goto Github PK

With Adwaita theme:

With Phocus, installed from source (master branch):

Hello.

I was messing with check and radio icons and found about their spacing issues in nemo's right click menu and gtk-inspector menu. The icons are too close to text. Here are some screenshots to explain what i mean:

In Nemo right click menu :

In GTK-Inspector right click menu on selected text:

In GTK-Inspector popover widget:

Selected list item doesn't have any highlighting:

making it hard to tell apart from non selected ones.

flowbox child doesn't have any highlight for currently selected item:

I tried fixing these issues on my fork and this is what i achieved:

I can submit a pr if needed regarding these fixes.
on a side note, any plans on porting phocus to gtk4 ? phocus is like the perfect template to base your own theme on so was wondering if you had any plans on porting it.

Thanks for this awesome project :)

▲ ~ git clone https://github.com/phocus/gtk.git phocus-gtk

Cloning into 'phocus-gtk'...
remote: Enumerating objects: 82, done.
remote: Counting objects: 100% (82/82), done.
remote: Compressing objects: 100% (36/36), done.
remote: Total 683 (delta 36), reused 66 (delta 34), pack-reused 601
Receiving objects: 100% (683/683), 111.26 KiB | 555.00 KiB/s, done.
Resolving deltas: 100% (353/353), done.
▲ ~ cd phocus-gtk
▲ ~/phocus-gtk cd
▲ ~ cd phocus-gtk
▲ ~/phocus-gtk make
npm install && npm run build

[email protected] install /home/jimmy/phocus-gtk/node_modules/node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-88_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-88_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

[email protected] postinstall /home/jimmy/phocus-gtk/node_modules/node-sass
node scripts/build.js

Building: /usr/bin/node /home/jimmy/phocus-gtk/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli '/usr/bin/node',
gyp verb cli '/home/jimmy/phocus-gtk/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (/home/jimmy/phocus-gtk/node_modules/which/which.js:13:12)
gyp verb which failed at F (/home/jimmy/phocus-gtk/node_modules/which/which.js:68:19)
gyp verb which failed at E (/home/jimmy/phocus-gtk/node_modules/which/which.js:80:29)
gyp verb which failed at /home/jimmy/phocus-gtk/node_modules/which/which.js:89:16
gyp verb which failed at /home/jimmy/phocus-gtk/node_modules/isexe/index.js:42:5
gyp verb which failed at /home/jimmy/phocus-gtk/node_modules/isexe/mode.js:8:5
gyp verb which failed at FSReqCallback.oncomplete (node:fs:199:21)
gyp verb which failed python2 Error: not found: python2
gyp verb which failed at getNotFoundError (/home/jimmy/phocus-gtk/node_modules/which/which.js:13:12)
gyp verb which failed at F (/home/jimmy/phocus-gtk/node_modules/which/which.js:68:19)
gyp verb which failed at E (/home/jimmy/phocus-gtk/node_modules/which/which.js:80:29)
gyp verb which failed at /home/jimmy/phocus-gtk/node_modules/which/which.js:89:16
gyp verb which failed at /home/jimmy/phocus-gtk/node_modules/isexe/index.js:42:5
gyp verb which failed at /home/jimmy/phocus-gtk/node_modules/isexe/mode.js:8:5
gyp verb which failed at FSReqCallback.oncomplete (node:fs:199:21) {
gyp verb which failed code: 'ENOENT'
gyp verb which failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python /usr/bin/python
gyp ERR! configure error
gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (node:child_process:333:12)
gyp ERR! stack at ChildProcess.emit (node:events:376:20)
gyp ERR! stack at maybeClose (node:internal/child_process:1063:16)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:295:5)
gyp ERR! System Linux 5.10.6-arch1-1
gyp ERR! command "/usr/bin/node" "/home/jimmy/phocus-gtk/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/jimmy/phocus-gtk/node_modules/node-sass
gyp ERR! node -v v15.5.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/jimmy/.npm/_logs/2021-01-13T23_35_19_122Z-debug.log
make: *** [Makefile:6: all] Error 1

selected:

unselected:

This affect icons as well as the text on the sidebar.

Currently, the theme is designed for tiled window managers, which makes window-resizing impossible in traditional window managers.

In traditional window managers, GTK applications should have a margin on the window decoration node so they can be resized at the edges. In tiling window managers on the other hand, a margin on window decoration renders as the theme background (which is basically a large ugly border). Resizing isn't done by dragging the border of the window in tiling window managers.

This means we probably need a way to generate a default variant of the theme, containing drag areas, and a border-less variant without drag areas.

Hello.

I was messing with phocus colors and it seems like it lacks support for "messagedialog" windows. Changing theme colors have absolutely no effect on messagedialog windows. Here are some screenshots to explain what i mean:

^ messagedialog window on default phocus



^ messagedialog window stays same even after changing colors


I tried adding the following code to allow theming with variables:

@use '../colors';

messagedialog {
    background: colors.$surface-weak;
    color: colors.$black-strong;
    border: 0.2em solid colors.$black-weakest;
        box.vertical {
                padding-top: 0.2em;
            }
        button {
            margin: 0em 0.3em 0.3em 0.3em;
            border: none;
            background: colors.$black-weakest;
            transition: background 170ms ease-out;
          &:hover:not(:active) {
                background: colors.$black-weak;
        }
    }
  }

This is on commit 996f644

I installed phocus and configured it according to my preference but when I wanted to change the theme from lxappearance my theme option wasn't there in the list. I use bspwm. In xfce I was able to change the themes so far.

All widgets should scale with the font-size. This includes their spacing (paddings, margins), sizes, borders, border radius etc.
This allows for nice proportions on regular, retina and in-between devices like 1440p at 14".

Unfortunately, theme assets can't be scaled seamlessly in GTK3 (yes, not even svg's), so for icons, phocus should completely rely on installed icon themes, which can be used and scale seamlessly. This affects window titlebuttons, check and radio widgets, combobox arrows and more.

This video shows the current behavior of components that don't scale with the font:

And this video shows a quick implementation of scaling button paddings and border-radius by basing their size on em instead of pixels:

Hello,

I recently tried to install the AUR version of the package and I'm unable to install it receiving the following error message:

npm install && npm run build

> [email protected] install /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-83_binding.node": 

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g. 

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> [email protected] postinstall /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/node-sass
> node scripts/build.js

Building: /usr/bin/node /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/bin/node',
gyp verb cli   '/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:89:16
gyp verb `which` failed     at /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:176:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/which/which.js:89:16
gyp verb `which` failed     at /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:176:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python /sbin/python
gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /sbin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack 
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:308:12)
gyp ERR! stack     at ChildProcess.emit (events.js:314:20)
gyp ERR! stack     at maybeClose (internal/child_process.js:1051:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
gyp ERR! System Linux 5.8.1-arch1-1
gyp ERR! command "/usr/bin/node" "/home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/barbarossa/.cache/yay/phocus-gtk-theme-git/src/phocus-gtk-theme-git/node_modules/node-sass
gyp ERR! node -v v14.8.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/barbarossa/.npm/_logs/2020-08-15T14_05_15_631Z-debug.log
make: *** [Makefile:6: all] Error 1
==> ERROR: A failure occurred in package().
    Aborting...

It looks like it might be a typo in the link for node-sass where it should be 72 rather than 83?