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

Duplicate images in avatars #2

Closed
ghost opened this issue Jul 21, 2021 · 10 comments · Fixed by #8
Closed

Duplicate images in avatars #2

ghost opened this issue Jul 21, 2021 · 10 comments · Fixed by #8

Comments

@ghost
Copy link

ghost commented Jul 21, 2021

I installed the mailspring-avatars plugin. It works, but displays two different images for each avatar. MacOS Monterey beta 3

Screenshot

@Akiracr
Copy link

Akiracr commented Sep 6, 2021

I have the same issue on Linux

@Mestima
Copy link

Mestima commented Nov 29, 2021

Same on Windows 11

@forever-possessed
Copy link

Same issue on MacOs 10.14.6
Some also appear broken

@Striffly
Copy link
Owner

Striffly commented Mar 12, 2022

Even after several reinstall (Linux only), I can't reproduce this issue guys sorry 😕

Maybe it's due to a Mailspring update, or a conflict with another plugin ? Did you try to reinstall the plugin?

Repository owner deleted a comment from eyaskd Mar 12, 2022
Repository owner deleted a comment from eyaskd Mar 12, 2022
Repository owner deleted a comment from tennox Mar 12, 2022
@tennox
Copy link

tennox commented Mar 13, 2022

I tried this plugin and saw it not working when installed via snap.
Installed mailspring via deb and now it (and this plugin) seem to work well :)
👍

@andybrice
Copy link

Even after several reinstall (Linux only), I can't reproduce this issue guys sorry 😕

I'm also experiencing this bug. Here are some screenshots and the HTML of an affected element, which may help diagnose the problem.

MailSpring Avatars Bug Duplicate Bug Screenshot 1

MailSpring Avatars Bug Duplicate Bug Screenshot 2

<div data-item-id="t:v34Ff35NtNx3QnF5gHZXWB3yxXX1mX4pLJDS4iHJ"
  style="touch-action: pan-x pan-y; position: absolute; top: 0px; width: 100%; height: 85px;">
  <div class="swipe-backing" style="top: 0px; bottom: 0px; position: absolute;"></div>
  <div style="transform: translate3d(0px, 0px, 0px);">
    <div class="list-item list-tabular-item   " style="height: 85px;">
      <div class="list-column list-column-Item" style="flex: 1 1 0%;">
        <div style="display: flex; align-items: flex-start;">
          <div class="icons-column">
            <div class="thread-icon thread-icon-none thread-icon-star-on-hover" title="Star"></div>
            <div class="thread-injected-icons injected-region-visible"
              style="flex-direction: column; position: relative; display: inline-flex; height: 100%;"><span
                class="name"> role: ThreadListIcon (thread:&lt;Thread&gt;)</span>
              <div class="thread-avatar"
                style="display: inline-block; width: 32px; height: 32px; border-radius: 500px;"><img width="32"
                  height="32" src="http://logo.clearbit.com/InsideApple.Apple.com"
                  style="max-width: 100%; width: 32px; height: 32px; border-radius: 500px;"></div><span
                style="clear: both;"></span>
            </div>
          </div>
          <div class="thread-info-column">
            <div class="participants-wrapper">
              <div class="participants" dir="auto"><span></span><span class="unread-false">Apple</span></div><span
                style="flex: 1 1 0%;"></span>
              <div class="thread-injected-timestamp injected-region-visible"><span class="timestamp">Jun 24</span><span
                  class="name"> role: ThreadListTimestamp (thread:&lt;Thread&gt;, fallback:&lt;Function&gt;)</span><span
                  style="clear: both;"></span></div>
            </div>
            <div class="subject" dir="auto">Meet the new MacBook Pro 13”. Supercharged by M2.</div>
            <div class="snippet-and-labels">
              <div class="snippet" dir="auto">Do even more, even faster with the new MacBook Pro 13”. Available now. &zwnj; &zwnj;
                &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;
                &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;
                &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;
                &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj; &zwnj;&nbsp;</div>
              <div style="flex: 1 1 0%;"></div>
              <div class="thread-injected-mail-labels injected-region-visible"
                style="flex-direction: row; position: relative; display: inline-flex; height: 100%;"><span class="name">
                  role: Thread:MailLabel (thread:&lt;Thread&gt;, messages:&lt;undefined&gt;)</span>
                <div class="thread-avatar"
                  style="display: inline-block; width: 42px; height: 42px; border-radius: 500px;"><img width="42"
                    height="42" src="http://logo.clearbit.com/InsideApple.Apple.com"
                    style="max-width: 100%; width: 42px; height: 42px; border-radius: 500px;"></div><span
                  style="clear: both;"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@andybrice
Copy link

andybrice commented Jul 14, 2022

It appears to me that for each thread, there is first an incorrectly positioned, 32px avatar at:

div.icons-column > div.thread-injected-icons.injected-region-visible > div.thread-avatar > img

And then there's a second, correctly positioned, 42px avatar at:

div.thread-info-column > div.snippet-and-labels > div.thread-injected-mail-labels.injected-region-visible > div.thread-avatar > img

The two avatars have this different width and height specified in the attributes of the img element, and in the inline styles of the img and div elements. Other than that, the html of both avatars is repeated identically.

@andybrice
Copy link

I'm guessing that for some of us, MailSpring is displaying both of these simultaneously:

export function activate() {
ComponentRegistry.register( SmallAvatar, {role: 'ThreadListIcon'});
// See `thread-list-columns.cjsx#L132` -> In Narrow mode, Icons are limited to 1 because of UI issue. Hack around and use MailLabel for larger size
ComponentRegistry.register( LargeAvatar, {role: 'Thread:MailLabel'});
}

(For some unknown reason.)

@GEkuL
Copy link

GEkuL commented Sep 26, 2022

Even after several reinstall (Linux only), I can't reproduce this issue guys sorry confused Maybe it's due to a Mailspring update, or a conflict with another plugin ? Did you try to reinstall the plugin?

Hi, the trouble appear when you make 3 panel view and make the inbox window narrower.
At some point, one avatar becomes 2.

Could you fix the issue, since it still persists? ):

@Striffly
Copy link
Owner

Issue finally resolved ! Sorry for the long wait 😬

Thanks also to all of you for your contributions which allowed me to progress in my debug! I was able to reproduce the bug with a little luck

New release added : https://github.com/Striffly/mailspring-avatars/releases/tag/1.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants