[SailfishDevel] A component similar to InfoBanner

[Benoît HERVIER]

Sfiet_Konstantin on #sailfishos said this was too much ugly ...
([14:34] <Sfiet_Konstantin> but the message is ugly [14:34] 
<Sfiet_Konstantin> but it looks good :D)
So i change colors and size to depends on the Theme : Not looking 
anymore to a big threatening button ...

http://khertan.net/blog/silica_infobanner

http://khertan.net/datas/downloads/Others/InfoBanner.qml

http://www.youtube.com/watch?v=lPfF_hcs2rI

Regards,

Le 2013-08-12 13:22, Benoît HERVIER a écrit :
> Hi,
> 
> I'm remembering seeing similar question here.
> 
> So if you are porting apps from Harmattan and you like InfoBanner
> Components. This could interest you, i ve write a text only InfoBanner
> for ownNotes :
> 
> Code
> 
> import QtQuick 2.0
> import Sailfish.Silica 1.0
> import net.khertan.python 1.0
> import Sailfish.Silica.theme 1.0
> 
> DockedPanel {
>     id: root
> 
>     width: Screen.width - 2*Theme.paddingSmall
>     height: content.height + 2*Theme.paddingSmall
> 
>     dock: Dock.Top
> 
>     Rectangle {
>         id: content
>         x: Theme.paddingSmall
>         y: Theme.paddingSmall
>         width: parent.width
> 
>         height: infoLabel.height + 2*Theme.paddingSmall
>         color: 'black';
>         opacity: 0.75;
> 
>         Label {
>             id: infoLabel
>             text : ''
>             color: 'red'
>             width: parent.width - 2*Theme.paddingSmall
>             x: Theme.paddingSmall
>             y: Theme.paddingSmall
>             wrapMode: Text.WrapAnywhere
>             }
>         MouseArea {
>             anchors.fill: parent
>             onClicked: {
>                 root.hide()
>                 autoClose.stop()
>             }
>         }
>     }
> 
> 
>     function displayError(errorMsg) {
>         infoLabel.text = errorMsg
>         root.show()
>         autoClose.start()
>     }
> 
>     Timer {
>         id: autoClose
>         interval: 15000
>         running: false
>         onTriggered: {
>             root.hide()
>             stop()
>         }
> 
>     }
> }
> ~~~~~~
> 
> 
> How to use
> ----------
> 
> In your ApplicationWindow add :
> 
>     InfoBanner {
>         id: trucmucheBanner
>     }
> 
> And when you need it, call it with
> 
> trucmucheBanner.displayError(errMsg)

-- 
Benoît HERVIER - http://khertan.net/