692 lines
19 KiB
QML
692 lines
19 KiB
QML
import QtQuick
|
||
import qs.Commons
|
||
import qs.Ui
|
||
import "Classify.js" as Classify
|
||
|
||
// Right-hand preview pane for the clipboard picker.
|
||
// Renders a full preview plus metadata chips, per derived type.
|
||
// `result` is a Fuzzy search result: { row: {entry, content, app, type, ...}, positions }
|
||
Item {
|
||
id: root
|
||
|
||
property var result: null
|
||
property var entry: result ? result.row.entry : null
|
||
property string derived: result ? result.row.type : ""
|
||
// Wired by the picker: opens the current result (browser for links).
|
||
property var onOpen: function() {}
|
||
|
||
readonly property string font_: Style.font.menuFamily
|
||
readonly property color fg: Color.menu.text
|
||
readonly property color mutedFg: Util.alpha(fg, 0.55)
|
||
readonly property color chipBg: Util.alpha(fg, 0.07)
|
||
readonly property color lineColor: Util.alpha(fg, 0.16)
|
||
|
||
property string bodyText: ""
|
||
|
||
onResultChanged: prepare()
|
||
|
||
function prepare() {
|
||
bodyText = ""
|
||
if (!entry) return
|
||
var t = derived
|
||
if (t === "json") {
|
||
var pretty = Classify.prettyJson(String(entry.text || ""), 200000)
|
||
bodyText = pretty || String(entry.text || "")
|
||
} else if (t === "html") {
|
||
bodyText = Classify.stripHtml(String(entry.text || "")) || String(entry.text || "")
|
||
} else if (t === "text" || t === "code" || t === "email" || t === "number") {
|
||
bodyText = String(entry.text || "")
|
||
}
|
||
}
|
||
|
||
function rawSafe() {
|
||
return entry ? String(entry.text || "").trim() : ""
|
||
}
|
||
|
||
function rgbLine() {
|
||
var rgb = Classify.colorToRgb(rawSafe())
|
||
return rgb ? "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")" : ""
|
||
}
|
||
|
||
function hslLine() {
|
||
var hsl = Classify.colorToHsl(rawSafe())
|
||
return hsl ? "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)" : ""
|
||
}
|
||
|
||
// URL inside the decoded QR payload ("" when the payload is not a link).
|
||
function qrUrl() {
|
||
if (!entry || !entry.qr) return ""
|
||
var url = Classify.extractUrl(entry.qr)
|
||
if (url) return url
|
||
var trimmed = String(entry.qr).trim()
|
||
return root.bareDomainRe.test(trimmed) ? trimmed : ""
|
||
}
|
||
|
||
readonly property var bareDomainRe: /^[a-z0-9][a-z0-9.-]*\.[a-z]{2,}(?:\/[^\s]*)?$/i
|
||
|
||
function metaChips() {
|
||
if (!result) return []
|
||
var r = result.row
|
||
var e = r.entry
|
||
var chips = []
|
||
if (r.app) chips.push(Classify.prettyApp(r.app))
|
||
if (e.qr) chips.push("QR: " + Classify.firstLine(e.qr, 40))
|
||
if (e.ocr) {
|
||
var ow = Classify.textStats(e.ocr).words
|
||
chips.push("OCR: " + Classify.plural(ow, "word"))
|
||
}
|
||
if (e.type === "text" && e.text) {
|
||
var st = Classify.textStats(e.text)
|
||
chips.push(Classify.plural(st.words, "word"))
|
||
chips.push(Classify.plural(st.lines, "line"))
|
||
}
|
||
if (r.bytes > 0) chips.push(Classify.formatBytes(r.bytes))
|
||
if (e.type === "image" && e.w && e.h) chips.push(e.w + "×" + e.h)
|
||
if (e.type === "image") chips.push(e.mime || "image")
|
||
if (e.pinned) chips.push("★ pinned")
|
||
if (r.uses > 0) chips.push("pasted " + r.uses + "×")
|
||
return chips
|
||
}
|
||
|
||
// ------------------------------------------------------------- header
|
||
|
||
Row {
|
||
id: headerRow
|
||
anchors.top: parent.top
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
spacing: Style.space(10)
|
||
|
||
Rectangle {
|
||
width: Style.space(38)
|
||
height: width
|
||
radius: Style.cornerRadius
|
||
color: root.chipBg
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
|
||
Text {
|
||
anchors.centerIn: parent
|
||
text: Classify.typeIcon(root.derived)
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.heading
|
||
}
|
||
}
|
||
|
||
Column {
|
||
width: parent.width - Style.space(48) - badge.width - Style.space(10)
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
spacing: Style.space(2)
|
||
|
||
Text {
|
||
width: parent.width
|
||
text: {
|
||
if (!root.entry) return ""
|
||
var e = root.entry
|
||
if (e.type === "image") return e.qr ? Classify.firstLine(e.qr, 120) : Classify.fileBase(e.path)
|
||
if (e.type === "files") {
|
||
var base = Classify.fileBase(e.paths[0])
|
||
return e.paths.length > 1 ? base + " +" + (e.paths.length - 1) + " more" : base
|
||
}
|
||
return Classify.firstLine(e.text, 200)
|
||
}
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.title
|
||
font.bold: true
|
||
textFormat: Text.PlainText
|
||
elide: Text.ElideRight
|
||
maximumLineCount: 1
|
||
}
|
||
|
||
Text {
|
||
width: parent.width
|
||
text: {
|
||
if (!root.result) return ""
|
||
var r = root.result.row
|
||
var parts = []
|
||
if (r.ts) parts.push(Classify.formatFullDate(r.ts))
|
||
if (r.bytes) parts.push(Classify.formatBytes(r.bytes))
|
||
return parts.join(" · ")
|
||
}
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
elide: Text.ElideRight
|
||
maximumLineCount: 1
|
||
}
|
||
}
|
||
|
||
Rectangle {
|
||
id: badge
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
radius: height / 2
|
||
color: root.chipBg
|
||
width: badgeLabel.implicitWidth + Style.space(14)
|
||
height: Style.space(20)
|
||
|
||
Text {
|
||
id: badgeLabel
|
||
anchors.centerIn: parent
|
||
text: Classify.typeIcon(root.derived) + " " + Classify.typeLabel(root.derived)
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
}
|
||
}
|
||
|
||
Rectangle {
|
||
id: divider
|
||
anchors.top: headerRow.bottom
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.topMargin: Style.space(10)
|
||
height: Style.normalBorderWidth
|
||
color: root.lineColor
|
||
}
|
||
|
||
// ------------------------------------------------------------- body
|
||
|
||
// text-ish body (text / code / json / html / email / number)
|
||
Flickable {
|
||
id: textBody
|
||
anchors.top: divider.bottom
|
||
anchors.bottom: metaRow.top
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.topMargin: Style.space(10)
|
||
anchors.bottomMargin: Style.space(10)
|
||
visible: root.bodyText !== ""
|
||
clip: true
|
||
contentWidth: width
|
||
contentHeight: bodyEdit.implicitHeight
|
||
boundsBehavior: Flickable.StopAtBounds
|
||
|
||
WheelHandler {
|
||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||
onWheel: function(ev) {
|
||
if (ev.angleDelta.y < 0) textBody.flick(0, -240)
|
||
else textBody.flick(0, 240)
|
||
ev.accepted = true
|
||
}
|
||
}
|
||
|
||
TextEdit {
|
||
id: bodyEdit
|
||
width: parent.width
|
||
readOnly: true
|
||
activeFocusOnPress: false
|
||
text: root.bodyText
|
||
textFormat: TextEdit.PlainText
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
wrapMode: TextEdit.Wrap
|
||
selectionColor: Util.alpha(Color.accent, 0.4)
|
||
}
|
||
}
|
||
|
||
// color body
|
||
Column {
|
||
anchors.top: divider.bottom
|
||
anchors.bottom: metaRow.top
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.topMargin: Style.space(10)
|
||
anchors.bottomMargin: Style.space(10)
|
||
visible: root.derived === "color"
|
||
spacing: Style.space(14)
|
||
|
||
Rectangle {
|
||
width: Math.min(Style.space(240), parent.width)
|
||
height: Style.space(120)
|
||
radius: Style.cornerRadius
|
||
color: root.hexRe.test(root.rawSafe()) ? root.rawSafe() : "transparent"
|
||
border.width: Style.normalBorderWidth
|
||
border.color: root.lineColor
|
||
}
|
||
|
||
Text {
|
||
text: root.rawSafe()
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.heading
|
||
font.bold: true
|
||
}
|
||
|
||
Text {
|
||
visible: root.rgbLine().length > 0
|
||
text: root.rgbLine()
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
}
|
||
|
||
Text {
|
||
visible: root.hslLine().length > 0
|
||
text: root.hslLine()
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
}
|
||
}
|
||
|
||
// link body
|
||
Column {
|
||
anchors.top: divider.bottom
|
||
anchors.bottom: metaRow.top
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.topMargin: Style.space(10)
|
||
anchors.bottomMargin: Style.space(10)
|
||
visible: root.derived === "link"
|
||
spacing: Style.space(10)
|
||
|
||
Text {
|
||
text: Classify.urlDomain(root.entry ? String(root.entry.text || "") : "")
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.display
|
||
font.bold: true
|
||
elide: Text.ElideRight
|
||
width: parent.width
|
||
maximumLineCount: 1
|
||
}
|
||
|
||
Text {
|
||
text: root.entry ? Classify.firstLine(String(root.entry.text || ""), 400) : ""
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
wrapMode: Text.WrapAnywhere
|
||
width: parent.width
|
||
}
|
||
|
||
Text {
|
||
text: "Ctrl+O opens this link in your browser"
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
|
||
Rectangle {
|
||
radius: height / 2
|
||
color: Util.alpha(Color.accent, 0.15)
|
||
width: linkOpenLabel.implicitWidth + Style.space(16)
|
||
height: Style.space(22)
|
||
|
||
Row {
|
||
anchors.centerIn: parent
|
||
spacing: Style.space(4)
|
||
|
||
Text {
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
text: ""
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
|
||
Text {
|
||
id: linkOpenLabel
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
text: "Open link"
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
font.bold: true
|
||
}
|
||
}
|
||
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
cursorShape: Qt.PointingHandCursor
|
||
onClicked: root.onOpen()
|
||
}
|
||
}
|
||
}
|
||
|
||
// image body
|
||
Column {
|
||
anchors.top: divider.bottom
|
||
anchors.bottom: metaRow.top
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.topMargin: Style.space(10)
|
||
anchors.bottomMargin: Style.space(10)
|
||
visible: root.derived === "image"
|
||
spacing: Style.space(8)
|
||
|
||
// Decoded QR payload sits above the image so it is immediately readable.
|
||
Rectangle {
|
||
visible: root.entry && root.entry.qr
|
||
width: parent.width
|
||
height: qrContent.height + Style.space(12)
|
||
radius: Style.cornerRadius
|
||
color: root.chipBg
|
||
|
||
Column {
|
||
id: qrContent
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.top: parent.top
|
||
anchors.margins: Style.space(6)
|
||
anchors.topMargin: Style.space(6)
|
||
anchors.leftMargin: Style.space(6)
|
||
anchors.rightMargin: Style.space(6)
|
||
spacing: Style.space(4)
|
||
|
||
Row {
|
||
spacing: Style.space(6)
|
||
|
||
Text {
|
||
text: ""
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
}
|
||
|
||
Text {
|
||
text: "QR code content"
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
font.bold: true
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
}
|
||
}
|
||
|
||
TextEdit {
|
||
id: qrValue
|
||
width: parent.width
|
||
readOnly: true
|
||
activeFocusOnPress: false
|
||
text: root.entry && root.entry.qr ? root.entry.qr : ""
|
||
textFormat: TextEdit.PlainText
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
font.bold: true
|
||
wrapMode: TextEdit.WrapAnywhere
|
||
selectionColor: Util.alpha(Color.accent, 0.4)
|
||
}
|
||
|
||
// QR payloads frequently encode links — offer the open affordance.
|
||
Rectangle {
|
||
visible: root.qrUrl().length > 0
|
||
radius: height / 2
|
||
color: Util.alpha(Color.accent, 0.15)
|
||
width: qrOpenLabel.implicitWidth + Style.space(16)
|
||
height: Style.space(20)
|
||
|
||
Row {
|
||
anchors.centerIn: parent
|
||
spacing: Style.space(4)
|
||
|
||
Text {
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
text: ""
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
|
||
Text {
|
||
id: qrOpenLabel
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
text: "Open link"
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
font.bold: true
|
||
}
|
||
}
|
||
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
cursorShape: Qt.PointingHandCursor
|
||
onClicked: root.onOpen()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// OCR text recovered from the image (searchable like any text clip).
|
||
Rectangle {
|
||
id: ocrPanel
|
||
visible: root.entry && root.entry.ocr
|
||
width: parent.width
|
||
height: Math.min(Style.space(150), ocrContent.height + Style.space(12))
|
||
radius: Style.cornerRadius
|
||
color: root.chipBg
|
||
|
||
Column {
|
||
id: ocrContent
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.top: parent.top
|
||
anchors.topMargin: Style.space(6)
|
||
anchors.leftMargin: Style.space(6)
|
||
anchors.rightMargin: Style.space(6)
|
||
spacing: Style.space(4)
|
||
|
||
Text {
|
||
text: " Recognized text (OCR)"
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
font.bold: true
|
||
}
|
||
|
||
Flickable {
|
||
width: parent.width
|
||
height: ocrText.implicitHeight
|
||
clip: true
|
||
contentWidth: width
|
||
contentHeight: ocrText.implicitHeight
|
||
|
||
TextEdit {
|
||
id: ocrText
|
||
width: parent.width
|
||
readOnly: true
|
||
activeFocusOnPress: false
|
||
text: root.entry && root.entry.ocr ? root.entry.ocr : ""
|
||
textFormat: TextEdit.PlainText
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
wrapMode: TextEdit.Wrap
|
||
selectionColor: Util.alpha(Color.accent, 0.4)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Item {
|
||
width: parent.width
|
||
height: Math.max(0, parent.height
|
||
- (root.entry && root.entry.qr ? qrContent.height + Style.space(12) + Style.space(8) : 0)
|
||
- (root.entry && root.entry.ocr ? ocrPanel.height + Style.space(8) : 0)
|
||
- infoLabel.height - Style.space(12))
|
||
|
||
Image {
|
||
id: img
|
||
anchors.centerIn: parent
|
||
width: parent.width
|
||
height: parent.height
|
||
source: root.entry && root.entry.path ? Util.fileUrl(root.entry.path) : ""
|
||
fillMode: Image.PreserveAspectFit
|
||
asynchronous: true
|
||
smooth: true
|
||
cache: false
|
||
}
|
||
|
||
Rectangle {
|
||
anchors.fill: img
|
||
color: "transparent"
|
||
border.width: Style.normalBorderWidth
|
||
border.color: root.lineColor
|
||
radius: Style.space(4)
|
||
visible: img.status === Image.Ready
|
||
}
|
||
|
||
Text {
|
||
anchors.centerIn: parent
|
||
visible: img.status === Image.Error || img.status === Image.Null
|
||
text: "Preview unavailable"
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
}
|
||
}
|
||
|
||
Text {
|
||
id: infoLabel
|
||
text: {
|
||
if (!root.entry) return ""
|
||
var e = root.entry
|
||
var dims = e.w && e.h ? e.w + " × " + e.h + " px · " : ""
|
||
return dims + (e.mime || "image") + (e.bytes ? " · " + Classify.formatBytes(e.bytes) : "")
|
||
}
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
}
|
||
|
||
// files body
|
||
Column {
|
||
anchors.top: divider.bottom
|
||
anchors.bottom: metaRow.top
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
anchors.topMargin: Style.space(10)
|
||
anchors.bottomMargin: Style.space(10)
|
||
visible: root.derived === "files"
|
||
spacing: Style.space(6)
|
||
clip: true
|
||
|
||
Repeater {
|
||
model: {
|
||
if (!root.entry || root.entry.type !== "files") return []
|
||
return (root.entry.paths || []).slice(0, 10)
|
||
}
|
||
|
||
delegate: Row {
|
||
required property var modelData
|
||
width: parent ? parent.width : 0
|
||
spacing: Style.space(8)
|
||
|
||
Text {
|
||
text: ""
|
||
color: Color.accent
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
}
|
||
|
||
Text {
|
||
text: Classify.fileBase(modelData)
|
||
color: root.fg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.body
|
||
elide: Text.ElideMiddle
|
||
width: parent.width - Style.space(24)
|
||
maximumLineCount: 1
|
||
}
|
||
}
|
||
}
|
||
|
||
Text {
|
||
visible: root.entry && root.entry.paths && root.entry.paths.length > 10
|
||
text: root.entry && root.entry.paths ? "… and " + (root.entry.paths.length - 10) + " more" : ""
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
|
||
Text {
|
||
text: root.entry && root.entry.paths && root.entry.paths.length > 0
|
||
? "in " + Classify.fileDir(root.entry.paths[0])
|
||
: ""
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
elide: Text.ElideMiddle
|
||
width: parent.width
|
||
maximumLineCount: 1
|
||
}
|
||
}
|
||
|
||
// ------------------------------------------------------------- meta chips
|
||
|
||
Row {
|
||
id: metaRow
|
||
anchors.bottom: parent.bottom
|
||
anchors.left: parent.left
|
||
anchors.right: parent.right
|
||
spacing: Style.space(6)
|
||
|
||
Rectangle {
|
||
width: Style.space(20)
|
||
height: Style.space(20)
|
||
radius: height / 2
|
||
color: root.chipBg
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
|
||
Text {
|
||
anchors.centerIn: parent
|
||
text: Classify.typeIcon(root.derived)
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
}
|
||
|
||
Rectangle {
|
||
radius: height / 2
|
||
color: root.chipBg
|
||
width: typeChipText.implicitWidth + Style.space(14)
|
||
height: Style.space(20)
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
|
||
Text {
|
||
id: typeChipText
|
||
anchors.centerIn: parent
|
||
text: Classify.typeLabel(root.derived)
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
}
|
||
|
||
Repeater {
|
||
model: root.metaChips()
|
||
|
||
delegate: Rectangle {
|
||
required property var modelData
|
||
property string chipText: String(modelData)
|
||
|
||
radius: height / 2
|
||
color: root.chipBg
|
||
width: chipLabel.implicitWidth + Style.space(14)
|
||
height: Style.space(20)
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
|
||
Text {
|
||
id: chipLabel
|
||
anchors.centerIn: parent
|
||
text: parent.chipText
|
||
textFormat: Text.PlainText
|
||
color: root.mutedFg
|
||
font.family: root.font_
|
||
font.pixelSize: Style.font.caption
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
readonly property var hexRe: /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
|
||
}
|