search

LightSnowDev / Material-Spring

A theme for the Mailspring E-Mail Client based on Google's Material Design.
MIT License
11 stars 0 forks source link

Share button is too small #4

Open regulskimichal opened 6 years ago

regulskimichal commented 6 years ago

All buttons in toolbar are 16x16, but this one is 11x16. I fixed this already in this branch: https://github.com/regulskimichal/Material-Spring/tree/fix_share_button_size image

regulskimichal commented 6 years ago

I also created pull request

LightSnowDev commented 6 years ago

Well it works for me, since I am on 125% scaling. But on Windows 100% scaling 1080p there is a strange issue (maybe realted to a less, chrome or electron bug)

image

As you can see the share icon is too big. You can force mailspring with css/less zoom: 0.5 !important; inside the debugger to make it the same icon size as the others, easy. Well, actually not: If you write it directly into the less file (search for img[alt="ic-toolbar-native-share.png"]) it does not work. If you change it again in the live-debuger to like 0.50001 it works again.

I have no idea why it makes a difference, since there are only 2 zoom properties applied to this image.

regulskimichal commented 6 years ago

On my Linux I have scaling set on 96DPI which should be similar to 100% on Windows. I also can try to check what will happen when I change it to 120DPI (125%)

regulskimichal commented 6 years ago

120DPI is in my opinion completely unusable, but there is a problem because it's still too small anyways. At least size is pretty close to what I set:

image image

LightSnowDev commented 6 years ago

I tried to fix the share icon with the upper 'button' level in css/html. Have a look at the newest commit. It's hacky, but it works for me with 100, 125 and 150%.

EDIT: nevermind, still the zoom is not applied bug

LightSnowDev commented 6 years ago

It works to insert

  img[alt="ic-toolbar-native-share.png"] {
    -webkit-mask-image: url('mailspring://Material-Spring/img/share.png') !important;
    height: 32px !important;
    width: 32px !important;
    -webkit-mask-size: 16px 16px;
    /* look for: div title="Share" for more details */
  }
  button[title="Share"]{
    /* the zoom: 0.5 for the 'ic-toolbar-native-share.png' icon does not work, so we enable it on the button level */
    padding: 12.5px !important;
  }

but only for 100% (and you have to restart mailspring, not just reload the theme) but this makes the icon small for the others