Skip to content

Commit

Permalink
Fix: styling on searchbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ernzher
ernzher committed Apr 11, 2023
1 parent b04f4a3 commit 7c1f269
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 161 deletions.
10 changes: 5 additions & 5 deletions src/Tools/_framework/Paths/Community.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
Text,
Wrap,
} from '@chakra-ui/react';
import { useLoaderData, useOutletContext } from 'react-router';
import { useLoaderData } from 'react-router';
import styled from 'styled-components';
import { Carousel } from '../../../_reactComponents/PanelHeaderComponents/Carousel';
import Searchbar from '../../../_reactComponents/PanelHeaderComponents/SearchBar';
Expand Down Expand Up @@ -171,13 +171,13 @@ const SearchBarContainer = styled.div`
const SearchBarSection = styled.div`
display: flex;
flex-direction: column;
padding: 10px 10px 10px 10px;
margin: 0px;
padding: 10px;
margin-top: 2rem;
justify-content: center;
align-items: center;
text-align: center;
background: var(--lightBlue);
height: 60px;
/* background: var(--lightBlue); */
/* height: 60px; */
`;
const CarouselSection = styled.div`
display: flex;
Expand Down
309 changes: 153 additions & 156 deletions src/_reactComponents/PanelHeaderComponents/SearchBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
// import styled from 'styled-components';
import { Icon, Button, Input, InputGroup, InputLeftElement, InputRightAddon } from '@chakra-ui/react';
import { IoSearchSharp } from "react-icons/io5";

export default function Searchbar({
name='q',
defaultValue,
}) {

import React from 'react';
import {
Icon,
Button,
Input,
InputGroup,
InputLeftElement,
InputRightAddon,
} from '@chakra-ui/react';
import { IoSearchSharp } from 'react-icons/io5';

export default function Searchbar({ name = 'q', defaultValue }) {
return (
<>
<InputGroup borderRadius={5} size="sm">
<InputLeftElement
pointerEvents="none"
children={<Icon as={IoSearchSharp} color="gray.600" />}
/>
<Input
type="text"
placeholder="Search..."
border="1px solid #949494"
name={name}
defaultValue={defaultValue}
<InputGroup borderLeftRadius={5} size="sm">
<InputLeftElement pointerEvents="none">
<Icon as={IoSearchSharp} color="gray.600" />
</InputLeftElement>
<Input
type="text"
placeholder="Search..."
border="1px solid #949494"
borderLeftRadius={5}
name={name}
defaultValue={defaultValue}
/>
<InputRightAddon
p={0}
border="1px solid #949494"
borderLeft="none"
border="none"
borderLeftRadius={0}
borderRightRadius={3.3}
borderRightRadius={5}
>
<Button
type="submit"
size="sm"
borderLeftRadius={0}
borderRightRadius={3.3}
<Button
type="submit"
size="sm"
borderLeftRadius={0}
borderRightRadius={5}
border="1px solid #949494"
bg="doenet.mainBlue"
>
Search
</Button>
</InputRightAddon>
</InputGroup>
</>
);
};
}

