Some refactoring. Shift+P moves focus to searchbox

prezesp · Apr 23, 2018 · 29011ce · 29011ce
1 parent 05196be
commit 29011ce
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 47 deletions.
diff --git a/scoop-viewer.py b/scoop-viewer.py
@@ -25,7 +25,7 @@ def __init__(self, *args, **kw):
 
         sizer = wx.BoxSizer(wx.VERTICAL)
         self.browser = wx.html2.WebView.New(self)
-        self.browser.EnableContextMenu(True)
+        self.browser.EnableContextMenu(False)
         self.browser.Bind(wx.html2.EVT_WEBVIEW_NEWWINDOW, Viewer.handle_new_window)
 
         sizer.Add(self.browser, 1, wx.EXPAND, 10)

diff --git a/tests/test.py b/tests/test.py
@@ -66,7 +66,7 @@ def test_install(self):
         wait = ui.WebDriverWait(driver,10)
 
         wait.until(lambda driver: "Loading" not in driver.page_source)
-        elem = driver.find_element_by_css_selector("#app > div > div > div > div.col-sm-9 > div > div > div:nth-child(1) > div.col-sm-2.text-right > button")
+        elem = driver.find_element_by_css_selector("#app > div > div > div > main.col-sm-9 > div > div > div:nth-child(1) > div.col-sm-2.text-right > button")
         elem.click()
         wait.until(lambda driver: "Installed" in driver.page_source)
         assert "Installed" in driver.page_source

diff --git a/webapp/frontend/app.jsx b/webapp/frontend/app.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import BucketsList from './components/buckets-list';
 import BucketContainer from './components/bucket-container';
