From 70d85e8a21f76d952fa45a8628ef083676b39abb Mon Sep 17 00:00:00 2001
From: "/ /\\ / /\\/" <imaitland@gmail.com>
Date: Fri, 1 Nov 2019 09:15:25 -0400
Subject: [PATCH] wip, elastic-search
---
.../ElasticSearchInput.story.jsx | 8 +++
.../elements/ElasticSearchInput/index.jsx | 47 +++++++++++++
.../elements/ElasticSearchInput/styles.scss | 68 +++++++++++++++++++
src/app/components/modules/Header/index.jsx | 2 +
4 files changed, 125 insertions(+)
create mode 100644 src/app/components/elements/ElasticSearchInput/ElasticSearchInput.story.jsx
create mode 100644 src/app/components/elements/ElasticSearchInput/index.jsx
create mode 100644 src/app/components/elements/ElasticSearchInput/styles.scss
diff --git a/src/app/components/elements/ElasticSearchInput/ElasticSearchInput.story.jsx b/src/app/components/elements/ElasticSearchInput/ElasticSearchInput.story.jsx
new file mode 100644
index 000000000..5d24c0157
--- /dev/null
+++ b/src/app/components/elements/ElasticSearchInput/ElasticSearchInput.story.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ElasticSearchInput from './index';
+import { Center } from 'decorators';
+
+storiesOf('Elements', module)
+ .addDecorator(Center)
+ .add('ElasticSearchInput', () => <ElasticSearchInput />);
diff --git a/src/app/components/elements/ElasticSearchInput/index.jsx b/src/app/components/elements/ElasticSearchInput/index.jsx
new file mode 100644
index 000000000..9cd73ee91
--- /dev/null
+++ b/src/app/components/elements/ElasticSearchInput/index.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import tt from 'counterpart';
+
+const ElasticSearchInput = ({ type }) => {
+ return (
+ <span>
+ <form
+ className={'elastic-search-input'}
+ onSubmit={() => {
+ console.log('ELASTIC_SEARCH!');
+ }}
+ >
+ <svg
+ className="elastic-search-input__icon"
+ width="42"
+ height="42"
+ viewBox="0 0 32 32"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g>
+ <path
+ className="elastic-search-input__path"
+ d="M14.3681591,18.5706017 L11.3928571,21.6 L14.3681591,18.5706017 C13.273867,17.6916019 12.5714286,16.3293241 12.5714286,14.8 C12.5714286,12.1490332 14.6820862,10 17.2857143,10 C19.8893424,10 22,12.1490332 22,14.8 C22,17.4509668 19.8893424,19.6 17.2857143,19.6 C16.1841009,19.6 15.1707389,19.215281 14.3681591,18.5706017 Z"
+ id="icon-svg"
+ />
+ </g>
+ </svg>
+ <input
+ name="q"
+ className="elastic-search-input__inner"
+ type="search"
+ placeholder={tt('g.search')}
+ />
+ <button
+ className="input-group-button"
+ href="/static/search.html"
+ type="submit"
+ title={tt('g.search')}
+ />
+ </form>
+ </span>
+ );
+};
+
+export default ElasticSearchInput;
diff --git a/src/app/components/elements/ElasticSearchInput/styles.scss b/src/app/components/elements/ElasticSearchInput/styles.scss
new file mode 100644
index 000000000..cd40bbc94
--- /dev/null
+++ b/src/app/components/elements/ElasticSearchInput/styles.scss
@@ -0,0 +1,68 @@
+form.elastic-search-input {
+
+ height: 42px;
+
+ svg.elastic-search-input__icon {
+ position: absolute;
+ pointer-events: none;
+ @include themify($themes) {
+ stroke: themed('colorAccentReverse');
+ }
+ stroke-width: 1.2;
+ fill: none;
+
+ }
+
+ input.elastic-search-input__inner {
+ outline: none;
+ padding: 9px 10px 9px 32px;
+ width: 55px;
+ border-radius: 25pc;
+ transition: all 0.3s ease-in-out;
+ font-size: 16px;
+ background: transparent;
+ box-shadow: none;
+ width: 42px;
+ height: 42px;
+ color: transparent;
+ cursor: pointer;
+ transition: all 0.3s ease-in-out;
+ font-family: $font-primary;
+ @include themify($themes) {
+ border: 1px solid rgba(202, 202, 202, 0.6);
+ }
+ &::placeholder {
+ color: transparent
+ }
+ &:hover {
+ background-color: $color-teal;
+ }
+ &:focus {
+ width: 180px;
+ background-color: $color-white;
+ @include themify($themes) {
+ border: themed('moduleBackgroundColor');
+ }
+ border-color: $color-teal;
+ box-shadow: 0 0 5px rgba(109,207,246,.5);
+ width: 180px;
+ padding-left: 2.5rem;
+ @include themify($themes) {
+ color: themed('textColorPrimary');
+ }
+ background-color: transparent;
+ cursor: auto;
+ &::placeholder {
+ color: $color-blue-dark;
+ @include themify($themes) {
+ color: themed('textColorSecondary');
+ }
+ }
+ }
+ }
+
+ /* small */
+ input.elastic-search-input__inner.elastic-search-input__inner--small {
+
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/modules/Header/index.jsx b/src/app/components/modules/Header/index.jsx
index a0816ff9c..8f1ca3f42 100644
--- a/src/app/components/modules/Header/index.jsx
+++ b/src/app/components/modules/Header/index.jsx
@@ -11,6 +11,7 @@ import tt from 'counterpart';
import { APP_NAME } from 'app/client_config';
import SortOrder from 'app/components/elements/SortOrder';
import SearchInput from 'app/components/elements/SearchInput';
+import ElasticSearchInput from 'app/components/elements/ElasticSearchInput';
import IconButton from 'app/components/elements/IconButton';
import DropdownMenu from 'app/components/elements/DropdownMenu';
import * as userActions from 'app/redux/UserReducer';
@@ -327,6 +328,7 @@ class Header extends React.Component {
{/*CUSTOM SEARCH*/}
<span className="Header__search--desktop">
<SearchInput />
+ <ElasticSearchInput />
</span>
<span className="Header__search">
<a href="/static/search.html">
--
GitLab