// const SearchBar = styled.input `
// margin: 0px -${props => props.inputWidth}px 0px 0px;
Expand All @@ -64,7 +64,6 @@ export default function Searchbar({
// }
// `;


// const CancelButton = styled.button `
// float: right;
// margin: 6px 0px 0px ${props => props.marginLeft}px;
Expand Down Expand Up @@ -110,7 +109,7 @@ export default function Searchbar({

// const Label = styled.p `
// font-size: 14px;
// display: ${props => props.labelVisible};
// display: ${props => props.labelVisible};
// margin: 0px 5px 2px 0px;
// `;

Expand All @@ -120,142 +119,140 @@ export default function Searchbar({
// align-items: center;
// `;

// const [searchTerm, setSearchTerm] = useState('');
// const [cancelShown, setCancelShown] = useState('hidden');
// const labelVisible = props.label ? 'static' : 'none';
// const align = props.vertical ? 'static' : 'flex';
// // const [inputWidth, setInputWidth] = useState('0px');
// const [marginLeft, setMarginLeft] = useState(props.noSearchButton ? 80 : 26);
// const alert = props.alert ? props.alert : null;

// const [searchTerm, setSearchTerm] = useState('');
// const [cancelShown, setCancelShown] = useState('hidden');
// const labelVisible = props.label ? 'static' : 'none';
// const align = props.vertical ? 'static' : 'flex';
// // const [inputWidth, setInputWidth] = useState('0px');
// const [marginLeft, setMarginLeft] = useState(props.noSearchButton ? 80 : 26);
// const alert = props.alert ? props.alert : null;
// const searchBarRef = useRef(0)
// useEffect(()=>{
// if(searchBarRef) {
// let searchBar = document.querySelector('#searchbar');
// let inputWidth = searchBar.clientWidth;
// setTimeout(function() { setMarginLeft(inputWidth - (props.noSearchButton ? 23 : 77) - (props.width ? 90 : 0)); }, 1000);
// // console.log((240 - buttonWidth) + 'px');

// const searchBarRef = useRef(0)
// useEffect(()=>{
// if(searchBarRef) {
// let searchBar = document.querySelector('#searchbar');
// let inputWidth = searchBar.clientWidth;
// setTimeout(function() { setMarginLeft(inputWidth - (props.noSearchButton ? 23 : 77) - (props.width ? 90 : 0)); }, 1000);
// // console.log((240 - buttonWidth) + 'px');
// }

// }
// },[searchBarRef,props])

// },[searchBarRef,props])
// var searchIcon = {
// margin: '6px 0px 0px 6px',
// position: 'absolute',
// zIndex: '1',
// color: 'var(--canvastext)',
// overflow: 'hidden'
// };

// var searchIcon = {
// margin: '6px 0px 0px 6px',
// position: 'absolute',
// zIndex: '1',
// color: 'var(--canvastext)',
// overflow: 'hidden'
// };
// var disable = "";
// if (props.disabled) {
// disable = "disabled";
// };

// var disable = "";
// if (props.disabled) {
// disable = "disabled";
// };
// var searchButton =
// <SubmitButton
// disabled={disable}
// alert={alert}
// onClick={searchSubmitAction}>
// Search
// </SubmitButton>

// var searchButton =
// <SubmitButton
// disabled={disable}
// alert={alert}
// onClick={searchSubmitAction}>
// Search
// </SubmitButton>
// var width = "";
// if (props.width) {
// width = props.width;
// };

// var width = "";
// if (props.width) {
// width = props.width;
// };
// if (props.noSearchButton) {
// searchButton = '';
// };

// if (props.noSearchButton) {
// searchButton = '';
// };
// var placeholder = "Search...";
// if (props.placeholder) {
// placeholder = props.placeholder;
// };

// var placeholder = "Search...";
// if (props.placeholder) {
// placeholder = props.placeholder;
// };
// var label = "";
// if (props.label) {
// label = props.label;
// };

// var label = "";
// if (props.label) {
// label = props.label;
// };
// let autoFocus = false;
// if (props.autoFocus) {
// autoFocus = true;
// };

// let autoFocus = false;
// if (props.autoFocus) {
// autoFocus = true;
// };

// function clearInput() {
// setSearchTerm('');
// setCancelShown('hidden')
// if (props.onChange){
// props.onChange('');
// }
// };
// function clearInput() {
// setSearchTerm('');
// setCancelShown('hidden')
// if (props.onChange){
// props.onChange('');
// }
// };

// function onChange(e) {
// let val = e.target.value;
// setSearchTerm(val);
// if (val === ""){
// setCancelShown('hidden')
// } else {
// setCancelShown('visible')
// }
// if (props.onChange){
// props.onChange(val);
// }
// };
// function onChange(e) {
// let val = e.target.value;
// setSearchTerm(val);
// if (val === ""){
// setCancelShown('hidden')
// } else {
// setCancelShown('visible')
// }
// if (props.onChange){
// props.onChange(val);
// }
// };

// function handleBlur(e) {
// if (props.onBlur) props.onBlur(e)
// };
// function handleBlur(e) {
// if (props.onBlur) props.onBlur(e)
// };

// function handleKeyDown(e) {
// if (props.onKeyDown) props.onKeyDown(e)
// };
// function handleKeyDown(e) {
// if (props.onKeyDown) props.onKeyDown(e)
// };

// function searchSubmitAction() {
// if (props.onSubmit){
// props.onSubmit(searchTerm);
// }
// };
// function searchSubmitAction() {
// if (props.onSubmit){
// props.onSubmit(searchTerm);
// }
// };

// return (
// <Container align={align} width={width}>
// <Label id="search-label" labelVisible={labelVisible} align={align}>{label}</Label>
// <div style={{display: "table-cell"}} >
// <FontAwesomeIcon icon={faSearch} style={searchIcon}/>
// <CancelButton
// aria-label="Clear"
// ref={searchBarRef}
// cancelShown={cancelShown}
// marginLeft={marginLeft}
// // cancelLeftMargin={cancelLeftMargin}
// onClick={() => { clearInput() }} >
// <FontAwesomeIcon icon={faTimes}/>
// </CancelButton>
// <SearchBar
// id="searchbar"
// type="text"
// width={width}
// noSearchButton={props.noSearchButton}
// placeholder={placeholder}
// onChange={onChange}
// onBlur={(e) => { handleBlur(e) }}
// onKeyDownCapture={(e) => { handleKeyDown(e) }}
// disabled={disable}
// alert={alert}
// value={searchTerm}
// onKeyDown={(e)=>{if (e.key === 'Enter' || e.key === "Spacebar" || e.key === " "){searchSubmitAction()}}}
// autoFocus={autoFocus}
// aria-labelledby="search-label"
// aria-disabled={props.disabled ? true : false}
// />
// <div style={{padding: '3px', display:'inline'}}></div>
// {searchButton}
// </div>
// </Container>
// )
// export const SearchBar = () => {

// return (
// <Container align={align} width={width}>
// <Label id="search-label" labelVisible={labelVisible} align={align}>{label}</Label>
// <div style={{display: "table-cell"}} >
// <FontAwesomeIcon icon={faSearch} style={searchIcon}/>
// <CancelButton
// aria-label="Clear"
// ref={searchBarRef}
// cancelShown={cancelShown}
// marginLeft={marginLeft}
// // cancelLeftMargin={cancelLeftMargin}
// onClick={() => { clearInput() }} >
// <FontAwesomeIcon icon={faTimes}/>
// </CancelButton>
// <SearchBar
// id="searchbar"
// type="text"
// width={width}
// noSearchButton={props.noSearchButton}
// placeholder={placeholder}
// onChange={onChange}
// onBlur={(e) => { handleBlur(e) }}
// onKeyDownCapture={(e) => { handleKeyDown(e) }}
// disabled={disable}
// alert={alert}
// value={searchTerm}
// onKeyDown={(e)=>{if (e.key === 'Enter' || e.key === "Spacebar" || e.key === " "){searchSubmitAction()}}}
// autoFocus={autoFocus}
// aria-labelledby="search-label"
// aria-disabled={props.disabled ? true : false}
// />
// <div style={{padding: '3px', display:'inline'}}></div>
// {searchButton}
// </div>
// </Container>
// )
// export const SearchBar = () => {

0 comments on commit 7c1f269

Please sign in to comment.