This is the layout I suggest:
RDFUI layout

CommentFileSizeAuthor
#8 835350-8-rdf-ui-form-cleanup.patch13.83 KBmilesw
#8 835350-8-rdf-ui-form-fields.jpg83.47 KBmilesw
#8 835350-8-rdf-ui-form-types.jpg73.93 KBmilesw
#5 835350_almost_there_datatype.png76.09 KBscor
#2 rdf-ui-task-835350-2.patch8.08 KBcyberswat
#1 835350_1_rdfui_prototype.png94.38 KBscor
rdfui_mockup.png106.97 KBscor

Comments

scor’s picture

scor commented
StatusFileSize
new 835350_1_rdfui_prototype.png94.38 KB

vertical tabs could save a lot of real estate too, I'm attaching another mockup
835350_1_rdfui_prototype.png

cyberswat’s picture

cyberswat commented
Status: Active » Needs review
StatusFileSize
new rdf-ui-task-835350-2.patch8.08 KB

Here's a version that comes relatively close to what you illustrated. At some point the 3 fields should be turned into a complex widget so that it can be implemented in a pure d7 fashion. This is my first time trying out git so apologies if this messes up ;)

scor’s picture

scor commented

awesome Kevin, will try this asap (tonight)!

Poetro’s picture

Poetro commented

Your welcome on making the JavaScript part to update the tabs' description.

scor’s picture

scor commented
Status: Needs review » Needs work
StatusFileSize
new 835350_almost_there_datatype.png76.09 KB

Fantastic work Kevin and Peter! I've committed #2 as it really makes the form much easier to deal with.

The datatype looks weird on my localhost, I swear it looked better on your machine Kevin.

Anonymous’s picture

Anonymous (not verified) commented

Thanks again, looks sweeet!

Unfortunately, I noticed a small issue when scor was demonstrating it today. When a predicate is selected in the drop down, the whole predicate doesn't show up in the vertical tab, only the characters that were used for matching.

Also, the word property shows up in the vertical tab because it is the default. It might be good to not show the relationship type for fields that are not yet mapped to predicates.

milesw’s picture

milesw commented
Assigned: Unassigned » milesw

I'll try and take care of the issues Lin mentioned in #6.

milesw’s picture

milesw commented
StatusFileSize
new 835350-8-rdf-ui-form-types.jpg73.93 KB
new 835350-8-rdf-ui-form-fields.jpg83.47 KB
new 835350-8-rdf-ui-form-cleanup.patch13.83 KB

Alright, I've got a patch here with a bunch of small changes. I used 'git format-patch' so that commits can be cherry-picked. Looking at the patch, it should be pretty clear what each commit involves. Screenshots attached.

Summary
- Fixed the second issue from #6 where the attribute shows up in the vertical tab when there are no predicates
- Edited form field descriptions to be more concise (sorry, I've been inspired after watching Bojhan and Roy's DC talk)
- Added a drupal_set_message confirmation when mappings get saved
- Added some real help text
- Removed the custom markup and CSS that put Datatype on the right side. I think this makes the form cleaner and more Drupaly, but if others like the original layout, we can ignore this commit.

The first issue from #6 isn't fixed yet. I'm noticing some other quirks with autocomplete, so I'll look at them together.

Thanks for all the great work that has already gone into these forms!

milesw’s picture

milesw commented
Status: Needs work » Needs review

Changing status

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Reviewed & tested by the community

Rock on, milesw! nice improvements to the descriptions.

I actually do like the attribute and datatype side-by-side better, but there is a bug with vertical tabs and form elements right now that makes it display funny within the vertical tabs. Until that is fixed, I think it's best to revert to default styling as you have.

Here is the issue for the vertical tabs css problem: #1143712: vertical-tabs CSS overrides '#size' on inner textfields

If there are no objections, I'll commit this tomorrow.

milesw’s picture

milesw commented

Ah, so the CSS issue you filed was the cause of scor's issue in #5? Nice find. :)

Turns out the drop down issue you mentioned in #6 is a conflict between vertical tabs and autocomplete in core. You may have noticed that it's necessary to hit enter twice using the RDF UI autocomplete inputs - it shouldn't behave that way. This is really a core issue and I'm not sure what we can do about it. #1068124: Autocomplete doesn't handle Enter key well when in vertical_tabs

Anonymous’s picture

Anonymous (not verified) commented
Status: Reviewed & tested by the community » Fixed

Fixed with commit http://drupalcode.org/project/rdf.git/commit/beb433a

I'm really sorry that i didn't get the commit right ot give credit to milesw... how did you do that scor? I figured it would just parse from the commit message.

milesw’s picture

milesw commented

Awesome, thanks for getting these changes committed. No need to apologize about assigning credit, but thanks for considering it. :)

scor’s picture

scor commented

git commit --author="milesw <milesw@453524.no-reply.drupal.org>"
though now that milesw is present in the git repo history you can just do
git commit --author=milesw
and git will lookup his email in the commit history.

milesw’s picture

milesw commented
Project: Resource Description Framework (RDF) » RDF Extensions
Component: D7. RDF UI » User interface

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.