Overall tag UI planning issue

[jywarren]

This is a planning issue for @lilliankorinek and @shelbyfirebaugh for RGSoC.

Project 1

• dropdown menu for "power tags" #496 and example powertag dropdown [WIP] #1558 (to solve it) -- a simple list of power tags in a dropdown menu so people don't need to know them ahead of time.

Project 2: use a prompt() to create a custom powertag

• Let's say you want to enter a powertag like redirect:858 -- to redirect to the node with ID 858 -- but you want people to input the ID themselves. Let's prompt them for the ID with the JavaScript prompt() function.
• Add a Learn about power tags link to bottom of the dropdown, linking to https://publiclab.org/wiki/power-tags

Project 3: add additional prompt power tags

• code cleanup: let's start to move any repeating JavaScript code into a <script> tag, and keep only the minimum necessary in the dropdown itself. This'll make it easier to read. But you may need to put that code in a closure so it runs after the page has completed loading, so all page scripts are complete before your code runs. Not sure! (closed in prompt for powertag input #1591 #1605)

If so, that'd look like (weird, i know, but it delays running of your script until everything else has loaded):

(function() {
   // ... your code here
})();

• now that JS code is moved into <script> tags, start adding more menu items for other powertags, repeating as little code as possible

[lilliankorinek]

Hello! @jywarren We reviewed the javascript prompt() method for Project 2. Would you like the UI to present itself as a popup box? Is there alternate UI that we could explore? We wanted to double check before we move forward. Thanks!

[jywarren]

I think the prompt() is a pretty decent UI for requesting text input (works on phones too, for example), and although we could do more advanced ones, it's a good starting point. Yeah -- can you make an onClick="..." to add the tag and then test it out locally? Let's do the redirect powertag for this, and if it works, we can expand out to a set of similar powertag prompts. You can probably reuse the text from the powertags docs page for the text the prompt displays, does that make sense?

Also, what if we add a link at the bottom of the dropdown that says Learn about power tags and goes to the docs at https://publiclab.org/wiki/power-tags ? That sounds like a good idea, and is a small enough thing to add to the same pull request.

You'll want to update your master branch once I merge in #1558, so that your changes are in a branch based off the latest version, too -- but feel free to open the PR and I (or others) can help out if there are any merge conflicts or anything. Sometimes it just works out :-)

[jywarren]

I also added a Project 3 with some next steps. Do they look OK? They'll require some problem solving but I think you'll be getting the hang of the PR process by then and we can move faster as well. But hope it's helpful!

[lilliankorinek]

Hey @jywarren!

We are off to a great start this morning. Thank you for laying this all out for us, we really appreciate it. Shelby went inside the bootstrap for the dropdown and fixed the dimensions so the dropdown menu is inline with the input box--more like the actual example on bootstrap. How do we push these changes to you? Does an individual PR need to be opened?

Also, we looked over the power tags and are looking forward to working on these projects in the next couple of days. A few quick questions: 1) There are so many powertags! Conceptually some of the powertags are difficult to understand, especially for people with limited experience like the two of us. Can you please send examples of instances when key:value and events:foo are used in a research note? Additionally, do you have an idea regarding which tags are used most often (we are assuming question:foo & response:foo). Our thinking is that this kind of user info might be useful when we start planning how the dropdown to be organized :)

[jywarren]

Great to hear it!

Does an individual PR need to be opened?

Yep!

re: powertags, just start with a few that make sense to you -- I think focusing on just a subset is fine. Say:

