yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-19 06:28:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style : Changing App-bar Layout. (#1534)

Browse Source 
* Style : Changing Appbar Layout.

* Removed Scrollbar

* Addressing review comments.

* minor style tweaks.
This commit is contained in:
Sachin Chaurasiya 2021-12-03 20:51:38 +05:30 committed by GitHub
parent a094f1d5f8
commit 181e95414d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 127 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 775 B

76
openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
View File

@ -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&#39;s new</span>
{/* <span>What&#39;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>

2
openmetadata-ui/src/main/resources/ui/src/components/app-bar/Suggestions.tsx
View File

@ -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()}

4
openmetadata-ui/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx
View File

@ -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>
) : (

9
openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx
View File

@ -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>

3
openmetadata-ui/src/main/resources/ui/src/components/dropdown/types.ts
View File

@ -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;

19
openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
View File

@ -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;

6
openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
View File

@ -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: