From d9a3ce8f023a9c16db96286d171f4934637301ae Mon Sep 17 00:00:00 2001
From: riknoll <riknoll@microsoft.com>
Date: Fri, 21 Aug 2015 17:53:02 -0700
Subject: [PATCH] Integrated new search css and added sort

---
 www/static/css-src/_plugins.scss    | 48 +++++++++++++------------
 www/static/plugins/app.js           | 56 ++++++++++++++++++-----------
 www/static/plugins/plugin.jsx       |  4 +--
 www/static/plugins/searchbar.jsx    | 28 +++++++--------
 www/static/plugins/sortbutton.jsx   |  2 +-
 www/static/plugins/sortdropdown.jsx |  8 ++---
 6 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/www/static/css-src/_plugins.scss b/www/static/css-src/_plugins.scss
index 54879a0ea1..e9fbe6ee8f 100644
--- a/www/static/css-src/_plugins.scss
+++ b/www/static/css-src/_plugins.scss
@@ -1,21 +1,22 @@
 .plugins_search_container {
 	max-width:405px;
 	margin:auto;
-
-	button.btn {
-		color:white;
+	.input-group {
+		width:100%;
 	}
 }
+
 .whatisplugin_box {
+	margin-top:20px;
 	img {
 		float:left;
-			padding-right: 20px;
+		    padding-right: 20px;
 			padding-bottom: 20px;
-			width: 84px;
+		    width: 84px;
 	}
 }
 .plugins_links {
-	max-width: 50%;
+	max-width: 405px;
 	margin:auto;
 }
 .progress {
@@ -58,27 +59,30 @@
 }
 
 .filter-by-platform-label {
-	display: inline-block;
-	vertical-align: top;
 	line-height:40px;
-	margin-right: 1em;
+	vertical-align: top;
 }
 
 .filter-by-platform-filters {
-	line-height:40px;
 	display: inline-block;
-	button.btn {
-		&.btn-primary {
-			background-color:$brand-primary;
-		}
-		&.btn-default {
-			background-color:$gray-10;
-			&:hover {
-				background-color: $brand-primary;
-				color: white;
-			}
-		}
-	}
+}
+
+.nav-pills > li > a {
+	background-color:$gray-5;
+}
+
+.nav > li > a:hover {
+	background-color:$gray-10;
+}
+
+.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
+	background-color:$brand-primary;
+	color:black;
+}
+
+.plugins-sort-dropdown {
+	height:40px;
+	margin-top:40px;
 }
 
 /***
diff --git a/www/static/plugins/app.js b/www/static/plugins/app.js
index 7ed6dee33c..dc4d47150c 100755
--- a/www/static/plugins/app.js
+++ b/www/static/plugins/app.js
@@ -37,7 +37,8 @@ var App = React.createClass({
                 filterText: q,
                 placeHolderText: 'Loading...',
                 searchResults: [],
-                staticFilters: staticFilters
+                staticFilters: staticFilters,
+                sortCriteria: "Quality"
             };
         } else {
             return {
@@ -45,7 +46,8 @@ var App = React.createClass({
                 filterText: '',
                 placeHolderText: 'Loading...',
                 searchResults: [],
-                staticFilters: staticFilters
+                staticFilters: staticFilters,
+                sortCriteria: "Quality"
             };
         }
     },
@@ -87,7 +89,8 @@ var App = React.createClass({
             App.sortPlugins(previousState.plugins, sort)
             return {
                 plugins: previousState.plugins,
-                searchResults: App.filterPlugins(previousState.plugins, this.state.filterText, this.state.staticFilters)
+                searchResults: App.filterPlugins(previousState.plugins, this.state.filterText, this.state.staticFilters),
+                sortCriteria: sort
             }
         });
     },
@@ -389,11 +392,19 @@ var App = React.createClass({
                     </div>
                     <div className="row">
                         <div className="col-sm-12">
-                        <SearchBar
-                            initialValue={this.state.filterText}
-                            placeHolderText={this.state.placeHolderText}
-                            onUserInput={this.handleUserInput}
-                        />
+                            <div className="plugins_search_container">
+                            <SearchBar
+                                initialValue={this.state.filterText}
+                                placeHolderText={this.state.placeHolderText}
+                                onUserInput={this.handleUserInput}
+                            />
+                            <div className="whatisplugin_box">
+                                <img src="/static/img/pluggy.png"/>
+                                <h2>What is a Cordova plugin?</h2>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec ante placerat, gravida ligula in, interdum mauris. Sed quis est vel erat vestibulum volutpat in vitae.  <a href="#">Learn more...</a></p>
+                            </div>
+                            <div className="clearfix"></div>
+                        </div>
                             <div className="plugins_links">
                                     <ul className="nav nav-justified">
                                     <li><a href="#"><span className="glyphicon glyphicon-plus"></span><i>&nbsp;</i>Contribute Plugins</a></li>
@@ -404,18 +415,23 @@ var App = React.createClass({
                         </div>
                     </div>
                     <div className="row filter-by-platforms">
-                        <div className="filter-by-platform-label"><span>Platform:</span></div>
-                        <ul className="nav nav-pills filter-by-platform-filters">
-                            {createPlatformButton("Android", "cordova-android", this.state)}
-                            {createPlatformButton("iOS", "cordova-ios", this.state)}
-                            {createPlatformButton("Windows 10", "cordova-windows", this.state)}
-                            {createPlatformButton("Blackberry", "cordova-blackberry10", this.state)}
-                            {createPlatformButton("Ubuntu", "cordova-ubuntu", this.state)}
-                            {createPlatformButton("Firefox OS", "cordova-firefoxos", this.state)}
-                            {createPlatformButton("WebOS", "cordova-webos", this.state)}
-                            {createPlatformButton("Fire OS", "cordova-amazon-fireos", this.state)}
-                            {createPlatformButton("Browser", "cordova-browser", this.state)}
-                        </ul>
+                        <div className="col-sm-9">
+                            <div className="filter-by-platform-label"><span>Must Support Platform(s):</span></div>
+                            <ul className="nav nav-pills filter-by-platform-filters">
+                                {createPlatformButton("Android", "cordova-android", this.state)}
+                                {createPlatformButton("iOS", "cordova-ios", this.state)}
+                                {createPlatformButton("Windows 10", "cordova-windows", this.state)}
+                                {createPlatformButton("Blackberry", "cordova-blackberry10", this.state)}
+                                {createPlatformButton("Ubuntu", "cordova-ubuntu", this.state)}
+                                {createPlatformButton("Firefox OS", "cordova-firefoxos", this.state)}
+                                {createPlatformButton("WebOS", "cordova-webos", this.state)}
+                                {createPlatformButton("Fire OS", "cordova-amazon-fireos", this.state)}
+                                {createPlatformButton("Browser", "cordova-browser", this.state)}
+                            </ul>
+                        </div>
+                        <div className="col-sm-3">
+                            <SortDropdown selected={this.state.sortCriteria}/>
+                        </div>
                     </div>
                 </div>
                 <PluginList plugins={this.state.searchResults} />
diff --git a/www/static/plugins/plugin.jsx b/www/static/plugins/plugin.jsx
index 7f7ae4b0cc..858bf371a3 100755
--- a/www/static/plugins/plugin.jsx
+++ b/www/static/plugins/plugin.jsx
@@ -60,14 +60,14 @@ var Plugin = React.createClass({
         }
 
         if(document.queryCommandSupported("copy")) {
-            copyIcon = (<img src="/static/img/copy-clipboard-icon.svg" className="plugins-copy-to-clipboard" onClick={this.copyText}/>)
+            copyIcon = (<a href="#" data-toggle="tooltip" data-placement="left" title="Copy npm install command to clipboard" onClick={this.copyText}><img src="/static/img/copy-clipboard-icon.svg" className="plugins-copy-to-clipboard"/></a>);
         }
 
         return (
             <div className="container plugin-results-result">
                 {copyIcon}
                 <div className="row">
-                    <div className="col-sm-9">
+                    <div className="col-sm-8">
                         <h2><a href={npmLink} onClick={trackOutboundLink.bind(this, npmLink)} target="_blank">{this.props.plugin.name}</a></h2>
                         <p className="version_and_author">v{this.props.plugin.version} by <strong>{this.props.plugin.author}</strong></p>
                     </div>
diff --git a/www/static/plugins/searchbar.jsx b/www/static/plugins/searchbar.jsx
index 16e33ad6aa..29948dcd76 100755
--- a/www/static/plugins/searchbar.jsx
+++ b/www/static/plugins/searchbar.jsx
@@ -39,22 +39,18 @@ var SearchBar = React.createClass({
 
     render: function() {
         return (
-                <div className="plugins_search_container">
-                    <div className="input-group">
-                        <input
-                            className="form-control"
-                            type="text"
-                            autoComplete="off"
-                            placeholder="Find a Plugin..."
-                            value={this.state.textValue}
-                            onChange={this.handleChange}
-                            ref="filterTextInput"
-                            />
-                        <span className="input-group-btn">
-                            <button className="btn btn-default" type="button"><span className="glyphicon glyphicon-search"></span></button>
-                        </span>
-                    </div>
-                </div>
+
+            <div className="input-group">
+                <input
+                    className="form-control"
+                    type="text"
+                    autoComplete="off"
+                    placeholder="Find a Plugin..."
+                    value={this.state.textValue}
+                    onChange={this.handleChange}
+                    ref="filterTextInput"
+                    />
+            </div>
         );
     }
 });
diff --git a/www/static/plugins/sortbutton.jsx b/www/static/plugins/sortbutton.jsx
index e9d321d7ce..6df32263b8 100755
--- a/www/static/plugins/sortbutton.jsx
+++ b/www/static/plugins/sortbutton.jsx
@@ -7,7 +7,7 @@ var SortButton = React.createClass({
     },
     render: function() {
         return (
-            <li className="clickable" onClick={this.onClick}><a>{this.props.criteria}</a></li>
+            <li className="clickable" onClick={this.onClick}><a href="#">{this.props.criteria}</a></li>
         );
     }
 });
diff --git a/www/static/plugins/sortdropdown.jsx b/www/static/plugins/sortdropdown.jsx
index 511c6570d8..4b88e36ff2 100755
--- a/www/static/plugins/sortdropdown.jsx
+++ b/www/static/plugins/sortdropdown.jsx
@@ -4,12 +4,12 @@ var SortButton = require('./sortbutton.jsx');
 var SortDropdown = React.createClass({
     render: function() {
         return (
-            <div className="dropdown">
-                <button className="btn btn-default dropdown-toggle" type="button" id="sortdropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                    Sort
+            <div className="dropdown plugins-sort-dropdown">
+                <button className="btn btn-primary btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <strong>Sort: </strong>{this.props.selected}
                     <span className="caret"></span>
                 </button>
-                <ul className="dropdown-menu" aria-labelledby="sortdropdown">
+                <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
                     <SortButton criteria="Quality"/>
                     <SortButton criteria="Recently Updated"/>
                     <SortButton criteria="Downloads"/>