Skip to content
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.

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

famfamfam sprites generation tool #692

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 40 additions & 39 deletions src/themes/icons/famfamfam.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,47 @@ div.sceditor-grip, .sceditor-button div {
width: 16px;
height: 16px;
}
.sceditor-button-youtube div { background-position: 0px 0px; }
.sceditor-button-link div { background-position: 0px -16px; }
.sceditor-button-unlink div { background-position: 0px -32px; }
.sceditor-button-underline div { background-position: 0px -48px; }
.sceditor-button-time div { background-position: 0px -64px; }
.sceditor-button-table div { background-position: 0px -80px; }
.sceditor-button-superscript div { background-position: 0px -96px; }
.sceditor-button-subscript div { background-position: 0px -112px; }
.sceditor-button-strike div { background-position: 0px -128px; }
.sceditor-button-source div { background-position: 0px -144px; }
.sceditor-button-size div { background-position: 0px -160px; }
.sceditor-button-rtl div { background-position: 0px -176px; }
.sceditor-button-right div { background-position: 0px -192px; }
.sceditor-button-removeformat div { background-position: 0px -208px; }
.sceditor-button-quote div { background-position: 0px -224px; }
.sceditor-button-print div { background-position: 0px -240px; }
.sceditor-button-pastetext div { background-position: 0px -256px; }
.sceditor-button-paste div { background-position: 0px -272px; }
.sceditor-button-outdent div { background-position: 0px -288px; }
.sceditor-button-orderedlist div { background-position: 0px -304px; }
.sceditor-button-bold div { background-position: 0px 0px; }
.sceditor-button-bulletlist div { background-position: 0px -16px; }
.sceditor-button-center div { background-position: 0px -32px; }
.sceditor-button-code div { background-position: 0px -48px; }
.sceditor-button-color div { background-position: 0px -64px; }
.sceditor-button-copy div { background-position: 0px -80px; }
.sceditor-button-cut div { background-position: 0px -96px; }
.sceditor-button-date div { background-position: 0px -112px; }
.sceditor-button-email div { background-position: 0px -128px; }
.sceditor-button-emoticon div { background-position: 0px -144px; }
.sceditor-button-font div { background-position: 0px -160px; }
.sceditor-button-format div { background-position: 0px -176px; }
.sceditor-button-horizontalrule div { background-position: 0px -192px; }
.sceditor-button-image div { background-position: 0px -208px; }
.sceditor-button-indent div { background-position: 0px -224px; }
.sceditor-button-italic div { background-position: 0px -240px; }
.sceditor-button-justify div { background-position: 0px -256px; }
.sceditor-button-left div { background-position: 0px -272px; }
.sceditor-button-link div { background-position: 0px -288px; }
.sceditor-button-ltr div { background-position: 0px -304px; }
.sceditor-button-maximize div { background-position: 0px -320px; }
.sceditor-button-ltr div { background-position: 0px -336px; }
.sceditor-button-left div { background-position: 0px -352px; }
.sceditor-button-justify div { background-position: 0px -368px; }
.sceditor-button-italic div { background-position: 0px -384px; }
.sceditor-button-indent div { background-position: 0px -400px; }
.sceditor-button-image div { background-position: 0px -416px; }
.sceditor-button-horizontalrule div { background-position: 0px -432px; }
.sceditor-button-format div { background-position: 0px -448px; }
.sceditor-button-font div { background-position: 0px -464px; }
.sceditor-button-emoticon div { background-position: 0px -480px; }
.sceditor-button-email div { background-position: 0px -496px; }
.sceditor-button-date div { background-position: 0px -512px; }
.sceditor-button-cut div { background-position: 0px -528px; }
.sceditor-button-copy div { background-position: 0px -544px; }
.sceditor-button-color div { background-position: 0px -560px; }
.sceditor-button-code div { background-position: 0px -576px; }
.sceditor-button-center div { background-position: 0px -592px; }
.sceditor-button-bulletlist div { background-position: 0px -608px; }
.sceditor-button-bold div { background-position: 0px -624px; }
.sceditor-button-orderedlist div { background-position: 0px -336px; }
.sceditor-button-outdent div { background-position: 0px -352px; }
.sceditor-button-paste div { background-position: 0px -368px; }
.sceditor-button-pastetext div { background-position: 0px -384px; }
.sceditor-button-print div { background-position: 0px -400px; }
.sceditor-button-quote div { background-position: 0px -416px; }
.sceditor-button-removeformat div { background-position: 0px -432px; }
.sceditor-button-right div { background-position: 0px -448px; }
.sceditor-button-rtl div { background-position: 0px -464px; }
.sceditor-button-size div { background-position: 0px -480px; }
.sceditor-button-source div { background-position: 0px -496px; }
.sceditor-button-strike div { background-position: 0px -512px; }
.sceditor-button-subscript div { background-position: 0px -528px; }
.sceditor-button-superscript div { background-position: 0px -544px; }
.sceditor-button-table div { background-position: 0px -560px; }
.sceditor-button-time div { background-position: 0px -576px; }
.sceditor-button-underline div { background-position: 0px -592px; }
.sceditor-button-unlink div { background-position: 0px -608px; }
.sceditor-button-youtube div { background-position: 0px -624px; }

