Updated Search Bar Style

Please note that I don't feel that the search bar needs to be skinned by
users, hence why it is not part of the large css-skinning project. I
also feel that given the PR #416 a new search bar with highlight the new
search functionality.

Updated the look of the search  bar:
+ larger, curved edges
+ changes color when has focus
+ search icon built into search
- removed "Search For" text in lieu of search icon
This commit is contained in:
Matt Lowe 2014-11-09 12:04:09 +01:00
parent 8f801825a9
commit eef4a621b3
4 changed files with 202 additions and 5 deletions

View file

@ -25,6 +25,7 @@
<file>resources/hand.svg</file>
<file>resources/pencil.svg</file>
<file>resources/icon_search.svg</file>
<file>resources/icon_search_black.svg</file>
<file>resources/icon_clearsearch.svg</file>
<file>resources/icon_update.png</file>
<file>resources/icon_view.svg</file>

View file

@ -0,0 +1,198 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="64"
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="icon_search_black.svg">
<defs
id="defs4">
<linearGradient
inkscape:collect="always"
id="linearGradient3709">
<stop
style="stop-color:#4d4d4d;stop-opacity:1;"
offset="0"
id="stop3711" />
<stop
style="stop-color:#4d4d4d;stop-opacity:0;"
offset="1"
id="stop3713" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient3699">
<stop
style="stop-color:#ececec;stop-opacity:1;"
offset="0"
id="stop3701" />
<stop
style="stop-color:#ececec;stop-opacity:0;"
offset="1"
id="stop3703" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient3632">
<stop
style="stop-color:#c87137;stop-opacity:1;"
offset="0"
id="stop3634" />
<stop
style="stop-color:#c87137;stop-opacity:0;"
offset="1"
id="stop3636" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient3622">
<stop
style="stop-color:#f9f9f9;stop-opacity:1;"
offset="0"
id="stop3624" />
<stop
style="stop-color:#f9f9f9;stop-opacity:0;"
offset="1"
id="stop3626" />
</linearGradient>
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 526.18109 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="744.09448 : 526.18109 : 1"
inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3622"
id="linearGradient3628"
x1="30.59761"
y1="8.9243031"
x2="30.59761"
y2="21.545816"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3632"
id="linearGradient3638"
x1="28.430279"
y1="47.808765"
x2="29.960159"
y2="47.808765"
gradientUnits="userSpaceOnUse" />
<inkscape:perspective
id="perspective3685"
inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
inkscape:vp_z="1 : 0.5 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_x="0 : 0.5 : 1"
sodipodi:type="inkscape:persp3d" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3699"
id="linearGradient3705"
x1="29.215645"
y1="1021.9559"
x2="31.852083"
y2="1021.9559"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3709"
id="linearGradient3715"
x1="22.288248"
y1="35.505978"
x2="49.488647"
y2="49.106178"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3632"
id="linearGradient3730"
gradientUnits="userSpaceOnUse"
x1="28.430279"
y1="47.808765"
x2="29.960159"
y2="47.808765" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3699"
id="linearGradient3732"
gradientUnits="userSpaceOnUse"
x1="29.215645"
y1="1021.9559"
x2="31.852083"
y2="1021.9559" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="7.84375"
inkscape:cx="6.0725518"
inkscape:cy="32"
inkscape:document-units="px"
inkscape:current-layer="g3717"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1028"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-988.36218)">
<g
id="g3717"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,729.31175,279.31708)">
<path
transform="matrix(1.7216859,0,0,1.7216859,-37.751505,955.72849)"
d="m 49.338646,35.505978 a 13.450199,13.450199 0 1 1 -26.900398,0 13.450199,13.450199 0 1 1 26.900398,0 z"
sodipodi:ry="13.450199"
sodipodi:rx="13.450199"
sodipodi:cy="35.505978"
sodipodi:cx="35.888447"
id="path2816"
style="fill:#222326;fill-opacity:0;stroke:#222326;stroke-width:1.90745997;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:type="arc" />
<path
transform="matrix(-0.08671958,-1.1164509,1.1164509,-0.08671958,2.9138372,1039.7631)"
d="m 18.613546,52.207172 a 2.5498009,12.302789 0 1 1 -5.099601,0 2.5498009,12.302789 0 1 1 5.099601,0 z"
sodipodi:ry="12.302789"
sodipodi:rx="2.5498009"
sodipodi:cy="52.207172"
sodipodi:cx="16.063745"
id="path2826"
style="fill:#222326;fill-opacity:1;stroke:#222326;stroke-width:0.30000001;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:type="arc" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB

View file

@ -51,9 +51,10 @@ TabDeckEditor::TabDeckEditor(TabSupervisor *_tabSupervisor, QWidget *parent)
aClearSearch->setIcon(QIcon(":/resources/icon_clearsearch.svg"));
connect(aClearSearch, SIGNAL(triggered()), this, SLOT(actClearSearch()));
searchLabel = new QLabel();
searchEdit = new SearchLineEdit;
searchLabel->setBuddy(searchEdit);
searchEdit->addAction(QIcon(":/resources/icon_search_black.svg"), QLineEdit::LeadingPosition);
searchEdit->setObjectName("searchEdit");
searchEdit->setStyleSheet("#searchEdit{background:#DFE0E5;border-radius:13px;padding:5px 0px;}#searchEdit:focus{background:#EBEBEB;}");
setFocusProxy(searchEdit);
setFocusPolicy(Qt::ClickFocus);
@ -73,7 +74,6 @@ TabDeckEditor::TabDeckEditor(TabSupervisor *_tabSupervisor, QWidget *parent)
QHBoxLayout *searchLayout = new QHBoxLayout;
searchLayout->addWidget(deckEditToolBar);
searchLayout->addWidget(searchLabel);
searchLayout->addWidget(searchEdit);
databaseModel = new CardDatabaseModel(db, this);
@ -293,7 +293,6 @@ void TabDeckEditor::retranslateUi()
{
aCardTextOnly->setText(tr("Show card text only"));
aClearSearch->setText(tr("&Clear search"));
searchLabel->setText(tr("&Search for:"));
nameLabel->setText(tr("Deck &name:"));
commentsLabel->setText(tr("&Comments:"));

View file

@ -85,7 +85,6 @@ private:
QTreeView *deckView;
KeySignals deckViewKeySignals;
CardFrame *cardInfo;
QLabel *searchLabel;
SearchLineEdit *searchEdit;
KeySignals searchKeySignals;