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

GUI overhaul and theming #80

Closed
psistorm opened this Issue Jul 4, 2016 · 11 comments

Comments

Projects
None yet
6 participants
@psistorm

psistorm commented Jul 4, 2016

On MacOS I'm a heavy Alfred user and also liked the ability to create my own theme for it. I would appreciate a possibility to change the theme for Keypirinha as well.
I don't need the possibility to change the complete shape of the input window. I rather mean the colouring (window, input, font, selected catalog item, ...), font size and probably also the size or transparency of the input dialog.
Other than change the shape, I guess changes in the named areas also won't really influence performance which should of course be the top priority.
It may also be nice to have some sort of exchange format for themes, so users can share themes with each other.

@polyvertex

This comment has been minimized.

Show comment
Hide comment
@polyvertex

polyvertex Jul 4, 2016

Member

As with many requests that have been made so far, this one is in my todo list. The base of the implementation will be exactly as you imagine it: colors, fonts and fonts sizes will be configurable (not the shape), EDIT and it won't be part of the regular configuration scheme, rather packed in a dedicated and exchangeable container of some form. A .keypirinha-theme zip archive perhaps, that would embed at least an .ini file for the theme setup itself. And this .ini file could take advantage of the value interpolation feature that is already available for regular configuration files, which means themes could also automatically be tweaked according to the current machine (i.e.: mytheme.@machine-name.ini).

EDIT note to self, take #100, #152, and #140 into account.

Member

polyvertex commented Jul 4, 2016

As with many requests that have been made so far, this one is in my todo list. The base of the implementation will be exactly as you imagine it: colors, fonts and fonts sizes will be configurable (not the shape), EDIT and it won't be part of the regular configuration scheme, rather packed in a dedicated and exchangeable container of some form. A .keypirinha-theme zip archive perhaps, that would embed at least an .ini file for the theme setup itself. And this .ini file could take advantage of the value interpolation feature that is already available for regular configuration files, which means themes could also automatically be tweaked according to the current machine (i.e.: mytheme.@machine-name.ini).

EDIT note to self, take #100, #152, and #140 into account.

@S-ed

This comment has been minimized.

Show comment
Hide comment
@S-ed

S-ed Oct 23, 2016

Personally would like to:

  • make scrollbars look good
  • rid of unnecessary elements
    • close X button
    • icon on the top-left
    • app title on the bottom of the list
  • make ui semitransparent

Now it looks like "blast from the past" (from 2000s). No offense here, some people probably like it...

WOX

S-ed commented Oct 23, 2016

Personally would like to:

  • make scrollbars look good
  • rid of unnecessary elements
    • close X button
    • icon on the top-left
    • app title on the bottom of the list
  • make ui semitransparent

Now it looks like "blast from the past" (from 2000s). No offense here, some people probably like it...

WOX

@ZIEXED

This comment has been minimized.

Show comment
Hide comment
@ZIEXED

ZIEXED Oct 23, 2016

I agree with @S-ed except the last point "semitransparent"

ZIEXED commented Oct 23, 2016

I agree with @S-ed except the last point "semitransparent"

@polyvertex

This comment has been minimized.

Show comment
Hide comment
@polyvertex

polyvertex Oct 23, 2016

Member

@S-ed Fair enough... The GUI hasn't received a lot of attention thorough the development of Keypirinha.

Member

polyvertex commented Oct 23, 2016

@S-ed Fair enough... The GUI hasn't received a lot of attention thorough the development of Keypirinha.

@Cantello

This comment has been minimized.

Show comment
Hide comment
@Cantello

Cantello Oct 23, 2016

@S-ed looks - would like to have kp like that!
(ex-Alfred user)

Cantello commented Oct 23, 2016

@S-ed looks - would like to have kp like that!
(ex-Alfred user)

@S-ed

This comment has been minimized.

Show comment
Hide comment
@S-ed

S-ed Oct 24, 2016

@ZIEXED It's not mandatory, just an option

@polyvertex Glad You not feeling offended. Only best wishes.

@Cantello the screenshot from WOX, it has own issues... My brother is an iOS developer, and I'm using Mac sometimes, love some features in UI. Best thing ever is "no main window" apps.

