.bottom-tabs {
margin: 0px 0px -42px 0px;
}
.tc-tab-divider {
display: none;
}
.tc-tiddler-controls .close-tabs {
position: relative;
bottom: -3px;
}
.bottom-tabs div.tc-tab-buttons {
text-align: {{$:/config/BottomTabs/position/$:/plugins/amp/BT}};
padding: 0px 0px 14px 0px;
}
.bottom-tabs .tc-tab-buttons button{
min-width:45px;
display:inline-block;
font-size:12px;
text-align:center;
border-radius: 10px 10px 0px 0px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0) inset;
}
.bottom-tabs .tc-tab-buttons button:not(.tc-tab-selected):hover {
color: <<color foreground>>;
background: transparent;
font-weight: bold;
font-size: 16px;
margin-top:-5px;
}
.bottom-tabs .tc-tab-buttons button.tc-tab-selected {
color: <<color foreground>>;
background-color: <<color background>>;
font-weight: bold;
font-size: 16px;
padding-bottom:6px;
margin-bottom: -4px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1) inset;
}
.bottom-tabs .tc-tab-buttons.blue button.tc-tab-selected {
background-color: {{$:/config/BottomTabs/colors/$:/plugins/amp/BT##blue}};
}
.bottom-tabs .tc-tab-buttons.red button.tc-tab-selected {
background-color: {{$:/config/BottomTabs/colors/$:/plugins/amp/BT##red}};
}
.bottom-tabs .tc-tab-buttons.yellow button.tc-tab-selected {
background-color: {{$:/config/BottomTabs/colors/$:/plugins/amp/BT##yellow}};
}
.bottom-tabs .tc-tab-buttons button:not(.tc-tab-selected) {
background-color: <<color background>>;
color: #c0c0c0;
border-left: <<color background>>;
border-right: <<color background>>;
border-top: <<color background>>;
}
.bottom-tabs .tc-tab-content {
margin: -14px -42px 0px -42px;
padding: 14px 42px 14px 42px;
}
.bottom-tabs .tc-tab-content.blue {
background-color: {{$:/config/BottomTabs/colors/$:/plugins/amp/BT##blue}};
border-top: 1px solid <<colour tiddler-info-border>>;
border-bottom: 1px solid <<colour tiddler-info-border>>;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
}
.bottom-tabs .tc-tab-content.red {
background-color: {{$:/config/BottomTabs/colors/$:/plugins/amp/BT##red}};
border-top: 1px solid <<colour tiddler-info-border>>;
border-bottom: 1px solid <<colour tiddler-info-border>>;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
}
.bottom-tabs .tc-tab-content.yellow {
background-color: {{$:/config/BottomTabs/colors/$:/plugins/amp/BT##yellow}};
border-top: 1px solid <<colour tiddler-info-border>>;
border-bottom: 1px solid <<colour tiddler-info-border>>;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
}Wow... http://wikiphilo.tiddlyspot.com
This is beautiful and a pleasure to browse, Alberto!
I played a bit with the css that will hopefully stop the buttons from shuffling around.
Give it a try (amongst others, I gave the buttons a min-width of 45 which won't have them jump with up to 2-digit numbers)...
I played a bit with the css that will hopefully stop the buttons from shuffling around.Shuffling around? Do you mean they move in some way? I didn't see that, maybe a browser problem (I' m under Ubuntu + Firefox, Chrome, TiddlyDesktop).Give it a try (amongst others, I gave the buttons a min-width of 45 which won't have them jump with up to 2-digit numbers)...Thanks a lot! It gave it a try and the min width is a good idea, but 45 looks like excessive to me (see picture), so I changed it to 25. Is it okay seen from your browser?
Type the text for the tiddler '$:/temp/title'Glad to see you finally decided to move your customizations into plugins. They really turn TW into a valuable tool for those scenarios your plugins are aimed for. I would love to see different editions or a more general one.
I'm horrible giving hierarchy to things and organizing topics, so I'm afraid I can not adapt your plugins to fit my own scenarios (mostly technical knowledge). I really envy your ability to built this.
A small suggestion, in order to avoid thisType the text for the tiddler '$:/temp/title'
You can define a default value for that field on the edit-text widget. So if you write it like this
<$edit-text tag="input" default="" placeholder="title"/>
It will be prettier.
I've seen your other changes to the stylesheet. I'm not sure to understand everything (for I'm not fluent in css) but it looks good. Thanks a lot!
To me your bottom bar is rendered such that when I hover an icon, at least those to the left of it also move around, shifting left.This made the experience a "jumpy one" for me, hence my suggested css.
I downloaded wikiphilo to tray your plugins. Create a new author but I could not add a publication, the same for an existing author.What Iḿ doing wrong?
You're right, it's a bug. Thanks for reporting!
I'm going to look what happened and upload the correction.
I'm using your plugin to create the material for a course I will teach.
I want to know how can I add custom ways of link things. For example, what is considered Children of a tiddler?
How can I configure the fields at the forms?
<<inputAbout label:"Acerca de" field:"about">><$set name="tempTiddler" value="$:/temp/foo">
<<inputAbout label:"Acerca de" field:"about">>
</$set><$set name="tempTiddler" value="$:/temp/foo">
<<inputDescription>>
</$set>
Is there any way to add tiddlers under a topic?
While all this is really great stuff, I'm also a bit confused, Alberto.If I look at...$:/plugins/amp/MagicTabs/tabs/info...I see that it asks for a tagging list at the bottomHowever, if I look at William Shapespeare,there appears to be also that image tagging to it.What is going on there?
I notice that there is...$:/plugins/amp/MagicTabs/ViewTemplate/tagstagged $:/tags/ViewTemplate so that will add those "pseudo-tags"But then...$:/core/ui/ViewTemplate/tags...looks like an untagged shadow (fat link),yet it doesn't have any $:/tags/ViewTemplate tag anymore?
Anyhow, I like how you've added more tiddlers to the taglist than actual tags,
although that is indeed a bit confusing.
what is considered Children of a tiddler?
Well, they are all the tiddlers with a field parent or source whose content points to the current tiddler. It is the case of all the tiddlers you can create through the other tabs, like comments, notes, ideas, quotes, journals, etc. When you add a comment to the tiddler William Shakespeare using the form in its "comments tab", the field+value "source: [[William Shakespeare]]" is automatically added to the new comment tiddler. For instance, the tiddler Doubts about authorship have the field+value: "about: authorship" and "source: [[William Shakespeare]]".
For people like me, with structured tw, tags are easy to use and good to see in view mode, but meaningless. They just mean : there is some kind of relation between this and that, but I don't know what kind of relation it is.
Obviously, the kind of popup solution you propose would be great, even if I don't understand all the details of your proposition.
What I try to do with the MagicTabs plugin...
Thus, any kind of mechanism to create meaningful but tags-like fields is more than welcome.
Obviously, the kind of popup solution you propose would be great, even if I don't understand all the details of your proposition.When I have made a demo, I'll ping back here.
I think it's all coming together nicely and, perhaps after taking the time and giving the above issue another read, you will find that what you're doing is precisely that! Now, imagine TiddlyMap being able to simply hook into your MagicTabs relatiohships and display them in a Graph. That's only possible thanks to the kind of semantic relationship pattern I was discussing in that issue and you're already implementing, even configurably so.
Especially...A few days ago I realized that what I want to get to is pretty much the same pattern you use, only just not as bottom tabs but as semantic lists in a kind of note-list to the left hand side of each note ...with buttons defined via relationship patterns defined by the user that allow to create related tiddlers to a note, e.g. an idea, a question, a reference, a comment, a what-not.
I like it very much! How to add a new note?
Sorting by title and date works fine, but sorting by author is not alphabetical. Also, clicking the reverse checkbox didn't change anything at all.
To me it feels like I want to dive into your code a little more before setting out to implement that "cornell stuff".
- Types: The relations are not only between tiddlers but also and first about types of tiddlers: for instance, publications are related to authors. Thus, we need a way to define types (since we can't use the field type). And a same tiddler can belong to different types (an author is also a person, a note can also be a comment).
- My solution in MagicTabs is to use system tags with the prefix $:/type/ like $:/type/author, $:/type/book, $:/type/note, etc.
- That way, it is easier to differentiate them from regular tags.
- I can hide them from view mode (with a custom ViewTemplate/tags)
- I can apply a different ViewTemplate for each tiddler type.
- Fields: The semantic relations must be meaningful but general enough to be applied to different types of tiddlers.
- So far, in MagicTabs, I use the following generic relations:
- authors: this is a list field since a book or a paper, a song or a recipe, a plugin or a monument, can have several authors.
- about: a note, a comment, a quote, a book, etc., is about something, it talks about something which can be (or not) another tiddler. This is also a list field since a note can talk about different things.
- source: the source of a quote is a publication, the source of an image can be a webpage, the source of a character can be a novel, etc.
- parent: this field is to create a generic hierarchy or categorization different from authors and source. This is a list field.
- But specific relations can be necessary:
- ingredients: for cooking recipes
- courses: for students and teachers, resources, lessons.
- Lists: Besides types and fields, we need to show the related tiddlers through lists. And we need a mechanism to relate lists to types.
- This is where I use the bottom tabs, which is a solution among others. And the mechanism used by MagicTabs is similar to the $:/tags/foo used by the core:
- Any tiddler tiddler tagged $:/tabs/foo will be displayed as a bottom tab in all tiddlers tagged $:/type/foo.
- For instance, if we have tiddlers tagged $:/type/ingredient, we can create a tab showing a list of recipes using those ingredients with a tiddler tagged $:/tabs/ingredient and the corresponding list filter.
- Customization: We have to separate contents (like filters in tabs) and the way they are displayed. If this is done properly, then the same semantic relations can be shown as bottom tabs, left-column contents (Cornell), or any other way, applying a theme or another.
To me it feels like I want to dive into your code a little more before setting out to implement that "cornell stuff".The core of MagicTabs, if you want to understand how it works, is:
Hi Danielo,I am currently working on a new version of the plugin, with less bugs, better features, and much easier to customize. Its not yet finished but usable enough. I just uploaded it so you can take advantage of the customization enhancements: magictabs.tiddlyspot.com
I'm glad you find it useful. Unfortunately, the plugin for teachers is in a very early phase of development, so there's not much features.
The field "parent" is just a way to categorize your contents, you can use it as you wish. There's no restriction.
In order to better explain myself (and not spending hours figuring out how to write it in english) I'm going to continue in spanish. But I promise to write the documentation in english later on.En español. Imagino que lo que quieres hacer es adaptar las tablas para lo que tú necesites. Yo traté de dividir las tablas en sus elementos constitutivos, de modo que cada campo (título, etiquetas, texto, acerca de, etc.) está en un tiddler diferente. De ese modo puedo reutilizarlos independientemente uno de otro para hacer tablas diferentes. Por ejemplo el campo "about" está en el tiddler $:/plugins/amp/MagicTabs/forms/input/about
Además, están como macros globales, de modo que si escribes <<inputAbout>> en cualquier tiddler, te aparece el trozo de tabla correspondiente. En la mayoría de los campos hay tres variables que puedes configurar: el "label", el tiddler temporal que usas para almacenar los datos, y el campo que editas. Las variables "label" y "field" se pueden meter directamente en la macro:<<inputAbout label:"Acerca de" field:"about">>En cambio, el tiddler temporal se define desde fuera (porque dentro aparece como $(tempTiddler)$:<$set name="tempTiddler" value="$:/temp/foo">
<<inputAbout label:"Acerca de" field:"about">>
</$set>
En algunos sólo se puede cambiar el tempTiddler (tendré que hacerlo para todos cuando tenga tiempo):<$set name="tempTiddler" value="$:/temp/foo">
<<inputDescription>>
</$set>
En algunos también se pueden definir "placeholder" y otras cosas, pero es mejor verlo directamente en el tiddler correspondiente. Todos empiezan por $:/plugins/amp/MagicTabs/forms/
Is there any way to add tiddlers under a topic?No entiendo muy bien lo que quieres decir. A cualquier tiddler se le pueden añadir comentarios, notas, etc., y todos los tiddlers que estén relacionados con éste aparecerán abajo en las pestañas correspondientes. Por ejemplo, si tengo un tiddler "Catedral de Salamanca", puedo añadirle comentarios, notas y más cosas que sólo aparecerán ahí porque tienen los campos "about: [[Catedral de Salamanca]]" o "source: Catedral de Salamanca" o "parent: [[Catedral de Salamanca]]".
Si además a tu tiddler le asignas un tipo, con la etiqueta "$:/type/arquitectura", entonces puedes añadirle pestañas específicas a ese tipo. Por ejemplo, debajo de cada tiddler con la etiqueta "$:/type/arquitectura" puedo tener las pestañas "Fotos", "Elementos destacados", "Técnicas constructivas".
Ahora es más fácil crear nuevas pestañas. Basta con clonar el patrón ($:/plugins/amp/MagicTabs/templates/tab) y rellenar los campos que quieras, especialmente:
- contents.tag: ahí indicas la etiqueta de los tiddlers que quieres que aparezcan en la pestaña. Por ejemplo: "$:/type/comments", "$:/type/journal", "tasks", etc.
Bueno, espero que sea suficiente para que te hagas una idea. Pero no dudes en preguntarme si tienes más dudas.
I am currently working on a new version of the plugin, with less bugs, better features, and much easier to customize. Its not yet finished but usable enough. I just uploaded it so you can take advantage of the customization enhancements: magictabs.tiddlyspot.comBut this is not compatible with the previous version right?
I'm glad you find it useful. Unfortunately, the plugin for teachers is in a very early phase of development, so there's not much features.Well, I don't want to use it as a teacher, but to give the students a good material where they can take notes and ideas.
The field "parent" is just a way to categorize your contents, you can use it as you wish. There's no restriction.But I did not find any button or field to "automatically" create a new tiddler as a child.
Nice to hear that. I miss the forms at the sidebar to add new tiddlers of each type. Are they still there?
This is very powerful. Maybe you can use this small explanation to add it to the documentation.
No termino de ver claro cómo añadir nuevas pestañas. Ok, creo un tiddler y le pongo una tag que empieze con $:/type/algo, pero luego dónde defino las tabs? Dónde aparecerán esas tabs? En todos los tiddlers?
Ahora es más fácil crear nuevas pestañas. Basta con clonar el patrón ($:/plugins/amp/MagicTabs/templates/tab) y rellenar los campos que quieras, especialmente:Con ahora te refieres a la última versión que estás desarollando o también incluye la anterior?
- contents.tag: ahí indicas la etiqueta de los tiddlers que quieres que aparezcan en la pestaña. Por ejemplo: "$:/type/comments", "$:/type/journal", "tasks", etc.
Ok, creo que esto está relacionado con la pregunta anterior en la que te preguntaba cómo definir tabs, pero creo que se me escapa algo.
- Tabs fields: fields like filter and template have changed to list.filter and list.template, and other fields have been added.
Its very easy: if you create a tiddler tagged $:/tabs/foo, it will appear as a bottom tab in every tiddler tagged $:/type/foo and only there (unless you choose to have it as a default tab, and you can do that with the tag $:/action/is/default, or go to the control panel, under appearance and magic tabs tweaks).
I explain how to create custom new types and tabs in 5 easy tabs here: http://youtabs.tiddlyspot.com/
Type video: Add the tag $:/type/video to the video tiddlers. In this case: Introduction To TiddlyWiki
Type annotation: Add the tag $:/type/annotation to the annotation tiddlers.
Its very easy: if you create a tiddler tagged $:/tabs/foo, it will appear as a bottom tab in every tiddler tagged $:/type/foo and only there (unless you choose to have it as a default tab, and you can do that with the tag $:/action/is/default, or go to the control panel, under appearance and magic tabs tweaks).
I'm trying magic Tabs... One fast question. How can I remove the config button from each tab?
If I want to just add a new default tab.. Should I use the $:/type nomenclature? What is the structure of a tab? I clonned the tiddler $:/plugins/amp/MagicTabs/templates/tab and I changed the caption, icon and color fields, but the tab does not appear as part of the bottom tabs. Also it have the comment header inside the text.
I have another tab with the tag $:/type/tab and it appears, but without icon.
I'm a bit confused. Thank you for your time.
Ok, I have my doubts tab created. But, this is what I thing is needed and I did not get this from the documentationYou need at two things:
- A $:/type tiddler, which will be used as tag. This tiddler defines the caption and the icon.
- A tab tiddler, called whatever you want. For me to work I had to include the tags $:/action/is/default and the $:/type/tab. My magic control pannel does not display anything under the configuration of tab manager.
- The macro <<tabContents>> uses the tag caption and icon to create the heading of the tab, so it's imperative to fill the contents.tag with the type tiddler you created.
Now, I have to define an add.content tiddler to be able to create new tiddlers with the required tag. I will continue investigating.
The macros use the <$set> widget and that creates a problem: the tiddler needs to be refreshed for the changes are shown. Maybe this is your problem because I find myself sometimes asking where is my tab, or why the changes are not reflected? Sorry for that. It is why the plugin still needs a lot of work.Alberto
- Tabs fields: fields like filter and template have changed to list.filter and list.template, and other fields have been added.
Perhaps use a more specific mt prefix, e.g. mt.filter?
Its very easy: if you create a tiddler tagged $:/tabs/foo, it will appear as a bottom tab in every tiddler tagged $:/type/foo and only there (unless you choose to have it as a default tab, and you can do that with the tag $:/action/is/default, or go to the control panel, under appearance and magic tabs tweaks).I explain how to create custom new types and tabs in 5 easy tabs here: http://youtabs.tiddlyspot.com/Not sure what to make of this strategy in terms of...Type video: Add the tag $:/type/video to the video tiddlers. In this case: Introduction To TiddlyWiki
Type annotation: Add the tag $:/type/annotation to the annotation tiddlers.Why would I need an additional type tag? Isn't there a filter expression that corresponds to what makes a tiddler of type $:/type/video or $:/type/annotation or any other type?
How about something more implicit, like...$:/type/field/yt-id...without a need to declare some otherwise unneeded extra tags for magic-tabs?
And then have ...contents.by.field: $:/type/field/yt-video...perhaps. The thing is, do I need / also want those $:/type/video and $:/type/annotation tags now and does that mean that I also need to overwrite the tags template?
I was surely considering of abandoning the yt-video field as it seems much more natural to have the annotation simply tag to the video, but then I have the problem that a simple tagging relationship isn't a qualified one.
Also, if I kept something like yt-video as a qualified field then there is that problem with generally distinguishing yt-video vs. yt-videos... because, the latter would require a bracketed list like the tags field and all the handling that goes with dissecting those bracketed list-items whereas the yt-video field as a reference to a single parent does not have any double square brackets and would probably fail if I wrapped those tiddler titles in them.
So, how do you harmonize these relations ships such that 1:1 is working exactly like a 1:many in terms of how the data is being kept, i.e. by entering that related tiddler via a "browse for some tiddler" popup just like we have for tags?
Mhhh, loads of further exploring and architectural design is needed, it appears.I mean, hw would you handle the case where a tiddler would have two parents, sources, etc...?
A $:/type tiddler, which will be used as tag. This tiddler defines the caption and the icon.
The macro <<tabContents>> uses the tag caption and icon to create the heading of the tab, so it's imperative to fill the contents.tag with the type tiddler you created.
<<mt-tab-contents>>
that way, annotation tiddlers can be first class citizens, having their own dedicated tabs, view templates, etc. For instance, you may want a tab specific to video annotations showing related with the same topic, or documentation tiddlers talking about the same topic as the video annotation.
if you create the tiddler $:/type/annotation with a caption, an icon, a template, they are automatically used by the macros <<tabCaption>> and <<inputSlider>>.
How about something more implicit, like...$:/type/field/yt-id
Sorry, I don't understand your point.
You need a qualified relationship between the video and its annotations, and the yt-video field works. You could use in the same way I use the source field. But if you use yt-video instead of source, you need to create specific list filters while source is used by default in MagicTabs.
Custom list fields are a pain in the neck. But I managed to have them working with fields like authors, about, parent, and I don't remember if source.
Hi Danielo,
Thanks for your kind words.
Since the plugin is still a work in progress, I'm much interested in your customisations and your use case to adapt the plugin, make it easier to customise, and add new tabs that could be useful for users like you. Would you let me see your customizations when you are finished?
Regards,
I must say your work is awsome.
These plugins contain what I need, and in speaking of customisations, i can say I am trying hard to adapt your plugin to my needs.
And I also can say I can't finalize it...
I am trying to do this, for an help to a writer : character tiddlers, with three bottom tags filled with fields (describing the character), and forms to fill these fields.
I hope I can do it one day.
Of course I can share with you my customizations. But currently they are very basic: I just created a new type, a new tab and I added it to the control panel. I have plans to put a link to the "parent tiddler" of each annotation (not just notes) in the control panel. I think is important to know where do you have those notes when you want to review, for example, your doubts or what is the note about.
Please consider making the tiddler $:/plugins/amp/MagicTabs/lists/notes/filter tags based. I had to edit it manually to ad my own type, and this is not good. As important as having the ability to add new tabs is to sumarize its tiddlers. Regards.
A $:/type tiddler, which will be used as tag. This tiddler defines the caption and the icon.I find it rather confusing that this would be a tag.Is that just a design choice or would it be a necessity?All in all, there would only ever be one mt.type to a single tiddler, or not?Or is it a tag to simplyify assigning it, to assure the user selects a valid value ...if he ever does so, manually.
The macro <<tabContents>> uses the tag caption and icon to create the heading of the tab, so it's imperative to fill the contents.tag with the type tiddler you created.I think it would be helpful if all these components would come prefixed, e.g.<<mt-tab-contents>>
- Tabs fields: fields like filter and template have changed to list.filter and list.template, and other fields have been added.
Perhaps use a more specific mt prefix, e.g. mt.filter?
I also would be pleased to help if you want to add a french documentation (but I believe you speak french too).
How is the creation of new tiddlers via form managed?
Is there any chance to not opening the resulting tiddler for editing?
Hi everyone,I worked VERY HARD on the MagicTabs plugin over the last two weeks: fixing bugs, cleaning code and improving the code, with special attention to customization.
Great stuff!
IMO since you renamed the project from bottom tabs to MagicTabs, you should create a new "[TW5] INTRO: MagicTabs plugin - some more text" thread for it.
The INTRO prefix may make it easier to find it :)