ReadOnly Theme for muuri-kanban - How to disable drag and drop?

Plugins
#1

working with the nice muuri-kanban plugin

tiddlywiki-muuri-kanban

i wonder how to endorse a ReadOnly theme so that editing options are hidden.
Buttons can be hidden by:

svg.tc-image-button {
  visibility: hidden;
}

.tc-board-column-action {
  visibility: hidden;
}

But how to disable drag and drop ?
Thanks for help

1 Like
#2

need your help
__

I found
$:/themes/tiddlywiki/readonly
with

{"tiddlers":{"$:/themes/tiddlywiki/readonly/styles.tid":{"title":"$:/themes/tiddlywiki/readonly/styles.tid","tags":"[[$:/tags/Stylesheet]]","text":"\\define button-selector(title)\nbutton.$title$, .tc-drop-down button.$title$, div.$title$\n\\end\n\n\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline\n\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fclone>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fdelete>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fedit>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fnew-here>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fnew-journal-here>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fimport>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fmanager>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fnew-image>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fnew-journal>>,\n<<button-selector tc-btn-\\%24\\%3A\\%2Fcore\\%2Fui\\%2FButtons\\%2Fnew-tiddler>> {\n\tdisplay: none;\n}"}}}

so i guess if i want to add

.tc-board-column-action {
  visibility: hidden;
}

to a theme i can do this with the line

\n\n.tc-board-column-action {\n\visibility: hidden;\n}

but where do i have to add this line exactly without breaking things?
thanks

#3

It looks like the \n bits are just line breaks inserted for visibility.

So, this is a single css style declaration:

.tc-board-column-action {visibility: hidden;}

If so, it can be anywhere the body of a tiddler tagged `$:/tags/Stylesheet

I suspect, however, that this is not the css that will prevent drag&drop.

I don’t know kanban, but I did quickly checking by adding a simple stylesheet with that specification to

https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.html

and it did not prevent drag and drop.

You can search for “dropzone” in shadow tiddlers in the advanced search tab

The core has its dropzone specified like this in the page template:

<$dropzone>

<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">

<$transclude tiddler=<<listItem>>/>

</$list>

</$dropzone>

It’s not ideal to mess with core shadow templates. But you should see that if you remove both dropzone tags (starting and ending) — but NOT the stuff sandwiched between! — the dropzone is no longer active but the page displays normally.

If you do modify the shadow: I highly recommend adding some kind of inline comment where you modify a shadow tiddler. (I also add a “notes” field, so that before upgrading, I can easily check which shadows have been modified, and for what reason, so that I can reconstruct my changes when there’s an upgrade to TiddlyWiki core.)

<!-- <$dropzone></$dropzone> tags removed from around the following list of page template tiddlers -->

<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">

<$transclude tiddler=<<listItem>>/>

</$list>

There may be some other dropzone tiddlers specifically included with Tekan. If so, a similar treatment should suffice.

#4

thanks for your help

and how do i connect such a tagged tiddler just with e.g. the Readonly theme ? it should be only activated if this theme is active

I don’t know kanban, but I did quickly checking by adding a simple stylesheet with that specification to
Tekan — Kanban that stays with you

I started with Tekan but if found that it does not work that well and the code is also not anymore updated and developed.
The Muuri-Kanban works for me better and in integrates very nicely with all the other tiddlywiki features…

I will check and search for “dropzone” and will see how i can deactivate things … thanks…

#5

still looking for a way to do this …

#6

Could you say more about the ReadOnly theme you’re using? I believe there are a couple of versions around.

The inspect tool on your browser can be helpful in ensuring that you’re targeting the css class that you need.

Again, you should not try to write the \n parts into your stylesheet code. Somehow those are showing up for you where line breaks exist in the code (perhaps it’s minified/uglified?). But your stylesheet tiddler should simply look like

.tc-board-column-action {
  visibility: hidden;
}

(assuming this is the correct class to target — again I don’t know muuri kanban directly)

Once you are sure this is the style change you need, you just need to have a tiddler (called whatever you like, but perhaps muuri-disable-dnd or something clear like that) with the tag $:/tags/Stylesheet

#7

One more thought: IF it’s this read-only approach, check out this thread, which explicitly includes instructions on disabling drag-and-drop as a setting:

1 Like