Add search box
This commit is contained in:
parent
a10a1d8812
commit
142d74cebb
2 changed files with 37 additions and 5 deletions
|
|
@ -8,6 +8,7 @@ type
|
|||
cornerRadiusBottomLeft*: float
|
||||
cornerRadiusBottomRight*: float
|
||||
|
||||
# To see icons in code, use a nerd font
|
||||
const ICON_TRASH* = ""
|
||||
const ICON_SEARCH* = "🔍"
|
||||
const ICON_CIRCLED_CROSS* = "✖"
|
||||
|
|
@ -186,4 +187,32 @@ proc drawButton*(vg: Context, preicon: string, text: string, x, y, w, h: float,
|
|||
vg.setFillColor(rgba(0,0,0,160))
|
||||
vg.text(text, x+w*0.5-tw*0.5+iw*0.25, y+h*0.5-1)
|
||||
vg.setFillColor(rgba(255,255,255,160))
|
||||
vg.text(text, x+w*0.5-tw*0.5+iw*0.25, y+h*0.5)
|
||||
vg.text(text, x+w*0.5-tw*0.5+iw*0.25, y+h*0.5)
|
||||
|
||||
proc drawSearchBox*(vg: Context, text: string, x, y, w, h: float) =
|
||||
let cornerRadius = h/2 - 1
|
||||
|
||||
let bg = vg.boxGradient(x, y+1.5, w, h, h/2, 5, rgba(0, 0, 0, 16), rgba(0, 0, 0, 92))
|
||||
vg.beginPath()
|
||||
vg.pathRoundedRect(x,y, w,h, cornerRadius)
|
||||
vg.setFillPaint(bg)
|
||||
vg.pathFill()
|
||||
|
||||
vg.setFontSize(h*1.3)
|
||||
vg.setFont("icons")
|
||||
vg.setFillColor(rgba(255,255,255,64))
|
||||
vg.textAlign("center middle")
|
||||
vg.text(ICON_SEARCH, x+h*0.55f, y+h*0.55f)
|
||||
|
||||
vg.setFontSize(20.0f)
|
||||
vg.setFont("sans")
|
||||
vg.setFillColor(rgba(255,255,255,32))
|
||||
|
||||
vg.textAlign("left middle")
|
||||
vg.text(text, x+h*1.05f,y+h*0.5f)
|
||||
|
||||
vg.setFontSize(h*1.3f)
|
||||
vg.setFont("icons")
|
||||
vg.setFillColor(rgba(255,255,255,32))
|
||||
vg.textAlign("center middle")
|
||||
vg.text(ICON_CIRCLED_CROSS, x+w-h*0.55f, y+h*0.55f)
|
||||
|
|
@ -90,10 +90,11 @@ proc main() =
|
|||
|
||||
let vg = nanovg.newContext()
|
||||
discard sdl.glSetSwapInterval(0)
|
||||
vg.loadFont(currentSourceDir()/"resources/umeboshi.ttf", "sans")
|
||||
vg.loadFont(currentSourceDir()/"resources/Roboto-Bold.ttf", "sans-bold")
|
||||
vg.loadFont(currentSourceDir()/"resources/fa.ttf", "fa")
|
||||
vg.loadFont(currentSourceDir()/"resources/entypo.ttf", "icons")
|
||||
vg.loadFont(currentSourceDir()/"resources"/"Roboto-Regular.ttf", "sans")
|
||||
vg.loadFont(currentSourceDir()/"resources"/"umeboshi.ttf", "umeboshi")
|
||||
vg.loadFont(currentSourceDir()/"resources"/"Roboto-Bold.ttf", "sans-bold")
|
||||
vg.loadFont(currentSourceDir()/"resources"/"fa.ttf", "fa")
|
||||
vg.loadFont(currentSourceDir()/"resources"/"entypo.ttf", "icons")
|
||||
|
||||
var done = false
|
||||
var prevt: float = sdl.getTicks().float/1000.0
|
||||
|
|
@ -120,12 +121,14 @@ proc main() =
|
|||
gpu.flushBlitBuffer()
|
||||
|
||||
withFrame(vg, window):
|
||||
vg.setFont("umeboshi")
|
||||
vg.text("Some仮名thing is up", 100, 100, 100)
|
||||
vg.drawWindow("Title", 50, 50, 300, 400)
|
||||
vg.drawLabel("Hello!", 10, 10, 500, 20)
|
||||
vg.drawButton(ICON_TRASH, "Delete", 100, 200, 160, 28, rgba(128, 16, 8, 255))
|
||||
vg.drawButton(ICON_TRASH, "Deleter", 100, 250, 160, 28, rgba(12, 130, 80, 255))
|
||||
vg.drawButton("Testing", 100, 300, 160, 28)
|
||||
vg.drawSearchBox("Search...", 60, 400, 280, 25)
|
||||
|
||||
gpu.resetRendererState()
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue