homer icon indicating copy to clipboard operation
homer copied to clipboard

[FR] Additional item's icon

Open 0xN0x opened this issue 2 years ago • 1 comments

It would be good to be able to add an optional little icon on the for each items.

It could be useful and cleaner than using the description or tag to explain a little idea like:

  • it need authentication
  • only from internal network

A little example made quickly :

example

I should be able to PR this if you think it's a good idea.

0xN0x avatar Dec 01 '21 16:12 0xN0x

Hi @0xN0x !

That sounds like a good idea ! All services are based on a generic layout which offer a indicator slot (I don't know if your are familiar with that) and custom service extend this layout to add some features (ex: Adguard).

2021-12-12T09:02:15,069493227+01:00

I think we can modify the Generic layout to look for an indicator icon in the config as default content of the indicator slot, and let custom services override it if needed.

What do you think ? If you want to do it, feel free to open a pull request !

bastienwirtz avatar Dec 12 '21 08:12 bastienwirtz

Hi!

I just found this as I was looking to make a similar config. Seems like an easy changes, I can make a PR. Only thing is, code get quite repetitive:

Existing conde for current logo/icon on left side:

<slot name="icon">
  <div v-if="item.logo" class="media-left">
    <figure class="image is-48x48">
      <img :src="item.logo" :alt="`${item.name} logo`" />
    </figure>
  </div>
  <div v-if="item.icon" class="media-left">
    <figure class="image is-48x48">
      <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
    </figure>
  </div>
</slot>

new code for indicator slot:

<slot name="indicator" class="indicator">
  <div v-if="item.indicator_logo" class="media-right">
    <figure class="image is-48x48">
      <img :src="item.indicator_logo" :alt="`${item.name} logo`" />
    </figure>
  </div>
  <div v-if="item.indicator_icon" class="media-right">
    <figure class="image is-48x48">
      <i style="font-size: 35px" :class="['fa-fw', item.indicator_icon]"></i>
    </figure>
  </div>
</slot>

I think it would make sense to add an IconLogo component with two properties: the logo/icon itself and the side (right|left).

What do you think @bastienwirtz ?

luixal avatar Oct 24 '22 16:10 luixal