mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-08-18 22:18:23 +00:00
Style : Changing App-bar Layout. (#1534)
* Style : Changing Appbar Layout. * Removed Scrollbar * Addressing review comments. * minor style tweaks.
This commit is contained in:
Sachin Chaurasiya
GitHub
parent
a094f1d5f8
commit
181e95414d
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="15" viewBox="0 0 14 15" fill="#37352F" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.8086 12.1051L11.0824 9.37891C10.9594 9.25586 10.7926 9.1875 10.6176 9.1875H10.1719C10.9266 8.22227 11.375 7.0082 11.375 5.6875C11.375 2.5457 8.8293 0 5.6875 0C2.5457 0 0 2.5457 0 5.6875C0 8.8293 2.5457 11.375 5.6875 11.375C7.0082 11.375 8.22227 10.9266 9.1875 10.1719V10.6176C9.1875 10.7926 9.25586 10.9594 9.37891 11.0824L12.1051 13.8086C12.3621 14.0656 12.7777 14.0656 13.032 13.8086L13.8059 13.0348C14.0629 12.7777 14.0629 12.3621 13.8086 12.1051ZM5.6875 9.1875C3.7543 9.1875 2.1875 7.62344 2.1875 5.6875C2.1875 3.7543 3.75156 2.1875 5.6875 2.1875C7.6207 2.1875 9.1875 3.75156 9.1875 5.6875C9.1875 7.6207 7.62344 9.1875 5.6875 9.1875Z" fill="#37352F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 775 B |
@ -131,7 +131,8 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
|
||||
return (
|
||||
<span data-testid="greeting-text">
|
||||
Welcome, <span className="tw-font-medium">{name?.split(' ')[0]}</span>
|
||||
<span className="tw-font-medium">{name}</span>
|
||||
<hr className="tw--mr-2 tw--ml-2 tw-mt-1.5" />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@ -165,7 +166,7 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
{isAuthenticatedRoute && isSignedIn ? (
|
||||
<div className="tw-h-14 tw-py-2 tw-px-5 tw-border-b-2 tw-border-separator">
|
||||
<div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
|
||||
<div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap tw-mr-auto">
|
||||
<div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
|
||||
<NavLink id="openmetadata_logo" to="/">
|
||||
<SVGIcons
|
||||
alt="OpenMetadata Logo"
|
||||
@ -173,15 +174,38 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
width="30"
|
||||
/>
|
||||
</NavLink>
|
||||
<div className="tw-ml-7">
|
||||
<NavLink
|
||||
className="tw-nav focus:tw-no-underline"
|
||||
data-testid="appbar-item"
|
||||
id="explore"
|
||||
style={navStyle(location.pathname.startsWith('/explore'))}
|
||||
to={{
|
||||
pathname: '/explore',
|
||||
}}>
|
||||
Explore
|
||||
</NavLink>
|
||||
<DropDown
|
||||
dropDownList={navLinkSettings}
|
||||
label="Settings"
|
||||
type="link"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="tw-flex-none tw-relative tw-pl-5 "
|
||||
className="tw-flex-none tw-relative tw-justify-items-center tw-ml-auto"
|
||||
data-testid="appbar-item">
|
||||
<span className="fa fa-search tw-absolute tw-block tw-z-10 tw-w-9 tw-h-8 tw-leading-8 tw-text-center tw-pointer-events-none tw-text-gray-400" />
|
||||
<SVGIcons
|
||||
alt="icon-search"
|
||||
className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-right-2.5 tw-top-2 tw-leading-8 tw-text-center tw-pointer-events-none"
|
||||
icon="icon-searchv1"
|
||||
/>
|
||||
<input
|
||||
autoComplete="off"
|
||||
className="tw-relative search-grey tw-rounded tw-border tw-border-main tw-bg-body-main focus:tw-outline-none tw-pl-8 tw-py-1 tw-form-inputs"
|
||||
className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-py-1 tw-form-inputs"
|
||||
data-testid="searchBox"
|
||||
id="searchBox"
|
||||
placeholder="Search for Table, Topics, Dashboards and Pipeline"
|
||||
type="text"
|
||||
value={searchValue || ''}
|
||||
onChange={(e) => {
|
||||
@ -223,24 +247,7 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="tw-ml-9">
|
||||
<NavLink
|
||||
className="tw-nav focus:tw-no-underline"
|
||||
data-testid="appbar-item"
|
||||
id="explore"
|
||||
style={navStyle(location.pathname.startsWith('/explore'))}
|
||||
to={{
|
||||
pathname: '/explore',
|
||||
}}>
|
||||
Explore
|
||||
</NavLink>
|
||||
<DropDown
|
||||
dropDownList={navLinkSettings}
|
||||
label="Settings"
|
||||
type="link"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw-flex tw-ml-auto">
|
||||
<button
|
||||
className="tw-nav focus:tw-no-underline hover:tw-underline"
|
||||
data-testid="whatsnew-modal"
|
||||
@ -251,7 +258,7 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
icon={Icons.WHATS_NEW}
|
||||
width="16"
|
||||
/>
|
||||
<span>What's new</span>
|
||||
{/* <span>What's new</span> */}
|
||||
</button>
|
||||
{/* <NavLink
|
||||
className="tw-nav focus:tw-no-underline hover:tw-underline"
|
||||
@ -279,24 +286,38 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
width="16"
|
||||
/>
|
||||
}
|
||||
label="Need Help"
|
||||
isDropDownIconVisible={false}
|
||||
// label="Need Help"
|
||||
type="link"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div data-testid="dropdown-profile">
|
||||
<DropDown
|
||||
dropDownList={[
|
||||
{
|
||||
name: (
|
||||
<p className="tw-flex tw-flex-col">
|
||||
<span>Signed in as</span>
|
||||
{getUserDisplayName()}
|
||||
</p>
|
||||
),
|
||||
to: '',
|
||||
disabled: false,
|
||||
icon: <></>,
|
||||
isText: true,
|
||||
},
|
||||
{
|
||||
name: (
|
||||
<span className="tw-text-grey-muted tw-cursor-text tw-text-xs">
|
||||
{`Version ${(version ? version : '?').split('-')[0]}`}
|
||||
<hr className="tw--mr-12 tw--ml-2 tw-mt-1.5" />
|
||||
<hr className="tw--mr-2 tw--ml-2 tw-mt-2" />
|
||||
</span>
|
||||
),
|
||||
to: '',
|
||||
disabled: false,
|
||||
icon: <></>,
|
||||
isVersion: true,
|
||||
isText: true,
|
||||
},
|
||||
{
|
||||
name: 'Logout',
|
||||
@ -326,7 +347,6 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
)}
|
||||
</>
|
||||
}
|
||||
label={getUserDisplayName()}
|
||||
type="link"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -302,7 +302,7 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
|
||||
aria-labelledby="menu-button"
|
||||
aria-orientation="vertical"
|
||||
className="tw-origin-top-right tw-absolute tw-z-10
|
||||
tw-w-60 tw-mt-1 tw-rounded-md tw-shadow-lg
|
||||
tw-w-full tw-mt-1 tw-rounded-md tw-shadow-lg
|
||||
tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none"
|
||||
role="menu">
|
||||
{getEntitiesSuggestions()}
|
||||
|
||||
@ -34,8 +34,8 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
|
||||
<div className="py-1" role="none">
|
||||
{dropDownList.map((item: DropDownListItem, index: number) => (
|
||||
<div key={index}>
|
||||
{item.isVersion ? (
|
||||
<div className="tw-px-2 tw-py-2 tw-font-normal">
|
||||
{item.isText ? (
|
||||
<div className="tw-px-2 tw-py-1 tw-font-normal">
|
||||
{item.name}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -26,6 +26,7 @@ const DropDown: React.FC<DropDownProp> = ({
|
||||
dropDownList,
|
||||
onSelect,
|
||||
selectedItems,
|
||||
isDropDownIconVisible = true,
|
||||
}: DropDownProp) => {
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
|
||||
@ -63,7 +64,7 @@ const DropDown: React.FC<DropDownProp> = ({
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
className={`tw-inline-flex tw-px-4 tw-py-2 focus:tw-outline-none ${
|
||||
className={`tw-inline-flex tw-px-2 tw-py-2 focus:tw-outline-none ${
|
||||
type === DropDownType.CHECKBOX
|
||||
? `tw-rounded tw-text-body tw-text-gray-400 tw-border tw-border-main focus:tw-border-gray-500 tw-w-full`
|
||||
: `tw-justify-center tw-nav`
|
||||
@ -107,7 +108,11 @@ const DropDown: React.FC<DropDownProp> = ({
|
||||
</p>
|
||||
)}
|
||||
|
||||
<DropdownIcon style={{ marginTop: '1px', color: normalLink }} />
|
||||
{isDropDownIconVisible ? (
|
||||
<DropdownIcon
|
||||
style={{ marginTop: '1px', color: normalLink }}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
@ -28,7 +28,7 @@ export type DropDownListItem = {
|
||||
method?: () => void;
|
||||
icon?: React.ReactElement;
|
||||
isOpenNewTab?: boolean;
|
||||
isVersion?: boolean;
|
||||
isText?: boolean;
|
||||
} & Record<
|
||||
string,
|
||||
string | number | boolean | undefined | Function | React.ReactElement
|
||||
@ -58,4 +58,5 @@ export type DropDownProp = {
|
||||
label?: string | React.ReactElement;
|
||||
type: string;
|
||||
icon?: React.ReactElement | string;
|
||||
isDropDownIconVisible?: boolean;
|
||||
} & DropDownListProp;
|
||||
|
||||
@ -164,8 +164,7 @@ a:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.search-grey {
|
||||
width: calc(300px - 60px);
|
||||
min-width: 150px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.search-grey.has-search {
|
||||
@ -755,27 +754,19 @@ body .profiler-graph .recharts-active-dot circle {
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
/* #center::-webkit-scrollbar,
|
||||
#center::-webkit-scrollbar,
|
||||
#left-panel::-webkit-scrollbar,
|
||||
#right-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 4px;
|
||||
} */
|
||||
/* #center::-webkit-scrollbar-track {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
#center::-webkit-scrollbar-thumb {
|
||||
background: #aaa;
|
||||
border-radius: 12px;
|
||||
} */
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
/* #center,
|
||||
#center,
|
||||
#left-panel,
|
||||
#right-panel {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: 4px;
|
||||
} */
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.page-layout-container {
|
||||
display: grid;
|
||||
|
||||
@ -75,6 +75,7 @@ import IconPipeline from '../assets/svg/pipeline.svg';
|
||||
import IconPlus from '../assets/svg/plus.svg';
|
||||
import IconProfiler from '../assets/svg/profiler.svg';
|
||||
import IconHelpCircle from '../assets/svg/question-circle.svg';
|
||||
import IconSearchV1 from '../assets/svg/search.svg';
|
||||
import IconSetting from '../assets/svg/service.svg';
|
||||
import IconSlackGrey from '../assets/svg/slack-grey.svg';
|
||||
import IconSlack from '../assets/svg/slack.svg';
|
||||
@ -175,6 +176,7 @@ export const Icons = {
|
||||
ICON_MINUS: 'icon-minus',
|
||||
TAG: 'icon-tag',
|
||||
TIER: 'icon-tier',
|
||||
SEARCHV1: 'icon-searchv1',
|
||||
};
|
||||
|
||||
const SVGIcons: FunctionComponent<Props> = ({
|
||||
@ -496,6 +498,10 @@ const SVGIcons: FunctionComponent<Props> = ({
|
||||
case Icons.TIER:
|
||||
IconComponent = IconTier;
|
||||
|
||||
break;
|
||||
case Icons.SEARCHV1:
|
||||
IconComponent = IconSearchV1;
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user