• question:______ (takes a topic name like dust or mining)
• parent:_______ (takes a "slug" or URL string like sandbox for /wiki/sandbox
• response:_______ (takes a node id)

Starting with any of these is fine!

[jywarren]

so, for parent the prompt would say:

Enter the "slug" of another wiki page which will become this page's parent. For example, the slug for /wiki/sandbox would be simply "sandbox".

Make sense?

[lilliankorinek]

Hi @jywarren!

Shelby & I have some updates we wanted to share with you + get feedback on.

Shelby successfully coded the with: username (which, might have some issues involving the database) and the style: fancy tag. Before we move forward coding more, we wanted to share some of the ideas we have discussed regarding the UI design.

We would like to divide the tags into dropdown menus that can be described as "general powertags" and "specific powertags". For example, with: username is extremely specific and requires less explanation then in-line (especially if the person contributing lacks coding experience).

*On that note, we wanted to know if you have any ideas on how we can address the UI of in-line, being that these powertags will exist in the middle of wikis.

Does this make sense? general verses specific?

[shelbyfirebaugh]

here's some screenshots of the powertag-adding process

upon selecting a powertag that requires input, a new input box appears (i need to fix it so that the title of the tag shows on the dropdown, forgot about that)

the user types into the input (i made the style:fancy tag require input in this case because i was getting some errors with the with:username tag, i think because i'm not running the actual database on my local version so it can't search for the username..?)

the user hits return, and the tag is added

[jywarren]

Ooh, this looks good, but did you want to try for the simpler "prompt()" based input first? As a stepping stone? Also, do you think you could put the power tags dropdown on the right side of the tags input itself? What about using a Bootstrap Popup which could contain the input? But I think it could make sense to use the simpler built-in `prompt()` first to see how it works to require user input at all, before tackling the UI design of the next step. It also has a built-in UI for phones, which is nice. Try it out on the javascript console! `var string = prompt("enter some text"); console.log(string);`

…

On Mon, Aug 21, 2017 at 10:15 PM, shelbyfirebaugh ***@***.***> wrote: here's some screenshots of the powertag-adding process [image: screen shot 2017-08-21 at 22 08 17] <https://user-images.githubusercontent.com/14167695/29545660-89d9b88e-86bd-11e7-9290-24017083023f.png> upon selecting a powertag that requires input, a new input box appears (i need to fix it so that the title of the tag shows on the dropdown, forgot about that) [image: screen shot 2017-08-21 at 22 08 30] <https://user-images.githubusercontent.com/14167695/29545673-9af0213a-86bd-11e7-9fd3-6e4dbe882f8f.png> the user types into the input (i made the style:fancy tag require input in this case because i was getting some errors with the with:username tag, i think because i'm not running the actual database on my local version so it can't search for the username..?) [image: screen shot 2017-08-21 at 22 08 41] <https://user-images.githubusercontent.com/14167695/29545685-b529ee32-86bd-11e7-9656-4dcef9aed871.png> the user hits return, and the tag is added [image: screen shot 2017-08-21 at 22 08 49] <https://user-images.githubusercontent.com/14167695/29545720-ee871b78-86bd-11e7-9019-c16916126f51.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1560 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ4nM180N0m9pWmdVa2Ht7u03V-9-ks5sajmmgaJpZM4OqOVr> .

[shelbyfirebaugh]

hey @jywarren , i changed the code to use prompt instead, moved the dropdown to the right side of the input, and added a link to the powertag documentation inside of the dropdown

we are going to open a new issue for this code right now, but let me know if there's anything else you want us to change

[jywarren]

ooh! sorry i'm slow on this, but it looks good! Maybe it could say "What kind of style? (fancy, ...)" to offer known possibilities?

[jywarren]

Hi, folks! Hope you're doing well here! I think we can close this out as complete, woohoo!

Just wanted to say that you two did some great work, and we really appreciate it! Do you have any interest in helping to prepare some first-timers-only issues yourself, by chance?

There's some guidance on this here, and we'd love to have your involvement: https://github.com/publiclab/plots2/projects/4

For example, you could guide a few people through making their own entries on the power tags dropdown menu, for example for these powertags:

• parent:____ - for wiki pages; needs the "slug" of the page that should be the parent, so balloon-mapping for the page /wiki/balloon-mapping
• redirect:____ - with the ID of the redirect destination node
• series:____ -- displays a message of "This is part of a series on tagname." with a link to /tag/tagname

The code to add new powertags is here: https://github.com/publiclab/plots2/blob/master/app/views/tag/_advanced_tagging.html.erb#L5

and there's a corresponding switch statement further down the page to actually do the prompt. This would make a pretty good first-timers-only issue!