search

gusbemacbe / suru-plus-colourise

Colourise the small icons with any colour and gradient you prefer!
Other
4 stars 0 forks source link

I invite you to contribute for improving #1

Closed gusbemacbe closed 5 years ago

gusbemacbe commented 5 years ago

Hello @SmartFinn!

I am inviting you to contribute and to improve this little repository.

I am not sure if these codes are bad and inelegant for you. If so, you can improve (only when you have time) if you want.

Little problem is that, these files do not preserve the symlinks. I found the solutions, they preserved the symlinks, but they makde them unsuable.

Based on:

I also would like to replace Perl files for Bash files, because Bash offers --in-place --follow-symlinks, but I am not sure I can something similar in Bash to that in Perl.

I am not sure it works for any terminal and if it is bash-agnostic.

Please do not forget of putting your credit on AUTHORS and CREDIT.

gusbemacbe commented 5 years ago

Observations: I do not know how to revert the modified colours to the original or change the modified colours again to another colour like your Papirus's folder-icons and suru-plus-folders.

SmartFinn commented 5 years ago

Little problem is that, these files do not preserve the symlinks

It easy to fix.

I do not know how to revert the modified colours to the original or change the modified colours again to another colour

That's a really big problem. The easiest way to solve this problem is to embed the color scheme in each icon. The icons will look like:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
 <defs>
  <style id="suru-color-scheme" type="text/css">
   .SuruColorScheme-default { fill:#5c616c; }
   .SuruColorScheme-arrogrin { fill:url(#grad_arrogrin); }
   .SuruColorScheme-black { fill:#404747; }
   .SuruColorScheme-golden { fill:#d4af37; }
   .SuruColorScheme-green { fill:#009f6b; }
   .SuruColorScheme-grey { fill:#a9a9a9; }
   .SuruColorScheme-mycenean { fill:url(#grad_mycenean); }
   .SuruColorScheme-orange { fill:#ff7538; }
   .SuruColorScheme-purple { fill:#7851a9; }
   .SuruColorScheme-red { fill:#ed2939; }
   .SuruColorScheme-telinkrin { fill:url(#grad_telinkrin); }
   .SuruColorScheme-yellow { fill:#fedf00; }
  </style>
  <linearGradient id="grad_arrogrin" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #dd9b44; stop-opacity: 1" />
   <stop offset="100%" style="stop-color: #ad6c16; stop-opacity: 1" />
  </linearGradient>
  <linearGradient id="grad_mycenean" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #8bbac9; stop-opacity: 1" />
   <stop offset="100%" style="stop-color: #2585a3; stop-opacity: 1" />
  </linearGradient>
  <linearGradient id="grad_telinkrin" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color: #f99f5e; stop-opacity: 1" />
   <stop offset="100%" style="stop-color: #f95e6b; stop-opacity: 1" />
  </linearGradient>
 </defs>
 <path class="SuruColorScheme-default" d="M 2 2 C 2 2 1 2 1 3 L 1 12 C 1 13 2 13 2 13 L 4 13 L 5 14 L 11 14 L 12 13 L 14 13 C 14 13 15 13.12994 15 12 L 15 3 C 15 2 14 2 14 2 L 2 2 z M 3 4 L 13 4 L 13 11 L 11 11 L 10 12 L 6 12 L 5 11 L 3 11 L 3 4 z"/>
</svg>

Switching the color scheme will be performed by a simple command:

sed -i -r 's/class="SuruColorScheme-[[:alnum:]]+"/class="SuruColorScheme-telinkrin"/g' icon.svg

But the method has several issues:

gusbemacbe commented 5 years ago

We can create SuruColorScheme-custom and leave for #fff, and we will sed #fff for any hexadecimal code and after SuruColorsScheme-[[alnum]] for SuruColorScheme-custom.

Do you refer to CSS style?

SmartFinn commented 5 years ago

Do you refer to CSS style?

The main issue that color property doesn't support url() as value.

We can create SuruColorScheme-custom and leave for #fff, and we will sed #fff for any hexadecimal code and after SuruColorsScheme-[[alnum]] for SuruColorScheme-custom.

Do not clearly understand how to switch to another custom color. By replacing the whole line?

   .SuruColorScheme-custom { fill:UNKNOWN; }
gusbemacbe commented 5 years ago

What about .SuruColorScheme-arrogrin { background-image: linear-gradient(#dd9b44, #ad6c16); }?

   .SuruColorScheme-custom { fill:#custom; }
sed -i -r 's/class="SuruColorScheme-[[:alnum:]]+"/class="SuruColorScheme-custom"/g; s/#custom/#abcdef' icon.svg
gusbemacbe commented 5 years ago

Strange, url(#grad...) works here in KDE:

image

SmartFinn commented 5 years ago

Strange, url(#grad...) works here in KDE

When url(#grad...) set as value for fill: property it works but does not work for color: property.

sed -i -r 's/class="SuruColorScheme-[[:alnum:]]+"/class="SuruColorScheme-custom"/g; s/#custom/#abcdef' icon.svg

That's not works when need to change one custom color to another.

gusbemacbe commented 5 years ago

@SmartFinn, I will discard and disconsider the colour custom. I will add only when somebody requests new colour and new gradient.

I will replace all Perl files for the commands sed. But I would like to add --in-place --follow-symlinks to preserve the symlinks.

And are conditions of locating the icons theme and cds of specifics folders (apps, mimetypes, places, etc.) good or bad?

gusbemacbe commented 5 years ago

Hi @SmartFinn!

As I have finished to create the icons and to optimise the icons with ffsvg, I am going to begin to add the list of colours and gradients to all SVG files of small icons.

The problem is that some SVG files have already defs, while others file not have defs. Observe that almost all the files have <path ... fill="#5C616C" ...>.

Therefore, I am going to use the original Perl to add the list of colours and gradients to all the files. Then I will readapt the Perl files and the Bash script in this repository.

I do not know if you know Perl.

gusbemacbe commented 5 years ago

The original file (readapted):

#!/bin/perl
use strict;
use warnings;

my $replacement=<<EoF;
<defs>
    <style id="suru-color-scheme" type="text/css">
        .SuruColorScheme-default { fill: #5c616c; } 
        .SuruColorScheme-arrongin { fill: url(#grad_arrongin); } 
        .SuruColorScheme-black { fill: #3B3B3B; } 
        .SuruColorScheme-blue { fill: #1A7FD4; } 
        .SuruColorScheme-brown { fill: #945F2B; } 
        .SuruColorScheme-golden { fill: #EAB305; } 
        .SuruColorScheme-green { fill: #46A926; } 
        .SuruColorScheme-grey { fill: #888888; } 
        .SuruColorScheme-fitdance { fill: url(#grad_fitdance); } 
        .SuruColorScheme-ibiza { fill: url(#grad_ibiza); } 
        .SuruColorScheme-minoan { fill: url(#grad_minoan); } 
        .SuruColorScheme-mycenean { fill: url(#grad_mycenean); } 
        .SuruColorScheme-orange { fill: #F34F17; } 
        .SuruColorScheme-pink { fill: #ED3146; } 
        .SuruColorScheme-purple { fill: #9B33AE; } 
        .SuruColorScheme-rainblue { fill: url(#grad_rainblue); } 
        .SuruColorScheme-red { fill: #F22C42; } 
        .SuruColorScheme-telinkrin { fill: url(#grad_telinkrin); } 
        .SuruColorScheme-turquoise { fill: #31C6B7; }
        .SuruColorScheme-whitesmoke { fill: #ECECEC; }
    </style>
    <linearGradient id="grad_arrongin" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color: #FDA463; stop-opacity:1"/>
        <stop offset="100%" style="stop-color: #DC6F26; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="grad_fitdance" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color: #1AD6AB; stop-opacity:1"/>
        <stop offset="100%" style="stop-color: #329DB6; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="grad_ibiza" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color: #ff6a00; stop-opacity:1"/>
        <stop offset="100%" style="stop-color: #ee0979; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="grad_minoan" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color: #e2d19f; stop-opacity:1"/>
        <stop offset="100%" style="stop-color: #5e1a16; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="grad_mycenean" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color: #ce3c22; stop-opacity:1"/>
        <stop offset="100%" style="stop-color: #b11819; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="grad_rainblue" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color: #00F260; stop-opacity:1"/>
        <stop offset="100%" style="stop-color: #0575E6; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="grad_telinkrin" x1="0%" x2="0%" y1="0%" y2="100%">
        <stop offset="0%" style="stop-color:#f99f5e; stop-opacity:1"/>
        <stop offset="100%" style="stop-color:#f95e6b; stop-opacity:1"/>
    </linearGradient>
</defs>
EoF

## This is just to fix SE's syntax highlighting /    
my $foundSvg = 0;

while (readline) 
{
  ## Insert the replacement after the 1st line matching '<svg'
  if (/<\s*svg/) 
  {
    $foundSvg++;
  }

  if ($foundSvg == 1) 
  {
    ## $_ is the value of the current line. If we have found the <svg,
    ## append $replacement to this line
    $_ .= $replacement;

    ## Increment $foundSvg so we don't do this twice
    $foundSvg++;
  }

  ## For all lines, replace all occurrences of #5c616c with class="SuruColorScheme-default"
  s/fill="#5C616C"/class="SuruColorScheme-default"/g;

  ## Print the line
  print;
}
gusbemacbe commented 5 years ago

You can try quickly in the folder test-beta

SmartFinn commented 5 years ago

Now I don't think that the embedded color scheme is a good idea. Each issue that I listed before is a pain. Adding/changing/removing colors of the color scheme hard to automatize.

I like a method that using oomox to generate custom themes. The method creates a separated theme named like suru-plus-golden from the main theme and left the last one unchanged. No need to restore colors - just delete the custom theme.

It's can be a separate script or a plugin for Oomox with GUI like I did for Papirus https://github.com/themix-project/oomox/tree/master/plugins/icons_papirus

image

gusbemacbe commented 5 years ago

@SmartFinn

You are totally right. I etsted, using Sublime Text, some files did not work due to KDE bug.

May I fork it, pull request to him, so my icons theme would be added for support to Oomox?

SmartFinn commented 5 years ago

May I fork it, pull request to him, so my icons theme would be added for support to Oomox?

At the moment, suru-plus repo is incompatible with Oomox. You have to change directory structure to Papirus-like style. I recommend to do it in the next suru-plus release. I'll help you with Makefile and install.sh scripts, etc.

Also, I recommend you switch to GitHub Flow, meaning master branch for development, tags for stable, branches for features. The current flow looks like hell.

gusbemacbe commented 5 years ago

At the moment, suru-plus repo is incompatible with Oomox. You have to change directory structure to Papirus-like style. I recommend to do it in the next suru-plus release. I'll help you with Makefile and install.sh scripts, etc.

The repo is ready, may I release or better may I wait and redo for readapting the directory structure in the Papirus-like style before?

Also, I recommend you switch to GitHub Flow, meaning master branch for development, tags for stable, branches for features. The current flow looks like hell.

Very interesting! I have just installed it.

SmartFinn commented 5 years ago

The repo is ready, may I release or better may I wait and redo for readapting the directory structure in the Papirus-like style before?

Release it as is and delete beta/unstable branches then we start.

SmartFinn commented 5 years ago

@gusbemacbe plugin for oomox was added themix-project/oomox#209

image

actionless commented 5 years ago

can be tested in arch linux as oomox-git, i can also build debs for testing if needed

gusbemacbe commented 5 years ago

HI @SmartFinn and @actionless !

Sorry for my absence, I was too sick.

@actionless , are you asking to me or to Sergei?

And this repository, @SmartFinn ?

actionless commented 5 years ago

@gusbemacbe i was asking you

gusbemacbe commented 5 years ago

Hi @actionless !

In Arch Linux and Manjaro, it gave two errors to install oomox-git:

Erros ``` error: Could not compile `resvg-capi`. Caused by: process didn't exit successfully: `rustc --crate-name resvg capi/src/lib.rs --color always --crate-type cdylib --crate-type staticlib --emit=dep-info,link -C opt-level=3 -C lto --cfg 'feature="cairo-backend"' --cfg 'feature="cairo-sys-rs"' --cfg 'feature="glib"' --cfg 'feature="qt-backend"' --cfg 'feature="resvg"' -C metadata=34044ee5526873f1 --out-dir /home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps -L dependency=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps --extern cairo_sys=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps/libcairo_sys-a11059b04a916894.rlib --extern fern=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps/libfern-f758ae3d5f3ac504.rlib --extern glib=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps/libglib-42c67ca816dc468b.rlib --extern log=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps/liblog-4fed47ee5064f102.rlib --extern resvg=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/deps/libresvg-9bfdf02a73881248.rlib -L native=/home/gusbemacbe/.cache/yay/resvg-git/src/resvg/target/release/build/resvg-qt-529ad70e8602e985/out` (signal: 11, SIGSEGV: invalid memory reference) ==> ERROR: A failure occurred in build(). Aborting... Error making: resvg-git ```
actionless commented 5 years ago

llvm currently broken in arch linux under some specific usecases (which are reproduciable when compiling some of rust packages), to workaround it you can do:

sudo pacman -Rs rust
sudo pacman -S  rustup
rustup toolchain install 1.32.0
rustup default 1.32.0
gusbemacbe commented 5 years ago

Hi @SmartFinn and @actionless !

It worked on Manjaro KDE. But the icons theme exported is in ~/.icons, as KDE can not list it in the icons themes list at system settings. The ideal is that it be exported to ~/usr/share/icons as it is universal.

Sorry for my absence and for my delay, because my Mac mini passed away, I was unable to run Arch Linux or Ubuntu on my second external HDD on my Mac mini. Then I can not test Oomox on Arch and on Ubuntu.

My laptop is incompatible with running VirtualBox virtual machines.

I have to save a lot of money to purchase the new super-computer. I will not buy nothing from Apple due to its new anti-repair policy. I do not want to replace a broken new Mac for a new Mac.

actionless commented 5 years ago

The ideal is that it be exported to ~/usr/share/icons as it is universal.

do you mean ./local/share ?

gusbemacbe commented 5 years ago

do you mean ./local/share ?

No, Oomix moved the exported icons theme to ~/.icons and KDE does not recognise the icons theme.

But if you move to ~/.local/share/icons, KDE will recognise, but the GTK does not.

In the KDE, some apps are GTK-based and need one icons theme applied by the Application Style > GTK from KDE System Settings.

For both KDE-based apps and GTK-based apps to recognise the same icon theme exported in KDE, it should be in /use/share/icons.

SmartFinn commented 5 years ago

@actionless a simple if statement in change_color.sh can solve the issue. But I'm not sure should we check $XDG_CURRENT_DESKTOP variable or there is an easier way.

actionless commented 5 years ago

i think i can just add a flag to scripts to choose destination directory (i think some of them already have such flag)

in GUI last exported parameter is saved so it shouldn't be a problem for user after setting it once

SmartFinn commented 5 years ago

@actionless do you want to leave the choice to end-user? It's not a good idea to my mind.

actionless commented 5 years ago

i can set default value to some reasonable one, but yeah, having a choice is always better than not

so we still could discuss the default value for it

SmartFinn commented 5 years ago

@actionless

so we still could discuss the default value for it

~/.icons/ supports GNOME, Mate, Xfce, Cinnamon, Budgie and others GTK-based ~/.local/share/icons uses KDE and LXQt only

So the default value is obvious.

gusbemacbe commented 5 years ago

@SmartFinn

Is Deepin Environment LXQt-based?

actionless commented 5 years ago

ok, so the current default value is fine

so it remains to make it configurable and save the last user choice

what about auto-detecting current DE for setting default value, is it really a reasonable thing to do?

SmartFinn commented 5 years ago

@gusbemacbe I don't know. deepin uses ~/.local/share/icons?

I have to say that ~/.local/share/icons works anywhere, but tweakers don't support it.

gusbemacbe commented 5 years ago

@SmartFinn

In Deepin OS, it is in the /usr/share/icons/.

SmartFinn commented 5 years ago

@actionless

what about auto-detecting current DE for setting default value, is it really a reasonable thing to do?

Why not, it's handier.

It's easy to do in bash scripts, you could rewrite it for python:

case "${XDG_CURRENT_DESKTOP,,}" in
    kde|lxqt)
        output_dir="${XDG_DATA_HOME:-$HOME/.local/share}/icons/$OUTPUT_THEME_NAME"
        ;;
    *)
        output_dir="$HOME/.icons/$OUTPUT_THEME_NAME"
        ;;
esac
SmartFinn commented 5 years ago

@gusbemacbe

For both KDE-based apps and GTK-based apps to recognise the same icon theme exported in KDE, it should be in /use/share/icons.

That's not a universal location too and the place requires root permissions.

gusbemacbe commented 5 years ago

@SmartFinn

Why https://github.com/PapirusDevelopmentTeam/papirus-icon-theme#root-directory-recommended?

SmartFinn commented 5 years ago

@gusbemacbe to avoid collision when icon theme installed by a package and then updated by the script.

actionless commented 5 years ago

done, please have a look

gusbemacbe commented 5 years ago

HI @actionless !

There is a small error, in spite of it working everywhere and everything:

Cleared directory 'plugins/icons_papirus/papirus-icon-theme'
Cleared directory 'plugins/icons_suruplus/suru-plus'
Cleared directory 'plugins/oomoxify'
Cleared directory 'plugins/theme_arc/arc-theme'
Cleared directory 'plugins/theme_materia/materia-theme'
Cleared directory 'plugins/theme_oomox/gtk-theme'
error: wrong number of arguments, should be from 1 to 2
usage: git config [<options>]

Great dialog. I exported to ~/.local/share/icons and KDE reocgnised it.

actionless commented 5 years ago

what are the steps to reproduce the error?

UPD: nevermind, i fixed it

gusbemacbe commented 5 years ago

@actionless

It worked now. Thank you!

actionless commented 5 years ago

good, thanks for checking!

gusbemacbe commented 5 years ago

@SmartFinn , and this repository? What will I do with this repository?

actionless commented 5 years ago

it seems like support for gradients still need to be added into oomox plugin

gusbemacbe commented 5 years ago

Yes, but all the 16px icons have only one colour. Not all icons are compounded-path. Is it possible?

actionless commented 5 years ago

i think it's possible but putting gradient code like this (https://github.com/gusbemacbe/suru-plus-colourise/blob/master/arrogrin.pl#L5-L10) into change_color.sh if PAPIRUS_GRADIENT1 and PAPIRUS_GRADIENT2 vars are set

and in gui to have switch "Enable Gradient" if on: show PAPIRUS_GRADIENT1 and PAPIRUS_GRADIENT2 if off: show instead those 2 only one solid color

actionless commented 5 years ago

and in icon preview add gradient code into svg, but just set both color1 and color2 to the same if solid color was chosen

gusbemacbe commented 5 years ago

Then it will export as a new icons theme or will they change or revert in the same icons theme?

actionless commented 5 years ago

sorry, could you rephrase your question?