Page MenuHomePhabricator

♻️ Presenting the base set of entities
Closed, ResolvedPublic

Assigned To
Authored By
Anton.Kokh
Jul 25 2024, 9:09 AM
Referenced Files
F57731486: image.png
Nov 22 2024, 11:45 AM
F56922384: image.png
Aug 2 2024, 1:08 PM
F56922376: image.png
Aug 2 2024, 1:01 PM
F56922373: image.png
Aug 2 2024, 1:01 PM
F56670675: image.png
Jul 25 2024, 9:09 AM

Description

We want users to know which entities exactly they will be importing when making use of this feature.

image.png (506×1 px, 58 KB)

image.png (1×1 px, 239 KB)

==== Link to Figma file ====

  • we introduce a button to the card
  • button opens a dialog that lists all included entities, each of which link to the corresponding entitiy on wikidata
  • the button also opens an overlay behind the dialog
  • the dialog has a close button

--> all specs can be found in the figma file (use dev mode to view specs)

Slightly unrelated:

  • please remove the info icon on the top right of the "Details" card (see screenshot) that opens a popover on hover. The information in there is outdated.

image.png (436×898 px, 56 KB)

Acceptance Criteria

  1. For now we will use a button that opens a dialog. When we start offering multiple entity sets or self-curated sets, we will expand the dialog.
  2. The items in the list should link to the corresponding properties and items on Wikidata
  3. This should probably implemented in a way that we don't have to update the presentation manually every time we include/exclude items from the curated list (ideally it will look at the source of truth and get the English labels from Wikidata)

Here's the current list:

Properties

Items

Event Timeline

Anton.Kokh renamed this task from ♻️ Base set of entities to ♻️ Presenting the base set of entities.Jul 25 2024, 9:12 AM
Anton.Kokh moved this task from Needs UX work to Kanban Board Q3 2024 on the Wikibase Cloud board.
Charlie_WMDE updated the task description. (Show Details)
Charlie_WMDE updated the task description. (Show Details)
Charlie_WMDE subscribed.

@Anton.Kokh this ticket has been moved to DONE without pinging me to verify the design and unfiortunately there are two implementation issues that need to be fixed.

  1. The button size should be x-small, not default, as can be seen in the figma specs

1.1 icon size should be SMALL for button but maybe that resolves itself once the button size is adjusted

  1. The button is heigher than the label in hirarchy which means when the card shrinks in size due to the viewport size and both elements can not be arranged horizontally, the button should go above the lable, not below as it currently does.
  2. spacing between button and icon is too small. the defaulkt spacing of a a button with icon in vuetify is larger. I assume when using the propoerties of the button component the spacing should automatically be correct?
  3. Spacing between button and bottom card border is 8px but should be 16px.

should we move the ticket back to todo since the original specs were not fulfilled?

Charlie_WMDE added a subscriber: Fring.
  1. Spacing between button and bottom card border is 8px but should be 16px.

will be fixed in https://phabricator.wikimedia.org/T373129

Tarrow changed the task status from Open to Stalled.Nov 20 2024, 9:07 AM

hey @Andrew-WMDE

the "more info" button doesn't match the vuetify specs. This is the variant that I specified in figma.

image.png (334×448 px, 16 KB)
Let me know if you need more info.

The rest looks great! Thank you!

Tarrow changed the task status from Stalled to Open.Nov 26 2024, 9:05 AM
Tarrow changed the task status from Open to Stalled.

@Charlie_WMDE I don't know if I'm missing something, but Vuetify 2 doesn't seem to have an icon-with-text button, only Vuetify 3 does. I'll need the button specifications if you want me to recreate it.

@Andrew-WMDE ah shit, i didn't realise adding an icon to a text style button isn't possible 😢 that's so dumb... what are our options here?

@Charlie_WMDE I did add an icon but its styling isn't 100% identical to Vuetify 3's version. I can tweak the styling; I just need to know what specifically you want changed.

@Andrew-WMDE i want the styling of the vuetify 2 text button with an icon. which button style have you added the icon to?

@Charlie_WMDE It's switched from plain to text and I removed all custom styling except for a margin-right: 4px; on the icon.

yay, that looks much better, thank you! 🤗

Andrew-WMDE changed the task status from Stalled to Open.Nov 27 2024, 3:24 PM