kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Add a demo of alerts and tweak styles
rodzic
5a45fffa9e
commit
75b9de222e
|
@ -1,4 +1,8 @@
|
||||||
title: $:/core/ui/AlertTemplate
|
title: $:/core/ui/AlertTemplate
|
||||||
|
|
||||||
<div class="tw-alert"><div class="tw-alert-toolbar"><$button message="tw-delete-tiddler" class="btn-invisible">{{$:/core/images/delete-button}}</$button></div><div class="tw-alert-subtitle"><$view field="component"/> - <$view field="modified" format="date" template="0hh:0mm:0ss DD MM YYYY"/> <$reveal type="nomatch" state="!!count" text=""><span class="tw-alert-highlight">(count: <$view field="count"/>)</span></$reveal></div><div class="tw-alert-body"><$view field="text"/></div></div>
|
<div class="tw-alert"><div class="tw-alert-toolbar"><$button message="tw-delete-tiddler" class="btn-invisible">{{$:/core/images/delete-button}}</$button></div><div class="tw-alert-subtitle"><$view field="component"/> - <$view field="modified" format="date" template="0hh:0mm:0ss DD MM YYYY"/> <$reveal type="nomatch" state="!!count" text=""><span class="tw-alert-highlight">(count: <$view field="count"/>)</span></$reveal></div>
|
||||||
|
|
||||||
|
<div class="tw-alert-body">
|
||||||
|
<$transclude/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -4,12 +4,15 @@ tags: introduction
|
||||||
title: Features
|
title: Features
|
||||||
type: text/vnd.tiddlywiki
|
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</$button></$set></$fieldmangler>
|
||||||
|
\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
|
* 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
|
* [[Bitmap images|Motovun Jack.jpg]] and [[SVG images|UsingSVG]] are first-class citizens alongside text
|
||||||
* Concise and expressive WikiText that generates semantic HTML
|
* Concise and expressive WikiText that generates semantic HTML
|
||||||
* Integrated [[AES encryption|Saving with Encryption]]
|
* Integrated [[AES encryption|Saving with Encryption]]
|
||||||
* TiddlyWiki isn't just a wiki - you can build custom applications with it like this TaskManagementExample
|
* 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</$button> and <$button message="tw-notify" param="SampleNotification" class="btn btn-inverse">notifications</$button>
|
* Familiar user interface elements like <<alert-demo>>, <$button message="tw-modal" param="SampleWizard" class="btn btn-inverse">wizards</$button> and <$button message="tw-notify" param="SampleNotification" class="btn btn-inverse">notifications</$button>
|
||||||
* Easily [[import|ImportTiddlers]] content via drag and drop, copy and paste, or browsing for local files
|
* 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=<<currentTiddler>>>clone this tiddler</$button>)
|
* Clone existing tiddlers (for example, <$button message="tw-new-tiddler" param=<<currentTiddler>>>clone this tiddler</$button>)
|
||||||
* TiddlyWiki is [[surprisingly scalable|Scalability]] to many thousands of tiddlers and megabytes of content
|
* TiddlyWiki is [[surprisingly scalable|Scalability]] to many thousands of tiddlers and megabytes of content
|
||||||
|
|
|
@ -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.
|
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</$button></$set></$fieldmangler>.
|
||||||
|
|
||||||
Alert tiddlers should have the following fields:
|
Alert tiddlers should have the following fields:
|
||||||
|
|
||||||
|!Field |!Description |
|
|!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) |
|
|modified |Date of the alert (used for ordering the alerts on screen) |
|
||||||
|component |Component name associated with the alert |
|
|component |Component name associated with the alert |
|
||||||
|tags |Must include [[$:/tags/Alert]] |
|
|tags |Must include [[$:/tags/Alert]] |
|
||||||
|
|
||||||
|
|
|
@ -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]].
|
|
@ -121,6 +121,12 @@ canvas.tw-edit-bitmapeditor {
|
||||||
<<box-shadow "inset 0 1px 0 #fff">>;
|
<<box-shadow "inset 0 1px 0 #fff">>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tw-alert {
|
||||||
|
<<border-radius 6px>>
|
||||||
|
<<box-shadow "0 3px 7px rgba(0,0,0,0.6)">>
|
||||||
|
}
|
||||||
|
|
||||||
.tw-notification {
|
.tw-notification {
|
||||||
<<border-radius 6px>>
|
<<border-radius 6px>>
|
||||||
<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
|
<<box-shadow "0 3px 7px rgba(0,0,0,0.3)">>
|
||||||
|
|
|
@ -926,17 +926,16 @@ canvas.tw-edit-bitmapeditor {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
max-width: 500px;
|
||||||
z-index: 20000;
|
z-index: 20000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-alert {
|
.tw-alert {
|
||||||
position: relative;
|
position: relative;
|
||||||
<<border-radius 6px>>
|
|
||||||
margin: 28px;
|
margin: 28px;
|
||||||
padding: 14px 14px 14px 14px;
|
padding: 14px 14px 14px 14px;
|
||||||
border: 3px solid #DBB727;
|
border: 2px solid #B99E2F;
|
||||||
background-color: rgb(250, 210, 50);
|
background-color: rgb(255, 228, 118);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-alert-toolbar {
|
.tw-alert-toolbar {
|
||||||
|
@ -945,8 +944,12 @@ canvas.tw-edit-bitmapeditor {
|
||||||
right: 14px;
|
right: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tw-alert-toolbar svg {
|
||||||
|
fill: #B99E2F;
|
||||||
|
}
|
||||||
|
|
||||||
.tw-alert-subtitle {
|
.tw-alert-subtitle {
|
||||||
color: #DBB727;
|
color: #B99E2F;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue