Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/406077 )
Change subject: WIP: Update: add search box UI
......................................................................
WIP: Update: add search box UI
Refactor the Header component to use the Grid and add a search box.
Change-Id: I684392b9df09c1f798ca79d45d4040b68a1bd9fa
---
M package.json
M src/client/index.css
M src/common/components/header/header.css
M src/common/components/header/header.tsx
M src/common/components/icon/icon.tsx
A src/common/components/search-input/search-input.css
A src/common/components/search-input/search-input.tsx
7 files changed, 97 insertions(+), 30 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/77/406077/1
diff --git a/package.json b/package.json
index 6f16817..a459c43 100644
--- a/package.json
+++ b/package.json
@@ -111,11 +111,11 @@
"bundlesize": [
{
"path": "dist/public/index.*.js",
- "maxSize": "4.1KB"
+ "maxSize": "4.8KB"
},
{
"path": "dist/public/index.*.css",
- "maxSize": "5.8KB"
+ "maxSize": "5.9KB"
},
{
"path": "dist/public/runtime.*.js",
diff --git a/src/client/index.css b/src/client/index.css
index 7a71189..1743b98 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -36,6 +36,7 @@
/* TODO: Upstream to wikimedia-ui-base once reviewed by design */
--space: 16px;
+ --quarter-space: calc(var(--space) / 4);
--half-space: calc(var(--space) / 2);
--double-space: calc(var(--space) * 2);
diff --git a/src/common/components/header/header.css
b/src/common/components/header/header.css
index 1b925e3..8b80431 100644
--- a/src/common/components/header/header.css
+++ b/src/common/components/header/header.css
@@ -1,31 +1,21 @@
.Header {
- /* Header height set by design spec */
- height: 60px;
+ /* Header height set by design spec (but don't limit height when wrapping).
*/
+ min-height: 60px;
- /* Evenly space out placeholders and vertically align them */
- display: flex;
- justify-content: space-between;
+ /* Center items vertically. */
align-items: center;
- /* Spacing */
- padding: 0 var(--space);
+ /* The gutter is a half space. The top and bottom margins are also a half
+ space but must be broken up between container and children so that
wrapping
+ items don't have a double margin. */
+ margin: var(--quarter-space) var(--half-space);
}
-/* Vertically align placeholder's contents too */
.Header-left,
-.Header-right,
-.Header-center {
- display: flex;
- align-items: center;
-}
-
-.Header-left > * {
- /* Contained items on the left part are spaced to the right */
- margin-right: var(--space);
-}
-.Header-right > * {
- /* Contained items on the right part are spaced to the left */
- margin-left: var(--space);
+.Header-right {
+ /* When items are stacked or layout horizontally, they have a cumulative
+ margin of a half space. */
+ margin: var(--quarter-space) 0;
}
.Header-wordmark {
diff --git a/src/common/components/header/header.tsx
b/src/common/components/header/header.tsx
index e0148f5..7b3b790 100644
--- a/src/common/components/header/header.tsx
+++ b/src/common/components/header/header.tsx
@@ -1,21 +1,25 @@
import { h } from "preact";
+import { SearchInput } from "../search-input/search-input";
import Wordmark from "../wordmark/wordmark";
import Link from "../link/link";
import { ClassProps, classOf } from "../preact-utils";
import { home } from "../../router/routes";
import "./header.css";
+import { Grid, Size } from "../grid/grid";
export default function Header(props: ClassProps): JSX.Element {
return (
- <div class={classOf("Header", props.class)}>
- <div class="Header-left">
+ <Grid class={classOf("Header", props.class)} size={Size.MEDIUM}>
+ <div class="Header-left Grid-medium-span2 Grid-large-span2">
<Link href={home.toPath()} class="Header-wordmark">
<Wordmark />
</Link>
</div>
{/* The center placeholder will be used later for desktop sizes */}
- <div class="Header-center" />
- <div class="Header-right" />
- </div>
+ <div className="Header-center" />
+ <div className="Header-right Grid-column-grow">
+ <SearchInput />
+ </div>
+ </Grid>
);
}
diff --git a/src/common/components/icon/icon.tsx
b/src/common/components/icon/icon.tsx
index 4d7492a..c58d4c0 100644
--- a/src/common/components/icon/icon.tsx
+++ b/src/common/components/icon/icon.tsx
@@ -1,4 +1,5 @@
import { h } from "preact";
+import { ClassProps, classOf } from "../preact-utils";
import menu from "./icons/menu.svg";
import search from "./icons/search.svg";
import "./icon.css";
@@ -9,6 +10,14 @@
export { menu, search };
-export default function Icon({ svg }: Props): JSX.Element {
- return <div class="Icon" dangerouslySetInnerHTML={{ __html: svg }} />;
+export default function Icon({
+ svg,
+ ...props
+}: Props & ClassProps): JSX.Element {
+ return (
+ <div
+ class={classOf("Icon", props.class)}
+ dangerouslySetInnerHTML={{ __html: svg }}
+ />
+ );
}
diff --git a/src/common/components/search-input/search-input.css
b/src/common/components/search-input/search-input.css
new file mode 100644
index 0000000..aacca0c
--- /dev/null
+++ b/src/common/components/search-input/search-input.css
@@ -0,0 +1,48 @@
+.SearchInput {
+ /* Set the layout to flex to allow the input to grow. */
+ display: flex;
+}
+
+.SearchInput-input {
+ /* Button and input border width and padding are identical. */
+ border: var(--border-width-base) solid var(--wmui-color-base70);
+ border-radius: var(--border-radius-base);
+ padding: var(--quarter-space);
+
+ /* Allow the input to flex between 10 and 30rem. */
+ flex: 1;
+ width: 100%;
+ min-width: 10rem;
+ max-width: 25rem;
+
+ /* Align the input and button to the right. */
+ margin-left: auto;
+
+ /* Add a small space between the input and button. */
+ margin-right: var(--quarter-space);
+
+ background-color: var(--background-color-base);
+}
+
+.SearchInput-button {
+ /* Button and input border width and padding are identical. */
+ border: var(--border-width-base) solid transparent;
+ border-radius: var(--border-radius-base);
+ padding: var(--quarter-space);
+
+ /* Make the button a little wider. */
+ min-width: 2.5rem;
+
+ background-color: var(--wmui-color-accent50);
+}
+
+.SearchInput-icon {
+ /* Approximate the search icon to the apparent center of mass. */
+ vertical-align: top;
+
+ /* todo: */
+ margin-top: 3px;
+
+ /* Change the icon from grey to white. */
+ filter: brightness(0) invert(1);
+}
diff --git a/src/common/components/search-input/search-input.tsx
b/src/common/components/search-input/search-input.tsx
new file mode 100644
index 0000000..61de013
--- /dev/null
+++ b/src/common/components/search-input/search-input.tsx
@@ -0,0 +1,15 @@
+import { h } from "preact";
+import Icon, { search } from "../icon/icon";
+import "./search-input.css";
+
+export function SearchInput() {
+ const autofocus = undefined;
+ return (
+ <div class="SearchInput">
+ <input class="SearchInput-input" autofocus={autofocus} />
+ <button class="SearchInput-button">
+ <Icon class="SearchInput-icon" svg={search} />
+ </button>
+ </div>
+ );
+}
--
To view, visit https://gerrit.wikimedia.org/r/406077
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I684392b9df09c1f798ca79d45d4040b68a1bd9fa
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <sniedziel...@wikimedia.org>
Gerrit-Reviewer: Sniedzielski <sniedziel...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