-import Menu from './components/menu';
+import Header from './components/header';
 
 class App extends React.Component {
     constructor(props) {
@@ -26,7 +26,6 @@ class App extends React.Component {
         this.setState({query: newQuery});
     }
 
-    //<div className="col-sm-3 bucket-list" style={{'paddingTop': '20px', 'minHeight': '100%'}}>
     render() {
         return (
             <div>
@@ -36,7 +35,7 @@ class App extends React.Component {
                             <BucketsList handleBucketChange={this.handleBucketChange} apiRoot={this.apiRoot}/>
                         </nav>
                         <main className="col-sm-9 offset-sm-3 pt-3">
-                            <Menu onSearch={this.handleSearch}/>
+                            <Header onSearch={this.handleSearch}/>
                             <BucketContainer name={this.state.currentBucket} query={this.state.query} apiRoot={this.apiRoot}/>
                         </main>
                     </div>

diff --git a/webapp/frontend/components/bucket-content.js b/webapp/frontend/components/bucket-content.js
@@ -7,7 +7,7 @@ const BucketContent = (props) => {
         return (<BucketContentItem key={item.name} {...item} apiRoot={props.apiRoot}/>)
     });
     return (
-        <div className="bucket-content">
+        <div>
             {content}
         </div>
     )

diff --git a/webapp/frontend/components/menu.js → webapp/frontend/components/header.js b/webapp/frontend/components/menu.js → webapp/frontend/components/header.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import SearchBox from './search-box';
 
-const Menu = (props) => {
-	//fixed-top
+const Header = (props) => {
     return (
         <nav className="navbar navbar-expand-lg navbar-light bg-light header">
-			<a className="navbar-brand header-title tab" href="#">
+			<a className="navbar-brand header-tab" href="#">
 				scoop-viewer
-				<div class="tab-arrow"/>
+				<div class="header-tab-arrow"/>
 			</a>
 			<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			  <span className="navbar-toggler-icon"></span>
@@ -25,4 +24,4 @@ const Menu = (props) => {
     );
 }
 
-export default Menu;
+export default Header;
diff --git a/webapp/frontend/components/search-box.js b/webapp/frontend/components/search-box.js
@@ -29,7 +29,8 @@ class SearchBox extends Component {
                     type="search" 
                     placeholder="Search" 
                     aria-label="Search" 
-                    name="q" 
+                    name="q"
+                    id="searchBox" 
                     value={this.state.query} 
                     onChange={event => this.setState({query: event.target.value})}
                     onKeyPress={this.handleKeyPress}/>

diff --git a/webapp/static/custom.css b/webapp/static/custom.css
@@ -4,7 +4,6 @@ body {
     padding-top: 50px;
 }
 
-
 /*
  * Sidebar
  */
@@ -44,6 +43,7 @@ body {
     font-weight: 500;
 }
 
+/* Components */
 .header {
     background-color: #171814 !important;
     margin-left: -15px;
@@ -58,33 +58,19 @@ body {
     }
 }
 
-.header-title {
-    color: #fff !important;
+.header-tab
+{
     background: rgb(39, 40, 34);
+    border-radius: 0px 30px 0px 0px;
+    color: #fff !important;
     font-weight: 500;
     margin: -15px;
+    margin-right:40px;
     padding: 20px;
-}
-
-.btn-primary {
-    background-color: rgb(88, 194, 229);
-    border-color: rgb(88, 194, 229);
-    color: #000;
-}
-.btn-success {
-    background-color: rgb(116, 170, 4);
-    border-color: rgb(116, 170, 4);
-    color: #000;
-}
-
-.tab
-{
-    border-radius: 0px 30px 0px 0px;
     position: relative;
-    margin-right:40px;
 }
 
-.tab-arrow
+.header-tab-arrow
 {
   border-color: transparent transparent rgb(39, 40, 34) rgb(39, 40, 34);
   border-style: solid;
@@ -96,7 +82,33 @@ body {
   right:-23px;
 }
 
-.nav-link {
+main h4, main p {
+    font-family: 'Consolas' !important;
+}
+
+
+.search-box {
+    border-radius: 0;
+    padding: 0.2rem .75rem;
+    font-family: Consolas;
+}
+
+
+/* Bootstrap override */
+
+.btn-primary {
+    background-color: rgb(88, 194, 229);
+    border-color: rgb(88, 194, 229);
+    color: #000;
+}
+
+.btn-success {
+    background-color: rgb(116, 170, 4);
+    border-color: rgb(116, 170, 4);
+    color: #000;
+}
+
+nav .nav-link {
     padding: .5rem .5rem;
 }
 
@@ -108,13 +120,3 @@ nav.navbar-light .navbar-nav .nav-link {
 nav.navbar-light .navbar-nav .nav-link:hover {
     color: #fff;
 }
-
-.bucket-content h4, .bucket-content p {
-    font-family: 'Consolas' !important;
-}
-
-.search-box {
-    border-radius: 0;
-    padding: 0.2rem .75rem;
-    font-family: Consolas;
-}
diff --git a/webapp/templates/index.html b/webapp/templates/index.html
@@ -8,12 +8,40 @@
 	</head>
 	<body>
         <div id="app" data-api-root={{ request.script_root|tojson|safe }}></div>
-		
+
         <script src="{{url_for('static', filename='js/bundle.js')}}"></script>
         <script type=text/javascript src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
         <script type=text/javascript src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
         <script type=text/javascript src="{{ url_for('static', filename='vendor/ladda/spin.min.js') }}"></script>
-        <script type=text/javascript src="{{ url_for('static', filename='vendor/ladda/ladda.min.js') }}"></script>
-
+		<script type=text/javascript src="{{ url_for('static', filename='vendor/ladda/ladda.min.js') }}"></script>
+
+        <script>
+			var isCtrl = false;
+			var isShift = false;
+			$(document).ready(function() {
+				// action on key up
+				$(document).keyup(function(e) {
+					if(e.which == 17) {
+						isCtrl = false;
+					}
+					if(e.which == 16) {
+						isShift = false;
+					}
+				});
+				// action on key down
+				$(document).keydown(function(e) {
+					if(e.which == 17) {
+						isCtrl = true; 
+					}
+					if(e.which == 16) {
+						isShift = true; 
+					}
+					if(e.which == 80 && isShift) { 
+						document.getElementById("searchBox").focus();
+						return false;
+					} 
+				});
+			});
+        </script>
 	</body>
 </html>