[TW5] Some UI ideas, demo at tiddlyspot

[wiem...@googlemail.com]

Hi,

For me it was not always easy to find the right tab in the sidebar or config menu to verify/change some settings.

 

Last weekend I took the time to try some variations on the sidebar menu. I used Ton Gerner's TW customizations as a template.

There are only 5 sidebar tabs.

Search

  12 filtered search-tabs for tiddlers and tags. Originally tabs were vertical but this did not fit well on the Blackberry Z10 screen. 

View (settings)

   (sub)title,  username, default tiddlers, language, storyview, animation duration, theme, theme tweaks, browser history and navigation setting

File (settings)

  download to local file, autosave on/off, import files, export as static htlm, encryption (button text changed), 

Upload (settings)

   autosave, Hosting site tiddlyspot settings (wiki name, password), custom hosting, save, encryption.

System (overview)

  tw5 version, plugins, loaded modules, tiddler fields, About=statistics 

You can view the result at      http://tw5ideas.tiddlyspot.com/index.html

The default tiddlers explain it in more detail. Please note It is work in progress! 

Take a look, and tell me what you think. 

Kind Regard,

Wim Moermans (NL)

[Jeremy Ruston]

Hi Wim

> You can view the result at      http://tw5ideas.tiddlyspot.com/index.html

Excellent, thank you very much for sharing your work. There are some very interesting ideas here.

One of the constraints on the default "tw5.com" edition of TW5 is that I'm trying to keep it as simple and minimal as possible so as not to overwhelm new users. That's why there are only three toolbar buttons provided on each tiddler, for instance.

I'd like to ship with another edition that is optimised for power users, where the focus is on efficient, speedy access to functionality. I think your experiments may be more oriented towards the power user theme.

So, I'd encourage you to continue iterating your experiment, perhaps with a view to submitting it in due course as a new edition. I think it would be helpful to be a bit more explicit about the goals of the redesign, and the audience you're aiming for.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywikidev.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Danielo Rodríguez]

It is awesome!

I really liked how information is organized, very intuitive.

Please keep us posted. Also I really like the theme.

[wiem...@googlemail.com]

Dear Jeremy,

Excellent, thank you very much for sharing your work. There are some very interesting ideas here.

Your welcome.  

One of the constraints on the default "tw5.com" edition of TW5 is that I'm trying to keep it as simple and minimal as possible so as not to overwhelm new users. That's why there are only three toolbar buttons provided on each tiddler, for instance.

I'd like to ship with another edition that is optimised for power users, where the focus is on efficient, speedy access to functionality. I think your experiments may be more oriented towards the power user theme.

So, I'd encourage you to continue iterating your experiment, perhaps with a view to submitting it in due course as a new edition. I think it would be helpful to be a bit more explicit about the goals of the redesign, and the audience you're aiming for.

I targeted for the (lazy) power and mobile user, .

Main reasons of the redesign were

• to get a better idea of the internal workings of tw5 (I've little experience with javascript, html5)
  
• for mobile usage (BB10 on Z10) there are too many clicks required. Therefore I wanted a simpler menu structure. 

I've already updated tiddlyspot with an improved version. v0914 I've simplified/removed some of the extra buttons. added an edit field for ribbon text, put vanilla tweaks in table, andmuch more. BTWI kept the clone button (by Ton Gerner), it easily creates a new tiddler with tags and all on my mobile. It was also handy for modifying the menu using my PC. There is a small bug with the theme, an underline appears under the icons in the edit template, this also  prevents me from replacing the delete-button with an open trash can, which is easier to recognize. 

Best Regards,

Wim 

[wiem...@googlemail.com]

It is awesome!

I really liked how information is organized, very intuitive.

Thanks !

I can't take credit for the theme, Ton Gerner designed the blueish theme.

[Ton Gerner]

Hi Wim,

I like the way you added the filter to all your 'Search' tabs.
Glad you like my 'Bluish' theme.
You can get rid of the "underline" by making the CSS more specific. In $:/themes/tongerner/bluish search for ".titlebar" and replace it by ".tw-tiddler-title .titlebar".
Or otherwise wait till I update my Bluish theme (I have to make a few other changes as well and will publish it shortly at [1])

Cheers,

Ton

[1] http://tongerner.tiddlyspot.com/

[wiem...@googlemail.com]

Hi Ton,

I like the way you added the filter to all your 'Search' tabs.

Thanks for the bluischtheme. And also for the advanced search tiddler which I enhanced with more tabs and the (reverse) filter button ;-)

Glad you like my 'Bluish' theme.
You can get rid of the "underline" by making the CSS more specific. In $:/themes/tongerner/bluish search for ".titlebar" and replace it by ".tw-tiddler-title .titlebar".

The fix you suggest did not work. Did you try it yourself with my source code? 

