From 75b9de222e4a0db405a7c40f82e20d74ea6a7326 Mon Sep 17 00:00:00 2001 From: Jermolene Date: Sat, 15 Feb 2014 17:36:49 +0000 Subject: [PATCH] Add a demo of alerts and tweak styles --- core/ui/AlertTemplate.tid | 6 +++++- editions/tw5.com/tiddlers/Features.tid | 5 ++++- .../tw5.com/tiddlers/mechanisms/AlertMechanism.tid | 3 ++- editions/tw5.com/tiddlers/samples/SampleAlert.tid | 6 ++++++ themes/tiddlywiki/snowwhite/base.tid | 6 ++++++ themes/tiddlywiki/vanilla/base.tid | 13 ++++++++----- 6 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 editions/tw5.com/tiddlers/samples/SampleAlert.tid diff --git a/core/ui/AlertTemplate.tid b/core/ui/AlertTemplate.tid index 234a4d29a..601275409 100644 --- a/core/ui/AlertTemplate.tid +++ b/core/ui/AlertTemplate.tid @@ -1,4 +1,8 @@ title: $:/core/ui/AlertTemplate -
<$button message="tw-delete-tiddler" class="btn-invisible">{{$:/core/images/delete-button}}
<$view field="component"/> - <$view field="modified" format="date" template="0hh:0mm:0ss DD MM YYYY"/> <$reveal type="nomatch" state="!!count" text="">(count: <$view field="count"/>)
<$view field="text"/>
+
<$button message="tw-delete-tiddler" class="btn-invisible">{{$:/core/images/delete-button}}
<$view field="component"/> - <$view field="modified" format="date" template="0hh:0mm:0ss DD MM YYYY"/> <$reveal type="nomatch" state="!!count" text="">(count: <$view field="count"/>)
+
+<$transclude/> +
+
diff --git a/editions/tw5.com/tiddlers/Features.tid b/editions/tw5.com/tiddlers/Features.tid index 98cf4f790..839b5e3b6 100644 --- a/editions/tw5.com/tiddlers/Features.tid +++ b/editions/tw5.com/tiddlers/Features.tid @@ -4,12 +4,15 @@ tags: introduction title: Features type: text/vnd.tiddlywiki +\define alert-demo() +<$fieldmangler tiddler="SampleAlert"><$set name="currentTiddler" value="SampleAlert"><$button message="tw-add-tag" param="$:/tags/Alert" class="btn btn-inverse">alerts +\end * The ability to save changes on almost any desktop HTML5 compatible-browser, with custom apps to enable [[Saving on iPad/iPhone]] and [[Android|Saving on Android]], and a cross-platform [[Firefox extension|Saving with TiddlyFox]] that even runs on Android * [[Bitmap images|Motovun Jack.jpg]] and [[SVG images|UsingSVG]] are first-class citizens alongside text * Concise and expressive WikiText that generates semantic HTML * Integrated [[AES encryption|Saving with Encryption]] * TiddlyWiki isn't just a wiki - you can build custom applications with it like this TaskManagementExample -* Familiar user interface elements like <$button message="tw-modal" param="SampleWizard" class="btn btn-inverse">wizards and <$button message="tw-notify" param="SampleNotification" class="btn btn-inverse">notifications +* Familiar user interface elements like <>, <$button message="tw-modal" param="SampleWizard" class="btn btn-inverse">wizards and <$button message="tw-notify" param="SampleNotification" class="btn btn-inverse">notifications * Easily [[import|ImportTiddlers]] content via drag and drop, copy and paste, or browsing for local files * Clone existing tiddlers (for example, <$button message="tw-new-tiddler" param=<>>clone this tiddler) * TiddlyWiki is [[surprisingly scalable|Scalability]] to many thousands of tiddlers and megabytes of content diff --git a/editions/tw5.com/tiddlers/mechanisms/AlertMechanism.tid b/editions/tw5.com/tiddlers/mechanisms/AlertMechanism.tid index 88657e020..b5138e0c2 100644 --- a/editions/tw5.com/tiddlers/mechanisms/AlertMechanism.tid +++ b/editions/tw5.com/tiddlers/mechanisms/AlertMechanism.tid @@ -6,6 +6,8 @@ type: text/vnd.tiddlywiki Alerts are displayed as yellow boxes overlaying the main TiddlyWiki window. Each one corresponds to a tiddler with the tag [[$:/tags/Alert]]. Clicking the delete icon on an alert deletes the corresponding tiddler. +Here's a demo <$fieldmangler tiddler="SampleAlert"><$set name="currentTiddler" value="SampleAlert"><$button message="tw-add-tag" param="$:/tags/Alert" class="btn btn-inverse">alert. + Alert tiddlers should have the following fields: |!Field |!Description | @@ -14,4 +16,3 @@ Alert tiddlers should have the following fields: |modified |Date of the alert (used for ordering the alerts on screen) | |component |Component name associated with the alert | |tags |Must include [[$:/tags/Alert]] | - diff --git a/editions/tw5.com/tiddlers/samples/SampleAlert.tid b/editions/tw5.com/tiddlers/samples/SampleAlert.tid new file mode 100644 index 000000000..7ee3de9c2 --- /dev/null +++ b/editions/tw5.com/tiddlers/samples/SampleAlert.tid @@ -0,0 +1,6 @@ +title: SampleAlert +component: demo + +This is a demonstration alert. + +Note that the trashcan icon deletes the tiddler containing this alert. You can also remove it by opening the tiddler SampleAlert and editing it to remove the tag [[$:/tags/Alert]]. diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid index 727832f1d..682b72c0a 100644 --- a/themes/tiddlywiki/snowwhite/base.tid +++ b/themes/tiddlywiki/snowwhite/base.tid @@ -121,6 +121,12 @@ canvas.tw-edit-bitmapeditor { <>; } + +.tw-alert { + <> + <> +} + .tw-notification { <> <> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index fab3e6315..5af64ab30 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -926,17 +926,16 @@ canvas.tw-edit-bitmapeditor { position: fixed; top: 0; left: 0; - right: 0; + max-width: 500px; z-index: 20000; } .tw-alert { position: relative; - <> margin: 28px; padding: 14px 14px 14px 14px; - border: 3px solid #DBB727; - background-color: rgb(250, 210, 50); + border: 2px solid #B99E2F; + background-color: rgb(255, 228, 118); } .tw-alert-toolbar { @@ -945,8 +944,12 @@ canvas.tw-edit-bitmapeditor { right: 14px; } +.tw-alert-toolbar svg { + fill: #B99E2F; +} + .tw-alert-subtitle { - color: #DBB727; + color: #B99E2F; font-weight: bold; }