Page MenuHomePhabricator

Update Categories overlay look
Closed, DuplicatePublic

Assigned To
Authored By
Aug 4 2016, 6:55 PM
Referenced Files
F6302732: Screen Shot 2017-03-07 at 12.53.23 PM.png
Mar 7 2017, 8:55 PM
F5711532: pasted_file
Feb 19 2017, 8:57 PM
F4352105: Artboard.png
Aug 11 2016, 12:21 AM
F4352104: Artboard Copy.png
Aug 11 2016, 12:21 AM
F4352091: Artboard.png
Aug 11 2016, 12:20 AM
F4352101: IMG_1085.PNG
Aug 11 2016, 12:20 AM
F4352089: footer - old edited copy 2.png
Aug 11 2016, 12:20 AM
F4352092: footer - old edited.png
Aug 11 2016, 12:20 AM


Event Timeline

@Nirzar, how would the click on "Add new" button and the "Organization" tab look?

Here are more mocks

footer - old edited copy 2.png (1×750 px, 65 KB)

Artboard Copy.png (1×2 px, 212 KB)

Artboard.png (1×2 px, 221 KB)

footer - old edited.png (1×750 px, 298 KB)

@Nirzar, how would the click on "Add new" button and the "Organization" tab look?

I will work on components which we can upstream. as far as i know, we have a tab controller (segmented controller) in watch list page right now, which is not polished and has alignment issues. maybe we can fix the source component and use it too?

IMG_1085.PNG (1×750 px, 93 KB)
^ what is happening here with the padding :P

Small note. Be careful with just randomly 'renaming' from Hidden categories to "Organizational categories". First of all, it's inconsistent with what core uses, and inconsistent with current documentation and while it is a description that closely matches how we use hidden categories in wikipedia, i'm not entirely sure that is a distinction made everywhere.

And lastly the presence of that those hidden categories is depending on a user preference of course.

@TheDJ to be honest i have very little knowledge about the structure of categories. i was keeping the functionality of it just like it is now on mobile web.

would like to open up discussion on the way it works? in that case, i will need to go read up about organizational categories"

this task was more about interface fixes.


for instance for a page that has many categories, all of which are 'organizational' in nature and none of which are hidden.

Overall you could divide the categories into 3 content types:
1: Content categories
2: Organizational categories, used mostly outside of content namespaces
3: Maintenance and tracking categories, which are not visible to IP users and opt-in visible for registered users. (hidden categories)

The technical division is 1+2 (visible) and 3 (hidden), while the wording of mobile frontend implies 1 and 2+3.

There is no good technical methodology at the moment to make a distinction between 1 and 2, since it mostly depends on the contents that are put into the category.

They're currently named "Organizational" but it would be trivial to change to "Hidden" - although then that's a bit weird like having a sign for a secret nuclear bunker (near where I grew up ;-)).

Out of interest how do you see hidden categories in the desktop interface?
Could we improve this by just having a button "Show hidden categories" ?

Sorry that I wasn't active here a long time.

I reworked the styles a little bit, based on the mocks provided by @Nirzar and the comments of @Jdlrobson on the change. The result is something like:

pasted_file (562×442 px, 31 KB)

I used the mw-ui-button styles for the category styles, as I couldn't see what grey and what spaces was used in the mock for the catgeory buttons. Additionally I lowered the font-size to 0.9em, as I would say, that the font is smaller as the content in the mock, but I couldn't see what size was used.

Font size of the heading is looking a little big to me and on tablet is indented...

Screen Shot 2017-03-07 at 12.53.23 PM.png (257×808 px, 28 KB)

mw-ui-button styles for the category style

can we use CapsuleMultiselectWidget style instead? without the crosses?
just the style I mean not the actual OOJS UI widget.

but I couldn't see what size was used.

Let me add that to zeplin. you are already on that project i guess. you can inspect all font sizes and paddings

@Nirzar: We probably can take a look of the styles from teh Capsule widget, however, this would be a single widget, which uses these styles in mobile web (and even not on a page, where the user can edit). Wouldn't this be confusing for a user to have a "completely" different design (given, that, e.g., the footer and the "Read more" links have another style?)?

Coincidentally I'm working on capsule styling that goes with out UI kit. I actually wanted to distinguish tags and buttons visually because they have different purposes. I wanted to tags to be lightweight because multiple of them appear next to each other. in our case we have limit of 3 but we should have same design in Visual Editor when you are adding category tags. I'm working with them to find a single solution for this. till then I think you can keep the styling as is. the font size for categories seem very big on tablets.

Jdlrobson lowered the priority of this task from Medium to Low.May 17 2017, 9:17 AM
Jdlrobson added a project: patch-welcome.

Reflecting reality.