Ton, I tried to add an icon to the title bar in view and edit template, but they scaled a lot larger than the others (clone and delete-button). Would the above fix also have effect on the icons?

Regards/groet

Wim 

[Ton Gerner]

Hi Wim,

On Friday, May 30, 2014 3:54:13 PM UTC+2, wiem...@googlemail.com wrote:

Hi Ton,

I like the way you added the filter to all your 'Search' tabs.

Thanks for the bluischtheme. And also for the advanced search tiddler which I enhanced with more tabs and the (reverse) filter button ;-)

Glad you like my 'Bluish' theme.
You can get rid of the "underline" by making the CSS more specific. In $:/themes/tongerner/bluish search for ".titlebar" and replace it by ".tw-tiddler-title .titlebar".

The fix you suggest did not work. Did you try it yourself with my source code? 

I tried the suggested CSS in one of my TW5s and it worked.
In the meantime I adjusted the Bluish theme (now v0.2.0) with the CSS I gave (and a few other minor things).
It is available at [1] , but I did *not* update all my guides yet.

 

Ton, I tried to add an icon to the title bar in view and edit template, but they scaled a lot larger than the others (clone and delete-button). Would the above fix also have effect on the icons?

This fix has nothing to do with the size of the icons.

The standard code for an icon is:

<svg class="tw-xyz-button tw-image-button" height="22px" width="22px" viewBox="x y xx yy"><path d=" ... "/></svg>

Your own icons are missing most of these things.

See all other images and for some explanation [2]: Customization > Buttons & icons > Icons

Hope that helps.

Cheers,

Ton


[1] http://tongerner.tiddlyspot.com/

[2] http://tw5custom.tiddlyspot.com/
 

Regards/groet

Wim 

[wiem...@googlemail.com]

I updated the TW5Ideas UI experiments

Please note I changed the version numbering into MonthDate<alpha>. So the original v0917 is older than 0529a  Latest version now is : 0602a

Sidebar-tabs

Open MyMenu Search View Tools Help To Do

1. Open (TOC)-tab

is the same as the original Open-tab. It is the table of Contents of the story River.

2. MyMenu-tab

Very simple menu for end user with search function.

  Filter MtyMenu tagged tiddlers (alphanumeric sort on title)

[ searchstring     ]

00 Some instruction for a very simple User Menu

01.020 Introduction

01.040 Character introduction

02.010 Some Chapter in the middle

04.030 Plot twist

05.014 The end

Character XYZ

Time line 1 main

3. Search-tab

When finding/searching for a tiddler, you sometimes only know part of the name or content. During typing the matching list of matching tiddler titles shortens. This search-tab contains about 12 searches for tiddlers and tags. Also searching in time lines(recent) for normal and system tiddlers is possible. There is one common edit/input field so you don't have to re-type the search string, just select another domain/tab

Changed (Recent) Open Tiddlers (Story) Drafts (editing) My TAGSAll (My) Tiddlers Undefined (Missing) Orphans $ My System Tiddlers$ Shadows (bold) $ System TAGS Search Filters Journal this TW Types$ Recent System Mods

• changed (Recent) [aka timeline],
• open tiddlers (Storyline)
• Drafts (in edit mode)
• My TAGS,
• All My tiddlers (contents, non system),
• Undefined/missing, MissingTiddlers
• Orphans (no referrers to this tiddler),
• $ My system tiddlers (contents),
• $ shadows (including overwritten ones),
• $ System TAGS ($:/),
• filters(for experts),
• Types (types of content),
• $Recent system Mods timeline (including temp fields)).'
• this TW system and Normal tiddlers contents
• Journal entries (title and content only, latest on top)

When you click the funnel icon  the searchfield string is cleared removed / the searchfilter is switched off.

4. View-tab

Contains all things to do with the presentation of your TW. tw (sub)title, username, default tiddlers, language, storyview, animation duration, theme, theme tweaks, browser history and navigation setting

5. Tools-tab

Contains all things like Saving, uploading, statistics (count tiddlers, shadows, overwritten shadows), loaded modules, tiddler fields..

• File sub-tab for saving to local disk

local file, save, autosave, import files, export as static htlm, encryption (button text changed), About=statistics

• Upload sub-tab for saving to hosting site

save, autosave, Hostingsite ,tiddlyspot settings (wiki name, password), custom hosting, encryption.

• System-subtab overview of the internals (no settings in this tab)

plugins, loaded modules, tiddler fields

6. Help-tab

• Wikitext (offline explanation )
• Saving
• SideBar (this text)
• TW5-coding (grammer etc..)

7. Temporary To Do-tab

just to keep track of all the changes ;-) 

Please Let me know what you think ;-)

Wim

[Danielo Rodríguez]

How do you force the single file save when server details are provided? I'm very interested in that particular feature.

[wiem moer]

if you leave the wiki name empty in the server details, you can do a local single file save. See also the Help-tab>> Saving at tw5ideas.tiddlyspot.com.