S-ed commented Oct 24, 2016

@ZIEXED It's not mandatory, just an option

@polyvertex Glad You not feeling offended. Only best wishes.

@Cantello the screenshot from WOX, it has own issues... My brother is an iOS developer, and I'm using Mac sometimes, love some features in UI. Best thing ever is "no main window" apps.

@mtaki14

This comment has been minimized.

Show comment
Hide comment
@mtaki14

mtaki14 Jan 26, 2017

+1

On hiding scrollbars or better yet applying some subtle skinning to them as in the WOX screenshot.

mtaki14 commented Jan 26, 2017

+1

On hiding scrollbars or better yet applying some subtle skinning to them as in the WOX screenshot.

@polyvertex polyvertex changed the title from Theming to GUI overhaul and theming Feb 6, 2017

@polyvertex

This comment has been minimized.

Show comment
Hide comment
@polyvertex

polyvertex Apr 10, 2017

Member

Update on this, v2.14 (to be released) will see an overhaul both at visual and functional levels, mainly:

  • Default theme is "cleaner"
  • Single-click mode as an option (request by @pwn0r in #100)
  • Launch an item directly using a Ctrl+Numpad0 to Ctrl+Numpad9 shortcuts or Ctrl+0 to Ctrl+9 (as requested by @timns in the chat room)
  • Theme support:
    • Transparency
    • Colors (with support for common CSS syntax: #fff, #ffffff, rgb(r,g,b), ...)
    • Fonts (faces, size, style)
    • Satellite icon position and size
    • Removal of elements (status, scroll bar, satellite icon, list icons, score, history hits, ...)
    • Controls padding and margins
    • Themes are "cascadable" optionally so that a theme can be cut in logical groups for example (colors, layout, fonts) in order to apply it in a more fine-grained fashion according to the current machine KP is being ran for example

However, while the ugly Windows-style scrollbar is removable, it doesn't get replaced by a more visually-decent one for now. Also, on the contrary to what I wrote in my first reply, theme settings will be part of the main config file.

Member

polyvertex commented Apr 10, 2017

Update on this, v2.14 (to be released) will see an overhaul both at visual and functional levels, mainly:

  • Default theme is "cleaner"
  • Single-click mode as an option (request by @pwn0r in #100)
  • Launch an item directly using a Ctrl+Numpad0 to Ctrl+Numpad9 shortcuts or Ctrl+0 to Ctrl+9 (as requested by @timns in the chat room)
  • Theme support:
    • Transparency
    • Colors (with support for common CSS syntax: #fff, #ffffff, rgb(r,g,b), ...)
    • Fonts (faces, size, style)
    • Satellite icon position and size
    • Removal of elements (status, scroll bar, satellite icon, list icons, score, history hits, ...)
    • Controls padding and margins
    • Themes are "cascadable" optionally so that a theme can be cut in logical groups for example (colors, layout, fonts) in order to apply it in a more fine-grained fashion according to the current machine KP is being ran for example

However, while the ugly Windows-style scrollbar is removable, it doesn't get replaced by a more visually-decent one for now. Also, on the contrary to what I wrote in my first reply, theme settings will be part of the main config file.

@polyvertex

This comment has been minimized.

Show comment
Hide comment
@polyvertex

polyvertex Apr 12, 2017

Member

Theming is supported by v2.14

Member

polyvertex commented Apr 12, 2017

Theming is supported by v2.14

@polyvertex polyvertex closed this Apr 12, 2017

@S-ed

This comment has been minimized.

Show comment
Hide comment
@S-ed

S-ed Dec 26, 2017

I've tried to use theming. And had some issues with it.

  • Transparency is set for everything, not just backgrounds (i'd prefer text and icons to be completely opaque)
  • Icon of currently focused element is always semitransparent (i have no clue why and how to make it opaque)

screenshot 1514329858

[theme/Slate]
font_face = Comfortaa, Andale, Arial, Segoe UI

font_small_size = 12
font_small_style = cleartype
font_normal_size = 24
font_normal_style = cleartype
font_large_size = 32
font_large_style = cleartype

color_background = #252525
color_textbox_back = #252525
color_listitem_back = #252525

color_foreground = #ccc
color_faded = #999999
color_accent = #ff9000

#I have no clue what those 3 colors do
color_warn = #f00
color_title = #0ff
color_status = #f0f
#^??

color_listitem_title = #ccc
color_listitem_desc = #666
color_listitem_tips = #999

color_listitem_selected_back = #393020
color_listitem_selected_title = #fff
color_listitem_selected_desc = #999
color_listitem_selected_tips = #fff

layout = list_selmark, list_icon, list_dialnum, list_actions, list_hits, status

satellite_show = never
satellite_pos = topleft
satellite_size = large

control_margin = 2
textbox_padding = 1
listitem_padding = 12

opacity_back = 93

[gui]
theme = Slate
always_on_top = yes

S-ed commented Dec 26, 2017

I've tried to use theming. And had some issues with it.

  • Transparency is set for everything, not just backgrounds (i'd prefer text and icons to be completely opaque)
  • Icon of currently focused element is always semitransparent (i have no clue why and how to make it opaque)

screenshot 1514329858

[theme/Slate]
font_face = Comfortaa, Andale, Arial, Segoe UI

font_small_size = 12
font_small_style = cleartype
font_normal_size = 24
font_normal_style = cleartype
font_large_size = 32
font_large_style = cleartype

color_background = #252525
color_textbox_back = #252525
color_listitem_back = #252525

color_foreground = #ccc
color_faded = #999999
color_accent = #ff9000

#I have no clue what those 3 colors do
color_warn = #f00
color_title = #0ff
color_status = #f0f
#^??

color_listitem_title = #ccc
color_listitem_desc = #666
color_listitem_tips = #999

color_listitem_selected_back = #393020
color_listitem_selected_title = #fff
color_listitem_selected_desc = #999
color_listitem_selected_tips = #fff

layout = list_selmark, list_icon, list_dialnum, list_actions, list_hits, status

satellite_show = never
satellite_pos = topleft
satellite_size = large

control_margin = 2
textbox_padding = 1
listitem_padding = 12

opacity_back = 93

[gui]
theme = Slate
always_on_top = yes
@polyvertex

This comment has been minimized.

Show comment
Hide comment
@polyvertex

polyvertex Dec 27, 2017

Member

Transparency is set for everything [...] (i'd prefer text and icons to be completely opaque)

Yes, due to the usage of the Windows API, transparency can only be enabled for the whole window and its content, or disabled.

Icon of currently focused element is always semitransparent

I guess this could be added as an option but its implementation would be very low in priority I'm afraid.

I have no clue what those 3 colors do

  • color_title and color_status are actually not used internally. A bug I found out about only recently and that will be corrected in the next release. For now they both (erroneously) map to color_foreground.
  • color_title is applied to the text displayed in the top-left corner of the window when entering arguments for an item (i.e. text is item's name).
  • color_status is meant to be applied to the text of the status bar.
  • color_warn (not bugged) is applied to so-called ERROR items, which are special items sent by the plugins used to display any kind of warning/error message. You will not see it often, if at all.

Some inline documentation will be added for that

Member

polyvertex commented Dec 27, 2017

Transparency is set for everything [...] (i'd prefer text and icons to be completely opaque)

Yes, due to the usage of the Windows API, transparency can only be enabled for the whole window and its content, or disabled.

Icon of currently focused element is always semitransparent

I guess this could be added as an option but its implementation would be very low in priority I'm afraid.

I have no clue what those 3 colors do

  • color_title and color_status are actually not used internally. A bug I found out about only recently and that will be corrected in the next release. For now they both (erroneously) map to color_foreground.
  • color_title is applied to the text displayed in the top-left corner of the window when entering arguments for an item (i.e. text is item's name).
  • color_status is meant to be applied to the text of the status bar.
  • color_warn (not bugged) is applied to so-called ERROR items, which are special items sent by the plugins used to display any kind of warning/error message. You will not see it often, if at all.

Some inline documentation will be added for that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment