What mobile launcher are you using, how will you design the TW layout launcher?

1

I’m using https://play.google.com/store/apps/details?id=com.ss.squarehome2&hl=en&gl=US

166×296 49.8 KB

But I think for tiddlywiki, a new PageControl-like button list will be enough, because we only use up to 4 layouts per day, isn’t it? Just like we only use up to 10 apps on our phone per day.

I also think we can put the launcher on our home tiddler, so it is easier to open them, and “default layout” is still the “default layout”

2

图片
图片865×1284 192 KB

A fast prototype, while some layout is not using standard icon field (like my whiteboard plugin), so can’t properly show its icon, I’m fixing this in whiteboard plugin.

\whitespace trim
<$linkcatcher to="$:/layout">
	<div class="layout-launcher">
		<$list filter="[all[tiddlers+shadows]tag[$:/tags/Layout]]">
			<$set name="chosen-cls" filter="[all[current]compare:eq{$:/layout}]" value="layout-launcher-item tc-chosen" emptyValue="layout-launcher-item">
				<$link to={{!!title}}>
					<div class=<<chosen-cls>>>
						<span class="layout-launcher-icon">
							<$transclude tiddler={{{ [<currentTiddler>get[icon]] }}}/>
						</span>
						<span class="layout-launcher-title">
							<$transclude field="name"/>
						</span>
						<span class="layout-launcher-description">
							<$transclude field="description"/>
						</span>
					</div>
				</$link>
			</$set>
		</$list>
	</div>
</$linkcatcher>

<style>
.layout-launcher {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
}
.layout-launcher-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;

	height: 150px;
	aspect-ratio: 1;
	padding: 5px;
	margin: 5px;
}
.layout-launcher-title {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 1.2em;
}
.layout-launcher-icon {
	width: 70%;
	aspect-ratio: 1;
}
.layout-launcher-icon svg {
	width: 100%;
	height: 100%;
}
.layout-launcher-description {
	display: none;
}
.layout-launcher-item:hover .layout-launcher-description {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	background: <<colour tiddler-info-background>>;
}
.layout-launcher-item a {
	text-decoration: none;
}
</style>
3

It is now a plugin
https://tw-cpl.netlify.app/#Plugin_202403051927669

4

截屏2024-06-06 18.03.56
截屏2024-06-06 18.03.562218×1372 263 KB

5

https://tiddly-gittly.github.io/tw-gamification/

doesn’t load… 

6

This is amazing! I tested on a small touch screen (6.67in) and it works great!
Thank you!

7

One small issue. The bottom pop ups shall be opened upward. Now when the bottom menu bar is open, touching a button for example storyvview opens the local popup downward.
I know this is a TW limitation.

8

I included a experimental wasm based game in this demo site, so it is 54MB+, will take a while to load.

Maybe wasm should be loaded using canonical_uri instead.

I move the wasm plugin to another rpeo. Now it is only 7MB.

9

Yes, there is an issue for that, but I think it need a npm package to fix it, which is not suitable for tw-core, so I don’t know a good way for this.

10

I want to find a JS library to build a Windows desktop or Android desktop that can have layout icons.