On 4 June 2014 19:01, Danielo Rodríguez <rdan...@gmail.com> wrote:

How do you force the single file save when server details are provided? I'm very interested in that particular feature.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywikidev/U07VupA4YGY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywikide...@googlegroups.com.

[wiem moer]

I misinterpreted your question, so forget the previous answer ;-)

use the following param to force download all

<$button message="tw-download-file" param="$:/core/save/all" 

see also tiddler

$:/snippets/download-wiki-button

On 4 June 2014 19:01, Danielo Rodríguez <rdan...@gmail.com> wrote:

How do you force the single file save when server details are provided? I'm very interested in that particular feature.

[wimM]

 

 Just uploaded new version 0608L (file-tab, simple linear MyMenu-tab, some Icons, consolidated  ToDo-tab,  

renamed Tools tab to File

File-tab contan About, Downlod, Import Export and Upload tab.

 

reorganized todo

played with some colors on buttons and external links(not final!)

solved some of style problems with tiny icons, 

created and added new add-tiddler button

replaced To Do with table by separate tiddlers and ToDo-tab (Now, Later, Maybe, Done)

added simple linear menu in MyMenu-Tab in sidebar

moved Tiddler Field up in edit template for easy edit of fields, 

added docu field for short description in subtitle of viewtemplate

and lots more...., see also ToDo tab in sideBar

Please tell me what you think about the design...

[WiM]

update 0617c available

added some basic Extension to the non-linear concept. 

-My-tab with MyToDo, MyJournal, Mybook, Myglossary (TBD), MyTiddlers not belonging to the four categories

MyToDo (based on tiddler by David Gifford

(added) two ToDo categories Now, Later, Maybe

(added) buttons/icons to easily remove a finished task (on each line)

MyJournal (based on newtiddler by Stephan Hradek

MyBook

(beautified) removed the ugly underlines in the chapter titles. 

(added) clone icon to easily keep the chapter numbering consistent.

(added) The default tiddler opens all chapters fromt MyBook

the search field filter is also applied. So only chapters containing the value from the search field are displayed in the Story River.

Save-Tab

(added) version info field with time stamp display, showing you the date and time when you last changed that field/=saved the TW

(Fug) In some cases the right most tabs cannot be selected. when bottom of ribbon same height as icons (new and save)

instead of the tab (where the mouse pointer is on), the ribbon text is selected. It happens in opera, ff and chrome, BB10.

just zoom in, or make you window wider and the problem disappears, sorry ;-)

(added) delete icons to most personal tiddlers, so you can easily clean up this copy for your personal use.

(updated) help-tab >> sidebar for full description 

have fun, enjoy

Wim

[Danielo Rodríguez]

Hello WIM,

Your project is getting more and more interesting each day.

I want to propose you:

1. Would you consider to move from newtiddler widget to matabelle's widget stack? At least for the simpler ones. This way you will get rid of the need of skeleton tiddlers.

2. Did you think about moving your customizations into small self-contained plugins? This way the installation of a single tool will be very easy. I can help you with this if you need further  help. 

3. Why the glossary are not links? 

[Danielo Rodríguez]

I found some typos on the glossary tab. 

I highlight them here:

<$let tag1="myglossary">

!!!Search My Glossary  Tiddlers {{searchField}}

<$newtiddler  title="glossary_item" skeleton="$:/template_myglossary"  edit="yes">{{$:/_new-tiddler-button}}Add New Glossary entry  </$newtiddler>

</$let>

---

<$list filter="[!is[system]tag[myglossary]search{$:/temp/advancedsearch}!sort[title]]"> <$view field="title"/> <field="text"/> I think you miss a $view here and a /

<$button message="tw-delete-tiddler" class="btn-invisible">{{$:/core/images/delete-button}} </$button>

</div>where is the opening of this div?

</$list>

---

[WiM]

thanks for the corrections, the code was not really finished as you noticed, the new version is uploaded with links and clone-button

[WiM]

Your project is getting more and more interesting each day.

Thank you Danielo! 

I want to propose you:

1. Would you consider to move from newtiddler widget to matabelle's widget stack? At least for the simpler ones. This way you will get rid of the need of skeleton tiddlers.

Thank, I did not notice those widgets before, I'll try them really soon. Using those would reduce the number of tiddlers, which I have to exclude in several searches with !prefix[$:/templ]

2. Did you think about moving your customizations into small self-contained plugins? This way the installation of a single tool will be very easy. I can help you with this if you need further  help. 

maybe, maybe not.

3. Why the glossary are not links? 

they are now, didn't have time to finish it before uploading, tw5ideas is my "working"-copy, which I share between at least 4 machines (opera xp, opera w8, bb10, chrome w7), thanks for your help.

[WiM]

new version uploaded

lots of new features see version log

maybe not for the first time user any more