Skip to content
Permalink
Browse files

Offline icons (#2454)

* font

* css fix and icon rendering

* assets and font link in html head

* more icons

* more css fixes

* replace icon names

* dev docs

* Fonts update

* icons rename

* doc update

* linter fixes

* fix for abapmerge
  • Loading branch information...
sbcgua authored and larshp committed Mar 6, 2019
1 parent fc167ff commit c03bb681b31070abbe173a2d901510222e4ff16c
@@ -2,3 +2,4 @@
node_modules/
package-lock.json
zabapgit.abap
.vscode
@@ -38,3 +38,7 @@ See [dotabap.org](http://dotabap.org)
For questions/comments/bugs/feature requests/wishes please create an [issue](https://github.com/larshp/abapGit/issues)

![abapgit](http://docs.abapgit.org/img/abapgit_1_73_0.png)

## Credits and references

Icons used in abapGit are created from [Font Awesome](https://fontawesome.com/) free icon set ([CC BY 4.0 License](https://fontawesome.com/license/free)).
@@ -0,0 +1,24 @@
---
title: Adding icons
order: 90
---

abapGit uses SIL and MIT licensed fonts, they are included in the distribution as a MIME object. This includes MIME objects:

- ZABAPGIT_ICON_FONT - font in WOFF format containing the custom icon set. WOFF is used due to compatibility, SAP GUI for Windows reuse IE (11)
- ZABAPGIT_ICON_FONT_CSS - CSS icon map

To add an icon to the icon set follow the next procedure:

1. You need `nodejs` installed (version 10 at the time of this doc creation)
2. Download this repo https://github.com/sbcgua/abapgit-icon-font
3. Run `npm install`
4. Download Font Awesome free version from [here](https://fontawesome.com/download)
5. Copy new SVGs to `svg` folder of the repo
6. Run `npm run build`, this will generate `woff` and `css` files in the `build` dir
7. Upload them to the system via SMW0 to the respective objects
8. Preferable commit the change in a separate commit

Please **mind the licensing** when adding icons not from Font Awesome

P.S. Alternatively you can use [w3mipoller](https://github.com/sbcgua/abap_w3mi_poller) for upload step
@@ -141,7 +141,7 @@ div.log {
border-radius: 4px;
}
div.log > span { display:block; }
div.log .octicon { padding-right: 6px; }
div.log .icon { padding-right: 6px; }

/* REPOSITORY */
div.repo {
@@ -165,9 +165,8 @@ div.repo {
font-size: 12pt;
margin-left: 0.5em;
}
.repo_name img {
vertical-align: baseline;
margin: 0 5px 0 5px;
.repo_name .icon {
padding-right: 4px;
}
.repo_attr {
color: grey;
@@ -784,7 +783,7 @@ div.tutorial h2 {
/* icons - text-align strictly left - otherwise look ugly
+ bite a bit of left padding for nicer look
+ forbids item text wrapping (maybe can be done differently) */
.nav-container ul ul li a .octicon {
.nav-container ul ul li a .icon {
padding-right: 10px;
margin-left: -3px;
}
@@ -21,7 +21,7 @@
<RELID>MI</RELID>
<OBJID>ZABAPGIT_CSS_COMMON</OBJID>
<NAME>mimetype</NAME>
<VALUE>text/css</VALUE>
<VALUE>text/plain</VALUE>
</WWWPARAMS>
</PARAMS>
</asx:values>
Binary file not shown.
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_W3MI" serializer_version="v2.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<NAME>ZABAPGIT_ICON_FONT</NAME>
<TEXT>Icon set for abapgit</TEXT>
<PARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_ICON_FONT</OBJID>
<NAME>fileextension</NAME>
<VALUE>.woff</VALUE>
</WWWPARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_ICON_FONT</OBJID>
<NAME>filename</NAME>
<VALUE>ag-icons.woff</VALUE>
</WWWPARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_ICON_FONT</OBJID>
<NAME>mimetype</NAME>
<VALUE>font/woff</VALUE>
</WWWPARAMS>
</PARAMS>
</asx:values>
</asx:abap>
</abapGit>
@@ -0,0 +1,51 @@
@font-face {
font-family: "ag-icons";
font-weight: normal;
font-style: normal;
src: url("../font/ag-icons.woff") format("woff");
}

.icon {
line-height: 1;
}

.icon:before {
font-family: ag-icons !important;
font-style: normal;
font-weight: normal !important;

display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: text-top;
width: 1em;

/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
}

.icon.large { font-size: 200%; }

.icon-arrow-circle-up:before { content: "\f101"; }
.icon-bars:before { content: "\f102"; }
.icon-bolt:before { content: "\f103"; }
.icon-box:before { content: "\f104"; }
.icon-briefcase:before { content: "\f105"; }
.icon-check:before { content: "\f106"; }
.icon-cloud-upload-alt:before { content: "\f107"; }
.icon-code-branch:before { content: "\f108"; }
.icon-cog:before { content: "\f109"; }
.icon-exclamation-circle:before { content: "\f10a"; }
.icon-exclamation-triangle:before { content: "\f10b"; }
.icon-file-alt:before { content: "\f10c"; }
.icon-file-code:before { content: "\f10d"; }
.icon-file-image:before { content: "\f10e"; }
.icon-file:before { content: "\f10f"; }
.icon-fire-alt:before { content: "\f110"; }
.icon-folder:before { content: "\f111"; }
.icon-lock:before { content: "\f112"; }
.icon-plug:before { content: "\f113"; }
.icon-sliders-h:before { content: "\f114"; }
.icon-snowflake:before { content: "\f115"; }
.icon-star:before { content: "\f116"; }
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<abapGit version="v1.0.0" serializer="LCL_OBJECT_W3MI" serializer_version="v2.0.0">
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
<asx:values>
<NAME>ZABAPGIT_ICON_FONT_CSS</NAME>
<TEXT>Icon set for abapgit, css map</TEXT>
<PARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_ICON_FONT_CSS</OBJID>
<NAME>fileextension</NAME>
<VALUE>.css</VALUE>
</WWWPARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_ICON_FONT_CSS</OBJID>
<NAME>filename</NAME>
<VALUE>ag-icons.css</VALUE>
</WWWPARAMS>
<WWWPARAMS>
<RELID>MI</RELID>
<OBJID>ZABAPGIT_ICON_FONT_CSS</OBJID>
<NAME>mimetype</NAME>
<VALUE>text/plain</VALUE>
</WWWPARAMS>
</PARAMS>
</asx:values>
</asx:abap>
</abapGit>
@@ -202,13 +202,30 @@ CLASS ZCL_ABAPGIT_GUI_ASSET_MANAGER IMPLEMENTATION.
rs_asset-subtype = 'javascript'.
lv_mime_name = 'ZABAPGIT_JS_COMMON'.
" @@abapmerge include zabapgit_js_common.w3mi.data.js > _inline '$$'.
WHEN 'css/ag-icons.css'.
rs_asset-url = iv_asset_url.
rs_asset-type = 'text'.
rs_asset-subtype = 'css'.
lv_mime_name = 'ZABAPGIT_ICON_FONT_CSS'.
" @@abapmerge include zabapgit_icon_font_css.w3mi.data.css > _inline '$$'.
WHEN 'font/ag-icons.woff'.
rs_asset-url = iv_asset_url.
rs_asset-type = 'font'.
rs_asset-subtype = 'woff'.
lv_mime_name = 'ZABAPGIT_ICON_FONT'.
" @@abapmerge include-base64 zabapgit_icon_font.w3mi.data.woff > _inline '$$'.
WHEN OTHERS.
zcx_abapgit_exception=>raise( |No inline resource: { iv_asset_url }| ).
ENDCASE.

IF lt_data IS NOT INITIAL.
CONCATENATE LINES OF lt_data INTO lv_str SEPARATED BY zif_abapgit_definitions=>c_newline.
rs_asset-content = zcl_abapgit_string_utils=>string_to_xstring( lv_str ).
IF rs_asset-type = 'text'. " TODO refactor
CONCATENATE LINES OF lt_data INTO lv_str SEPARATED BY zif_abapgit_definitions=>c_newline.
rs_asset-content = zcl_abapgit_string_utils=>string_to_xstring( lv_str ).
ELSE.
CONCATENATE LINES OF lt_data INTO lv_str.
rs_asset-content = zcl_abapgit_string_utils=>base64_to_xstring( lv_str ).
ENDIF.
ELSE.
rs_asset-content = get_mime_asset( lv_mime_name ).
ENDIF.
@@ -230,6 +247,10 @@ CLASS ZCL_ABAPGIT_GUI_ASSET_MANAGER IMPLEMENTATION.
APPEND ls_asset TO rt_assets.
ls_asset = get_textlike_asset( 'js/common.js' ).
APPEND ls_asset TO rt_assets.
ls_asset = get_textlike_asset( 'css/ag-icons.css' ).
APPEND ls_asset TO rt_assets.
ls_asset = get_textlike_asset( 'font/ag-icons.woff' ).
APPEND ls_asset TO rt_assets.

lt_assets = get_inline_images( ).
APPEND LINES OF lt_assets TO rt_assets.
@@ -102,7 +102,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.

CREATE OBJECT ro_html.
ro_html->add( |<span class="{ lv_class }">| ).
ro_html->add_icon( iv_name = 'git-branch/darkgrey' iv_hint = 'Current branch' ).
ro_html->add_icon( iv_name = 'code-branch/grey70' iv_hint = 'Current branch' ).
IF iv_interactive = abap_true.
ro_html->add_a( iv_act = |{ zif_abapgit_definitions=>c_action-git_branch_switch }?{ io_repo->get_key( ) }|
iv_txt = lv_text ).
@@ -147,7 +147,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
ENDIF.

ro_html->add( '<div class="dummydiv error">' ).
ro_html->add( |{ zcl_abapgit_html=>icon( 'alert/red' ) } Error: { lv_error }| ).
ro_html->add( |{ zcl_abapgit_html=>icon( 'exclamation-circle/red' ) } Error: { lv_error }| ).
ro_html->add( '</div>' ).

ENDMETHOD.
@@ -239,7 +239,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.

IF iv_hint IS NOT INITIAL.
ro_html->add( '<div class="info-hint">'
&& zcl_abapgit_html=>icon( iv_name = 'alert' iv_class = 'pad-right' )
&& zcl_abapgit_html=>icon( iv_name = 'exclamation-triangle' iv_class = 'pad-right' )
&& iv_hint
&& '</div>' ).
ENDIF.
@@ -297,7 +297,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
METHOD render_js_error_banner.
CREATE OBJECT ro_html.
ro_html->add( '<div id="js-error-banner" class="dummydiv error">' ).
ro_html->add( |{ zcl_abapgit_html=>icon( 'alert/red' ) }| &&
ro_html->add( |{ zcl_abapgit_html=>icon( 'exclamation-triangle/red' ) }| &&
' If this does not disappear soon,' &&
' then there is a JS init error, please log an issue' ).
ro_html->add( '</div>' ).
@@ -366,7 +366,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
lv_icon = 'plug/darkgrey' ##NO_TEXT.
lv_hint = 'Offline repository' ##NO_TEXT.
ELSE.
lv_icon = 'cloud-upload/blue' ##NO_TEXT.
lv_icon = 'cloud-upload-alt/blue' ##NO_TEXT.
lv_hint = 'On-line repository' ##NO_TEXT.
ENDIF.

@@ -390,9 +390,9 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.
" News
IF io_news IS BOUND AND io_news->has_news( ) = abap_true.
IF io_news->has_updates( ) = abap_true.
lv_icon = 'arrow-up/warning'.
lv_icon = 'arrow-circle-up/warning'.
ELSE.
lv_icon = 'arrow-up/grey80'.
lv_icon = 'arrow-circle-up/grey80'.
ENDIF.
ro_html->add_a( iv_act = |toggleDisplay('news')|
iv_typ = zif_abapgit_definitions=>c_action_type-onclick
@@ -422,7 +422,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.

" Write protect
IF io_repo->get_local_settings( )-write_protected = abap_true.
ro_html->add_icon( iv_name = 'lock/darkgrey' iv_hint = 'Locked from pulls' ).
ro_html->add_icon( iv_name = 'lock/grey70' iv_hint = 'Locked from pulls' ).
ENDIF.

" Branch
@@ -443,7 +443,7 @@ CLASS ZCL_ABAPGIT_GUI_CHUNK_LIB IMPLEMENTATION.

" Package
IF iv_show_package = abap_true.
ro_html->add_icon( iv_name = 'package/darkgrey' iv_hint = 'SAP package' ).
ro_html->add_icon( iv_name = 'box/grey70' iv_hint = 'SAP package' ).
ro_html->add( '<span>' ).
ro_html->add_a( iv_txt = io_repo->get_package( )
iv_act = |{ zif_abapgit_definitions=>c_action-jump_pkg }?{ io_repo->get_package( ) }| ).
@@ -77,13 +77,7 @@ ENDCLASS.



CLASS zcl_abapgit_gui_page IMPLEMENTATION.

METHOD constructor.

mo_settings = zcl_abapgit_persist_settings=>get_instance( )->read( ).

ENDMETHOD.
CLASS ZCL_ABAPGIT_GUI_PAGE IMPLEMENTATION.


METHOD add_hotkeys.
@@ -138,6 +132,13 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.
ENDMETHOD.


METHOD constructor.

mo_settings = zcl_abapgit_persist_settings=>get_instance( )->read( ).

ENDMETHOD.


METHOD footer.

CREATE OBJECT ro_html.
@@ -184,17 +185,9 @@ CLASS zcl_abapgit_gui_page IMPLEMENTATION.

ro_html->add( '<title>abapGit</title>' ). "#EC NOTEXT
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/common.css">' ).
ro_html->add( '<link rel="stylesheet" type="text/css" href="css/ag-icons.css">' ).
ro_html->add( '<script type="text/javascript" src="js/common.js"></script>' ). "#EC NOTEXT

IF mo_settings->get_octicons_disabled( ) = abap_false.

lv_font = |<link rel="stylesheet" type="text/css" href="|
&& 'https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css'
&& '">'. "#EC NOTEXT
ro_html->add( lv_font ). " Web fonts

ENDIF.

ro_html->add( '</head>' ). "#EC NOTEXT

ENDMETHOD.
@@ -200,7 +200,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_MAIN IMPLEMENTATION.
IF lo_repo->is_offline( ) = abap_true.
lv_icon = 'plug/darkgrey'.
ELSE.
lv_icon = 'cloud-upload/blue'.
lv_icon = 'cloud-upload-alt/blue'.
ENDIF.

lo_allbar->add( iv_txt = lv_repo_title
@@ -238,7 +238,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_MAIN IMPLEMENTATION.

ro_html->add( '<td>' ).
ro_html->add( lo_allbar->render_as_droplist(
iv_label = zcl_abapgit_html=>icon( iv_name = 'three-bars/blue' )
iv_label = zcl_abapgit_html=>icon( iv_name = 'bars/blue' )
iv_action = c_actions-overview
iv_right = abap_true
iv_sort = abap_true ) ).
@@ -454,7 +454,7 @@ CLASS ZCL_ABAPGIT_GUI_PAGE_REPO_OVER IMPLEMENTATION.
IF <ls_overview>-type = abap_true.
lv_type_icon = 'plug/darkgrey'.
ELSE.
lv_type_icon = 'cloud-upload/blue'.
lv_type_icon = 'cloud-upload-alt/darkgrey'.
ENDIF.

IF <ls_overview>-favorite = abap_true.
Oops, something went wrong.

0 comments on commit c03bb68

Please sign in to comment.
You can’t perform that action at this time.