Skip to content

Commit

Permalink
Consistent FX color scheme for JabRef (#3839)
Browse files Browse the repository at this point in the history
* Separate colors

* More consistent layout

* Remove many explicit color settings and make the style dependent on a few base colors

* Remove color gradients for controls

* Add custom application icons in the same style as existing MaterialDesignIcon

* Fix transparent cell borders for main-table

* Change some icons for consistent visual weight and additional adaptions

In the main toolbar, I changed the "New File" icon because it was an
outlined version while Open and Save is a filled version. For the Open
icon I would like to have the "folder-open", but that is currently not included
in our version.

I changed the Add Entry icon to a filled version as well, since it better fits
the trash. Unfortunately, there is no filled version of Copy and Paste and the
positively filled version of GitHub looks just awful.

I changed the Up, Down, and Close icon for the sidepanel and the entry editor
to versions that look visually more similar in size. Especially, the up and down
was too small.

After correspondence with a friend, I changed the default list item before the
groups into something not so heavy. The small triangle with its vertical side on the
left gives additionally a better impression of the indentation which is the
key here.

The Add Group icon was changed into a heavier circled version. It
now matches the style of the close button of the sidepanel and entry editor.

All icons of "sub toolbars" in the entry editor and the side panel have now
an equal size of 16px.

The preferred height of the side-panel header and the header of the tab-pane
was adjusted so that they match and there is no jump between main-table and
side-panel anymore. There might be a better way to do this.

Finally, the color of the overflow buttons for toolbar and tab-pane was
adjusted.

* Reduce the brightness of highlighted menu, marked text, etc

Slightly reducing this color still looks very nice and it gives a better
impression when text is marked.

* Fix icon sizes of the custom TTF

* Fix OO and Emacs icon.

Additionally, an alternative version for Vim was added and slight
improvements on other icons.

* Fix size of Copy and Paste icon to original one.

* Fix several style issues as reaction to the comments of the PR
  • Loading branch information
Patrick Scheibe authored and tobiasdiez committed Mar 26, 2018
1 parent 972cdc8 commit 6a37f2f
Show file tree
Hide file tree
Showing 9 changed files with 511 additions and 241 deletions.
44 changes: 44 additions & 0 deletions src/main/java/org/jabref/gui/JabRefMaterialDesignIcon.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
package org.jabref.gui;

import de.jensd.fx.glyphs.GlyphIcons;

/**
* Provides the same true-type font interface as MaterialDesignIcon itself, but uses a font we created ourselves that
* contains icons that are not available in MaterialDesignIcons.
*
* @implNote The glyphs of the ttf (speak: the icons) were created with Illustrator and a template from the material design icons
* web-page. The art boards for each icon was exported as SVG and then converted with <a href="https://icomoon.io/app">
* IcoMoon</a>. The final TTF font is located in the resource folder.
* @see <a href="https://github.com/JabRef/jabref/wiki/Custom-SVG-Icons-for-JabRef">Tutorial on our Wiki</a>
* @see <a href="https://materialdesignicons.com/custom">Material Design Icon custom page</a>
*/
public enum JabRefMaterialDesignIcon implements GlyphIcons {

TEX_STUDIO("\ue900"),
TEX_MAKER("\ue901"),
EMACS("\ue902"),
OPEN_OFFICE("\ue903"),
VIM("\ue904"),
LYX("\ue905"),
WINEDT("\ue906"),
ARXIV("\ue907"),
COPY("\ue908"),
PASTE("\ue909");


private final String unicode;

JabRefMaterialDesignIcon(String unicode) {
this.unicode = unicode;
}

@Override
public String unicode() {
return unicode;
}

@Override
public String fontFamily() {
return "\'JabRefMaterialDesign\'";
}
}
Loading

0 comments on commit 6a37f2f

Please sign in to comment.