Worked on Syntax Page

This commit is contained in:
Scharel 2018-12-11 17:44:00 +01:00
parent a01fe96830
commit 1971a93da9
2 changed files with 109 additions and 18 deletions

View file

@ -60,7 +60,7 @@ Dialog {
width: parent.width width: parent.width
focus: true focus: true
text: note.content text: note.content
font.family: appSettings.useMonoFont ? "DejaVu Sans Mono" : Theme.fontFamily // "Courier" font.family: appSettings.useMonoFont ? "DejaVu Sans Mono" : Theme.fontFamily
property int preTextLength: 0 property int preTextLength: 0
property var listPrefixes: [/^( *)- /gm, /^( *)\* /gm, /^( *)\+ /gm, /^( *)- \[ \] /gm, /^( *)- \[[xX]\] /gm, /^( *)> /gm, /^( *)\d+. /gm] property var listPrefixes: [/^( *)- /gm, /^( *)\* /gm, /^( *)\+ /gm, /^( *)- \[ \] /gm, /^( *)- \[[xX]\] /gm, /^( *)> /gm, /^( *)\d+. /gm]
onTextChanged: { onTextChanged: {

View file

@ -4,6 +4,52 @@ import Sailfish.Silica 1.0
Page { Page {
id: page id: page
Component {
id: syntaxDrawer
Drawer {
id: drawer
width: page.width
height: rawTextLabel.height > convertedTextLabel.height ? rawTextLabel.height : convertedTextLabel.height
backgroundSize: height
foreground: BackgroundItem {
width: parent.width
height: parent.height
onClicked: drawer.show()
Label {
id: rawTextLabel
x: Theme.horizontalPageMargin
width: parent.width - 2*x
wrapMode: Text.Wrap
font.family: appSettings.useMonoFont ? "DejaVu Sans Mono" : Theme.fontFamily
text: rawText
}
}
background: BackgroundItem {
width: parent.width
height: parent.height
onClicked: drawer.hide()
LinkedLabel {
id: convertedTextLabel
x: Theme.horizontalPageMargin
width: parent.width - 2*x
textFormat: Text.RichText
linkColor: Theme.primaryColor
defaultLinkActions: false
onLinkActivated: drawer.hide()
text: "<style>\n" +
"ul,ol,table,img { margin: " + Theme.paddingLarge + "px 0px; }\n" +
"a:link { color: " + Theme.primaryColor + "; }\n" +
"a.checkbox { text-decoration: none; padding: " + Theme.paddingSmall + "px; display: inline-block; }\n" +
"li.tasklist { font-size:large; margin: " + Theme.paddingMedium + "px 0px; }\n" +
"del { text-decoration: line-through; }\n" +
"table { border-color: " + Theme.secondaryColor + "; }\n" +
"</style>\n" + convertedText
}
}
}
}
SilicaFlickable { SilicaFlickable {
id: flickable id: flickable
anchors.fill: parent anchors.fill: parent
@ -20,23 +66,68 @@ Page {
SectionHeader { SectionHeader {
text: qsTr("Header") text: qsTr("Header")
} }
Drawer { Loader {
id: headerDrawer sourceComponent: syntaxDrawer
width: parent.width property string rawText: "
background: LinkedLabel { # Header 1
x: Theme.horizontalPageMargin ## Header 2
width: parent.width - 2*x ### Header 3
textFormat: Text.RichText #### Header 4
linkColor: Theme.primaryColor ##### Header 5
text: "Formatted Text" ###### Header 6";
} property string convertedText: "
BackgroundItem { <h1>Header 1</h1>
anchors.fill: parent <h2>Header 2</h2>
onClicked: headerDrawer.open = !headerDrawer.open <h3>Header 3</h3>
Label { <h4>Header 4</h4>
text: "Raw Text" <h5>Header 5</h5>
} <h6>Header 6</h6>"
} }
SectionHeader {
text: qsTr("Links")
}
Loader {
sourceComponent: syntaxDrawer
property string rawText: "
https://jolla.com
info@jolla.com
[Homepage - Jolla](https://jolla.com)
[Link to Jolla][1]
[jolla][]
[1]: https://jolla.com
[jolla]: https://jolla.com"
property string convertedText: "
<a href=\"https://jolla.com\">https://jolla.com</a><br>
<a href=\"mailto:info@jolla.com\">info@jolla.com</a><br>
<a href=\"https://jolla.com\">Homepage - Jolla</a><br>
<a href=\"https://jolla.com\">Homepage - Jolla</a><br>
<a href=\"https://jolla.com\">Homepage - Jolla</a>"
}
SectionHeader {
text: qsTr("Tables")
}
Loader {
sourceComponent: syntaxDrawer
property string rawText: "
|Header 1 |Header 2 |Header 3 |
|:-----------|:----------:|-----------:|
|Content 1.1 |Content 2.1 |Content 3.1 |
|Content 1.2 |Content 2.2 |Content 3.2 |
|Content 1.3 |Content 2.3 |Content 3.3 |"
property string convertedText: "
<table>
<thead>
<tr><td>Header 1</td><td>Header 2</td><td>Header 3</td></tr>
</thead>
<tbody>
<tr><td>Content 1.1</td><td>Content 2.1</td><td>Content 3.1</td></tr>
<tr><td>Content 1.2</td><td>Content 2.2</td><td>Content 3.2</td></tr>
<tr><td>Content 1.3</td><td>Content 2.3</td><td>Content 3.3</td></tr>
</tbody>
</table>"
} }
} }