div.sceditor-grip {
background-position: 0px -640px;
width: 10px;
Expand Down
Binary file modified src/themes/icons/famfamfam.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions src/themes/icons/generate.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
#!/bin/bash
Copy link
Collaborator

Choose a reason for hiding this comment

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

Change the script language into a platform-agnostic one. For the sake of this project's survival we must not limit image contributions to linux users (even if only through an emulator or whatnot).

Because, to build, SCE already requires node.js (javascript), I highly recommend you using that. It will allow us to, more easily, create a workflow including this process and without introducing a new language.
imagemagick exists for all 3 major platforms so that is not an issue.

Take a look at this. It might help you getting started on the communications part.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry, but I will leave it to someone else.
As I intend to use that script for my next PR (facebook video) and other changes specific to my system that won't be pushed, I propose to change the order of the icons in the sprite image to be in alphanumeric order and not sporadic as it is now and change the url.png to link.png to have all the icons match the command names.
I can push those changes separately.

Since there is no tool at all to create the sprite image and it have to be done manually, I don't see a reason why not to use it until there will be a better solution proposed by someone else.
I don't intend to create the image manually for my next changes. Any merge in the image will not be possible without a tool.

Copy link
Collaborator

@brunoais brunoais Apr 15, 2018

Choose a reason for hiding this comment

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

Please activate to allow changes from maintainers
image
^

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it is allowed on my side...

Copy link
Collaborator

Choose a reason for hiding this comment

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

Thanks.

FILES=src/famfamfam/*.png
OUT=famfamfam.less
IMAGE=famfamfam.png

rm $OUT
rm $IMAGE

echo -e '// Where to find the famfamfam icon images' >> $OUT
echo -e '@famfamfam-image-location: "famfamfam.png";' >> $OUT
echo -e '' >> $OUT
echo -e 'div.sceditor-grip, .sceditor-button div {' >> $OUT
echo -e ' background-image: url("@{famfamfam-image-location}");' >> $OUT
echo -e ' background-repeat: no-repeat;' >> $OUT
echo -e ' width: 16px;' >> $OUT
echo -e ' height: 16px;' >> $OUT
echo -e '}' >> $OUT

Y=0
$INIMAGES

for f in $FILES
do
FILENAME=`basename -s .png $f`

# skip grip images, those are not 16x16 icond and will be added at the end
if [ $FILENAME == "grip" ] || [ $FILENAME == "grip-rtl" ]
then
continue
fi

echo -e ".sceditor-button-$FILENAME div { background-position: 0px $Y""px; }" >> $OUT

INIMAGES="$INIMAGES $f"
let "Y-=16"
done

montage -mode concatenate -background none -tile 1x $INIMAGES $IMAGE
montage -mode concatenate -background none -tile 1x $IMAGE src/famfamfam/grip.png src/famfamfam/grip-rtl.png $IMAGE

echo -e '' >> $OUT
echo -e 'div.sceditor-grip {' >> $OUT
echo -e ' background-position: 0px -640px;' >> $OUT
echo -e ' width: 10px;' >> $OUT
echo -e ' height: 10px;' >> $OUT
echo -e '}' >> $OUT
echo -e '.rtl div.sceditor-grip { background-position: 0px -650px; }' >> $OUT