Development Discussion

This is the venue for development or more technically minded users to comment on features in active development, or for feedback from general users to be solicited.

If you have more abstract suggestions, it may be more appropriate to make them in the suggestions thread:

http://chan.sankakucomplex.com/forum/show/276

diortumsan

1 year ago

Thanks for the thread.

We're currently working on a thumbnail toolbar and context menu which will work completely on client side with the help of javascript. It will surpress the current tooltip and provide a few commands for favoriting, editing and viewing images.

This is how it will look like: http://imgur.com/xDN7fmY (this is an old image, can't upload the new one right now)

I already programmed the Listeners, the info below the thumb and div-containers around the thumbs, which also work fine with the paginator. Currently working on the toolbar.

Any feedback and idea on this is welcome.

System

1 year ago

I'm not sure if you already have a working layout, but "icons on an opaque grey backing overlaid on top of the image" and "icons with no backing hovering over the image" also seem to be reasonable layout options. The latter introduces colour issues and potentially confusing boundaries between icon and underlying image so it is perhaps not the optimal choice. The former may be necessary if there are thumbnail layout issues with additional spacing required, as in the diagram now.

Folding the "i" option into the "mode" menu (as the default perhaps) might be a better choice as well - that takes the icons required down to 2-3 depending on how the mode menu selector is added.

There was also a further addition which might be preferable to having the "tooltip" area absorb the AJAX update response messages - rework the response field universally to display as a message bar which slides down the top of the viewport and either dismisses itself after a few seconds or is dismissed by a click. That would allow anyone way down on any page to see an interactive response to their action.

Since we should be consistent about the icons used, stars are the most obvious and already employed icon for rating/review, so the "single star" favorite/bookmark icon would be a confusing choice. Thus we have "heart" - which seems to be a popular choice amongst those I have spoken to. I don't know if anyone else has feelings about this.

Also, if we settle on "heart" as the idiom for favoriting, it might make sense to add it to the post/show pages as well.

diortumsan

1 year ago

I hade some time to work on this topic again.

Current state:
https://www.youtube.com/watch?v=9Kg35HbbmP0

Source code:
http://pastebin.com/qtFETNgf

CSS file:
http://pastebin.com/YU5M2jJb

System said:
I'm not sure if you already have a working layout, but "icons on an opaque grey backing overlaid on top of the image" and "icons with no backing hovering over the image" also seem to be reasonable layout options. The latter introduces colour issues and potentially confusing boundaries between icon and underlying image so it is perhaps not the optimal choice. The former may be necessary if there are thumbnail layout issues with additional spacing required, as in the diagram now.

The layout and design can be decided later on. I made the toolbar and all the other elements easily customizable in css (see the css file).

System said:
Folding the "i" option into the "mode" menu (as the default perhaps) might be a better choice as well - that takes the icons required down to 2-3 depending on how the mode menu selector is added.

Yeap. Decided to take the icon out and make a tooltip like on e621 for the tags. I think that'd be enough.

System said:
There was also a further addition which might be preferable to having the "tooltip" area absorb the AJAX update response messages - rework the response field universally to display as a message bar which slides down the top of the viewport and either dismisses itself after a few seconds or is dismissed by a click. That would allow anyone way down on any page to see an interactive response to their action.

That's a nice idea. I will make a content-changed-listener for the current noticebox for that.

I will update the program map, since I changed a lot of stuff during the programming process.

diortumsan

1 year ago

Programmed the quick edit feature for the hardcore taggers amongst us:

https://www.youtube.com/watch?v=f2aGZtxPXxw

Clicking on the thumb loads the image from post/show/ into a 500x500 container. I get sometimes a hotlinking error while loading the image though, but in most cases it loads the image. Wondering what the criterias are for hotlinking.

Edit:
This can be improved a lot. I will make it so, that the tags from the posts are displayed, too, when loading the post/show/ image.

Edit 2:
Here is the better one: https://www.youtube.com/watch?v=e2UvQhVuzpg
I think this way tagging will be really comfortable.

diortumsan

1 year ago

Design:

I made a pretty decent design for Sankaku, which fits the color palette of the site very good. I still need some icons for the first 4 mode commands.

Translations:

I also need someone, who can translate all the commands and informations into moon speak. I will provide a list with commands the next time.

Preview:

It won't be necessary to make the thumbs bigger anymore, because the add-to-fav icon will be really useful with the preview mode, since you are able to see what you are favoriting. Still getting hot-linking error sometimes, even though the whole post container is loaded into a hidden container.
Should I put ads above the preview image? The ads would be the one from the post page (which are pretty huge with 200px in height, maybe there are smaller ads I can put up there).

Changes during programming process:

Left out following commands:

Edit tag script / Apply tag script: I don't know if anyone uses these, but the current application is not very userfriendly. If there is any need for these commands, I can make a better version of this later on. But it's not in the menu for now.
Merge tags: This command was supposed to merge tags with a chosen or the parent post. But it's gone now.
Copy tags to clipboard: I really wanted this command, but unfortunately you can't copy stuff directly from javascript into clipboard and need a lot of weird third party scripts, which use SWFs to copy.

See the On-hover-menus in action:

Mode Options: https://www.youtube.com/watch?v=zVyVDdwR5FE
Advanced operations: https://www.youtube.com/watch?v=GdVgyJXje_0

JS source: http://pastebin.com/Hj8std13
CSS source: http://pastebin.com/dab41FGr

Tested in Chrome, Firefox (Firefox needed so much special treatment, wow?!) and IE.

Still ToDo and features for the future:

Animated icon in the footer (for gifs, flash).
InfoBox while parenting: Why is the hovered post better than the chosen one? => Showing information: older/younger, animated, etc.
QuickEdit box needs some fix:

Box is draggable, if the textarea is not focused. This makes it hard for firefox users to resize the box if they dont focus the textarea.
Can't preview Flash in QuickEditBox, so definitely need some conditions for this.

Save settings (chosen thumb, parenting icons, selected mode) in document.cookie or localstorage.
Commands and better UI on post/show/ pages maybe far in the future.
Gallery mode far in the future.
We should also put moderation commands into the context menu in a future update: approving, deleting, etc.

diortumsan

1 year ago

Just some notes for the future. To get the autosuggestion feature working on textarea we will need understand how the autosuggestion works:

http://imgur.com/S6fAnqz

To display the autosuggestion box below the caret in the textarea we will also need a new package:

https://github.com/beviz/jquery-caret-position-getter

To get related tags after a suggestion, "addLiAsText" has to call a request and we will need some tags management via javascript to not send the same request twice.

diortumsan

1 year ago

Autosuggest for textareas is ready for launch. http://imgur.com/9v7S4u2

Features:

Can be applied on any input field or textarea just by adding class "autosuggest". Will be applied on the IDs "tags" (search field) and "post_tags" (textarea on post/show/ and upload textarea). Can be applied on fields via javascript (AutoSuggest.add(field)).
Sidebar can get a scrollbar now. http://imgur.com/8SCxrn7
PageUp/Down keys are used in textareas (a little note is displayed in the corner). Input fields like the search field can use both methods, PageUp/Down or just Up/Down keys.

JS: http://pastebin.com/2EZ5wABX
CSS: http://pastebin.com/VgPqL3SC

Edit:
For the future: