cordova-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From nikhi...@apache.org
Subject cordova-registry-web git commit: CB-9219 Added filters to search, support for multiple words, localize download count and other css changes
Date Fri, 19 Jun 2015 23:34:57 GMT
Repository: cordova-registry-web
Updated Branches:
  refs/heads/master 037c7f87b -> 14fe2277e


CB-9219 Added filters to search, support for multiple words, localize download count and other
css changes


Project: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/commit/14fe2277
Tree: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/tree/14fe2277
Diff: http://git-wip-us.apache.org/repos/asf/cordova-registry-web/diff/14fe2277

Branch: refs/heads/master
Commit: 14fe2277e94ab4c82c8720ce98ac0474aa498fd4
Parents: 037c7f8
Author: Raghav Katyal <rakatyal@microsoft.com>
Authored: Fri Jun 19 10:47:27 2015 -0700
Committer: Raghav Katyal <rakatyal@microsoft.com>
Committed: Fri Jun 19 10:47:27 2015 -0700

----------------------------------------------------------------------
 npm-search/assets/css/base.css | 235 ++++++++++++++++++++----------------
 npm-search/assets/js/app.js    | 173 ++++++++++++++++++++------
 npm-search/package.json        |   1 +
 3 files changed, 266 insertions(+), 143 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/14fe2277/npm-search/assets/css/base.css
----------------------------------------------------------------------
diff --git a/npm-search/assets/css/base.css b/npm-search/assets/css/base.css
index f3b4763..169cde1 100644
--- a/npm-search/assets/css/base.css
+++ b/npm-search/assets/css/base.css
@@ -1,34 +1,14 @@
-* {
-  margin: 0;
-  padding: 0;
-  -webkit-text-size-adjust: none;
-}
 
 h1 {
   text-align: center;
 }
 
-h2 {
-  font-size: 17px;
-  font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
-  font-weight: 300;
-  letter-spacing: 0.05em;
-  font-size: 34px;
-  padding: 48px 0;
-}
+body { 
+  font-family: 'Segoe UI', tahoma, arial, helvetica, sans-serif; 
+  font-size: 16px; 
+  margin: 0; 
+} 
 
-body,
-a {
-  color: #3b4854;
-}
-
-p, blockquote, ul, ol, dl, table, pre {
-  margin: 15px 0;
-}
-
-li {
-  margin-left: 35px;
-}
 
 /*---------------------------------------------------
     Pluggy and msg
@@ -82,102 +62,143 @@ li {
   background-position: 5.5px 5.5px;
 }
 
+#supportedPlatforms div {
+  margin: 12px 2px 2px 0;
+  border: 1px solid #363636;
+  border-radius: 8px;
+  padding: .4em .5em;
+  height: 11px;
+  font-size: 11px;
+  line-height: 11px;
+  display: inline-block;
+  align-items: center;
+
+}
+
 /*---------------------------------------------------
     Plugin List
 ---------------------------------------------------*/
 
-#pluginList {
+.pluginList {
   list-style-type: none;
   padding: 0px;
 }
 
-#pluginList li {
-  border: 1px solid #363636;
-  margin-left: 0px;
-  margin-bottom: 10px;
-  position: relative;
-  background: white;
-}
-
-#pluginList li:before {
-  content: "";
-  position:absolute;
-  z-index: -1;
-  width:96%;
-  bottom: 0;
-  height: 10px;
-  left: 2%;
-  border-radius: 20px;
-  box-shadow:0 0 18px rgba(0,0,0,0.6);
+.pluginList li {
+  margin: 0 0 60px 0; 
 }
 
 /*---------------------------------------------------
     PluginCards
 ---------------------------------------------------*/
+.pluginCard {  
+  position: relative;  
+  border: 1px solid #CDCDCD;  
+  background: white;  
+  min-height: 10em;  
+}
+
+.pluginCard:after { 
+  z-index: -1; 
+  position: absolute; 
+  content: ""; 
+  bottom: 18px; 
+  right: 2px; 
+  left: auto; 
+  width: 50%; 
+  top: 80%; 
+  max-width:300px; 
+  background: #777; 
+  -webkit-box-shadow: 0 15px 10px #777; 
+  -moz-box-shadow: 0 15px 10px #777; 
+  box-shadow: 0 15px 10px #777; 
+  -webkit-transform: rotate(3deg); 
+  -moz-transform: rotate(3deg); 
+  -o-transform: rotate(3deg); 
+  -ms-transform: rotate(3deg); 
+  transform: rotate(3deg); 
+} 
+
+.pluginCard h3 { 
+  margin: 0.2em 0.2em 0.4em 0em; 
+  font-size: 1.5em; 
+  display: inline-block; 
+} 
+
+.pluginCard a:link, 
+.pluginCard a:visited { 
+  text-decoration: none; 
+  color: #404D58; 
+} 
+
+.pluginCard a:hover, 
+.pluginCard a:active { 
+  text-decoration: underline;   
+} 
+
+.featuredPlugin { 
+  -webkit-box-shadow: -3px 0px 0px #4CC2E4; 
+  -moz-box-shadow: -3px 0px 0px #4CC2E4; 
+  box-shadow: -3px 0px 0px #4CC2E4; 
+  border-left-width: 0px; 
+} 
 
 .pluginCardContents {
-  overflow: hidden;
-}
-
-#pluginInfo {
-  padding: 5px 20px;
-  display: block;
-  font-family: 'Segoe UI', tahoma, arial, helvetica, sans-serif;
-}
-
-#pluginInfo a {
-  font-size: 21px;
-  font-weight: bold;
-  color: black;
-  text-decoration: none;
-}
-
-#pluginInfo a:hover {
-    text-decoration: underline;
-}
-
-#pluginInfo .author {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-p.license {
-  text-align: right;
-  display: block;
-  margin: 0;
-  font-style: italic;
-  color: #363636;
-  font-size: 14px;
-}
-
-p.version {
-  text-align: right;
-  display: block;
-  margin: 0;
-}
-
-
-#featured {
-  padding-bottom:100%;
-  margin-bottom:-100%;
-  float: left;
-  width: 10px;
-  background-color: #71B9F9;
-}
-
-#supportedPlatforms { }
-
-#supportedPlatforms div {
-  margin: 12px 2px 2px 0;
-  border: 1px solid #363636;
-  border-radius: 8px;
-  padding: .4em .5em;
-  height: 11px;
-  font-size: 11px;
-  line-height: 11px;
-  display: inline-block;
-  align-items: center;
-}
+  border: 1px solid #363636; 
+  margin-bottom: 10px; 
+  position: relative; 
+  background: white; 
+}
+
+.primaryContent { 
+  display: flex; 
+  flex-direction: column; 
+} 
+
+.primaryContent .header small { 
+  color: #83878B; 
+} 
+ 
+.primaryContent .pluginAuthor { 
+  font-weight: bold; 
+} 
+ 
+.primaryContent .pluginDesc { 
+  flex-grow: 1; 
+  font-size: 1em; 
+  color: #404040; 
+} 
+
+.supportedPlatforms { 
+  list-style-type: none; 
+  padding: 5px 0px; 
+  font-size: 0.8em; 
+}  
+ 
+.supportedPlatforms li { 
+  margin: 0 5px 0 0; 
+  display: inline-block; 
+  border: 1px solid #F2F2F2; 
+  padding: 2px 10px; 
+  color: #7A828B; 
+}  
+ 
+.secondaryContent { 
+  display: flex; 
+  flex-direction: column; 
+  text-align: right; 
+  font-size: 0.9em; 
+  color: #7A828B; 
+}  
+ 
+.download { 
+flex-grow: 1; 
+}  
+ 
+.extraInfo p { 
+margin-top: 2px; 
+margin-bottom: 2px; 
+} 
 
 .clickable {
   cursor: pointer;
@@ -381,4 +402,4 @@ pre code {
     h2 {
     font-size: 20px;
   }
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/14fe2277/npm-search/assets/js/app.js
----------------------------------------------------------------------
diff --git a/npm-search/assets/js/app.js b/npm-search/assets/js/app.js
index 216c417..c0726d3 100644
--- a/npm-search/assets/js/app.js
+++ b/npm-search/assets/js/app.js
@@ -1,4 +1,5 @@
 var React    = window.React = require('react'), // assign it to window for react chrome extension
+    classNames = require('classnames'), 
     App = {};
 
 var OfficialPlugin = React.createClass({
@@ -9,6 +10,18 @@ var OfficialPlugin = React.createClass({
     }
 })
 
+var PlatformButton = React.createClass({
+    onClick: function() {
+        var appInstance = React.render(<App />, document.getElementById('container'));
+        appInstance.addCondition("platform:" + this.props.platform);
+    },
+    render: function() {
+        return (
+            <li className = "clickable" onClick={this.onClick}> {this.props.platform}
</li>
+        );
+    }
+})
+
 var SupportedPlatforms = React.createClass({
     getInitialState: function() {
         return {
@@ -32,16 +45,16 @@ var SupportedPlatforms = React.createClass({
         keywords.forEach(function(keyword) {
             switch (keyword) {
                 case 'cordova-firefoxos':
-                    otherPlatformsSupported.push(<div>FirefoxOS</div>);
+                    otherPlatformsSupported.push(<PlatformButton platform="FirefoxOS"
/>);
                     break;
                 case 'cordova-android':
                     sortedMajorPlatforms[0].present = true;
                     break;
                 case 'cordova-amazon-fireos':
-                    otherPlatformsSupported.push(<div>FireOS</div>);
+                    otherPlatformsSupported.push(<PlatformButton platform="FireOS" />);
                     break;
                 case 'cordova-ubuntu':
-                    otherPlatformsSupported.push(<div>Ubuntu</div>);
+                    otherPlatformsSupported.push(<PlatformButton platform="Ubuntu" />);
                     break;
                 case 'cordova-ios':
                     sortedMajorPlatforms[1].present = true;
@@ -50,33 +63,34 @@ var SupportedPlatforms = React.createClass({
                     sortedMajorPlatforms[3].present = true;
                     break;
                 case 'cordova-wp8':
-                    otherPlatformsSupported.push(<div>Windows Phone 8</div>);
+                    otherPlatformsSupported.push(<PlatformButton platform="Windows Phone
8" />);
                     break;
                 case 'cordova-windows8':
                 case 'cordova-windows':
                     sortedMajorPlatforms[2].present = true;
                     break;
                 case 'cordova-browser':
-                    otherPlatformsSupported.push(<div>Browser</div>);
+                    otherPlatformsSupported.push(<PlatformButton platform="Browser" />);
                     break;
             }
         });
+
         sortedMajorPlatforms.forEach(function(platform) {
             if(platform.present)
-                majorPlatformsSupported.push(<div>{platform.text}</div>);
+                majorPlatformsSupported.push(<PlatformButton platform={platform.text}
/>)
         });
         while(majorPlatformsSupported.length < 4 && otherPlatformsSupported.length
> 0)
             majorPlatformsSupported.push(otherPlatformsSupported.shift());
 
         var moreButton;
         if(otherPlatformsSupported.length > 0 && !this.state.moreClicked)
-            moreButton = <div className="clickable" onClick={this.onClick}>...</div>
+            moreButton = <li className="clickable" onClick={this.onClick}>...</li>
         return (
-            <div id="supportedPlatforms" className="col-xs-9">
+            <ul className="supportedPlatforms">
                 {majorPlatformsSupported}
                 {moreButton}
                 { this.state.moreClicked ? {otherPlatformsSupported} : null }
-            </div>
+            </ul>
         );
     }
 })
@@ -112,29 +126,43 @@ var Plugin = React.createClass({
         if (license && license.length > 1) {
             license = license[0];
         }
-        var officialPlugin = this.props.plugin.isOfficial;
         var downloadField;
+
+        var classes = classNames({  
+            'pluginCard': true,  
+            'featuredPlugin': this.props.plugin.isOfficial,  
+            'row': true  
+        }); 
+
         if(this.props.plugin.downloadCount)
-            downloadField = <p className="version"> {this.props.plugin.downloadCount}
downloads last month</p>;
+        {
+            var downloadCount = this.props.plugin.downloadCount.toLocaleString();
+            downloadField = <p><small> {downloadCount} downloads last month</small></p>;
+        }
         return (
-            <li>
-                <div className="pluginCardContents">
-                    {officialPlugin ? <OfficialPlugin/> : ''}
-                    <div id="pluginInfo">
-                        <div><a href={
-                            'https://www.npmjs.com/package/' + this.props.plugin.name
-                        }>{this.props.plugin.name}</a> by <span className="author">{this.props.plugin.author}</span>
(last updated {this.props.plugin.modified} days ago)</div>
-                        <div id="pluginDesc">{this.props.plugin.description}</div>
-                        <div className="row">
-                            <SupportedPlatforms keywords={this.props.plugin.keywords}/>
-                            <div className="col-xs-3">
-                                {downloadField}
-                                <p className="license">License: {license}</p>
-                                <p className="version">Version: {this.props.plugin.version}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <li> 
+                <div className={classes}> 
+                    <div className="primaryContent col-xs-9"> 
+                        <div className="header"> 
+                            <h3><a href={'https://www.npmjs.com/package/' + this.props.plugin.name}
target="_blank">{this.props.plugin.name}</a></h3> 
+                            <small className="pluginVersion">v{this.props.plugin.version}</small>

+                            <small> by </small> 
+                            <small className="pluginAuthor">{this.props.plugin.author}</small>

+                        </div> 
+                        <div className="pluginDesc">{this.props.plugin.description}</div>

+                        <SupportedPlatforms keywords={this.props.plugin.keywords}/>

+                        </div> 
+                        <div className="secondaryContent col-xs-3"> 
+                        <div className="download"> 
+                            <p></p> 
+                        </div> 
+                        <div className="extraInfo"> 
+                            <p><small><strong>License:</strong> {license}</small></p>

+                            {downloadField} 
+                            <p><small><em>Last updated {this.props.plugin.modified}
days ago</em></small></p> 
+                        </div> 
+                    </div> 
+                </div> 
             </li>
         )
     }
@@ -145,14 +173,67 @@ var PluginList = React.createClass({
         var plugins = [],
             filterText = this.props.filterText.toLowerCase();
 
+        var filters = filterText.split(" ");
+        var platforms = [];
+        var authors = [];
+        var licenses = [];
+        var searchWords = [];
+
+        var ifPresent = function(values, pluginInfo) {
+            var allValuesPresent = true;
+            if(values.length == 0)
+                return allValuesPresent;
+            if(!pluginInfo)
+                return false;
+            values.forEach(function(value) {
+                var valuePresent = false;
+                for(var index=0;index<pluginInfo.length;index++)  
+                {  
+                    if(pluginInfo[index] && pluginInfo[index].toLowerCase().indexOf(value)
> -1)
+                        valuePresent = true;
+                }
+                if(!valuePresent)
+                    allValuesPresent = false;    
+            });
+            return allValuesPresent;
+        };
+
+        filters.forEach(function(filter) {
+            var keywords = filter.split(":");
+            if(keywords.length == 1)
+            {
+                var param = keywords[0].trim();
+                if(param)
+                    searchWords.push(param);
+            }
+            else if(keywords[1].trim())
+            {
+                var param = keywords[1].trim();
+                switch(keywords[0]) {
+                    case 'platform':
+                        platforms.push(param);
+                        break;
+                    case 'author':
+                        authors.push(param);
+                        break;
+                    case 'license':
+                        licenses.push(param);
+                        break;   
+                    default:
+                        searchWords.push(filter);         
+                }
+            }
+            else
+                searchWords.push(filter);
+        });
         this.props.plugins.forEach(function(plugin) {
-            if (plugin.name[0].indexOf(filterText) > -1) {
+            var fullPluginText = plugin.name.concat(plugin.author, plugin.keywords, plugin.license,
plugin.description);
+            if(ifPresent(platforms, plugin.keywords) && ifPresent(authors, plugin.author)
&& ifPresent(licenses, plugin.license) && ifPresent(searchWords, fullPluginText))
                 plugins.push(<Plugin plugin={plugin} key={plugin.author + plugin.name}/>);
-            }
         }.bind(this));
         return (
             <div className="col-xs-offset-2 col-xs-8">
-                <ul id="pluginList">
+                <ul className="pluginList">
                     {plugins}
                 </ul>
             </div>
@@ -174,6 +255,24 @@ var App = React.createClass({
             filterText: filterText
         });
     },
+    addCondition: function(condition) {
+        this.setState(function(previousState, currentProps) {
+            if(previousState.filterText.indexOf(condition) > -1)
+            {
+                return {
+                    filterText: previousState.filterText,
+                    plugins: previousState.plugins
+                };
+            }
+            else
+            {    
+                return {
+                    filterText: previousState.filterText + condition + ' ',
+                    plugins: previousState.plugins
+                };
+            }
+        });
+    },
 
     componentDidMount: function() {
         var plugins = [],
@@ -283,10 +382,12 @@ var App = React.createClass({
 });
 
 App.start = function() {
-    React.render(
-        <App />,
-        document.getElementById('container')
-    )    
+    
+    React.render( 
+        <App />, 
+        document.getElementById('container') 
+     )    
+
 };
 
 function xhrRequest(url, success, fail) {

http://git-wip-us.apache.org/repos/asf/cordova-registry-web/blob/14fe2277/npm-search/package.json
----------------------------------------------------------------------
diff --git a/npm-search/package.json b/npm-search/package.json
index 7527a49..1ca65a5 100644
--- a/npm-search/package.json
+++ b/npm-search/package.json
@@ -25,6 +25,7 @@
     "react": "^0.13.3",
     "react-tools": "^0.13.3",
     "reactify": "^1.1.1",
+    "classnames": "^2.1.2",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   },


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org


Mime
View raw message