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

Fix: #2643 0.8 UI Improvements (#2658)

Browse Source 
* Fix:  #2643 0.8 UI Improvements

* Aliging text to the top.

* Covering point 12th of #2643
This commit is contained in:
Sachin Chaurasiya 2022-02-08 16:49:38 +05:30 committed by GitHub
parent 70128ecc53
commit 99a61fa774
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg
View File

@ -1,3 +1,3 @@
<svg width="14" height="15" viewBox="0 0 14 15" fill="#6B7280" 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="#6B7280"/>
<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 Swipe Overlay

Before

Width:  |  Height:  |  Size: 775 B

After

Width:  |  Height:  |  Size: 775 B

6
openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx
View File

@ -172,7 +172,7 @@ const EntityInfoDrawer = ({
</svg>
</div>
</header>
<hr className="tw-mt-3 tw-border-primary-hover-lite" />
<hr className="tw-mt-3 tw-border-separator" />
{isLoading ? (
<Loader />
) : (
@ -209,7 +209,7 @@ const EntityInfoDrawer = ({
})}
</div>
</section>
<hr className="tw-mt-3 tw-border-primary-hover-lite" />
<hr className="tw-mt-3 tw-border-separator" />
<section className="tw-mt-1">
<span className="tw-text-grey-muted">Tags</span>
<div className="tw-flex tw-flex-wrap tw-pt-1.5">
@ -222,7 +222,7 @@ const EntityInfoDrawer = ({
)}
</div>
</section>
<hr className="tw-mt-3 tw-border-primary-hover-lite" />
<hr className="tw-mt-3 tw-border-separator" />
<section className="tw-mt-1">
<span className="tw-text-grey-muted">Description</span>
<div>

3
openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.css
View File

@ -19,12 +19,11 @@
right: 0;
width: 325px;
z-index: 200;
margin-right: -16px;
overflow-y: auto;
padding: 16px;
transform: translateX(100%);
display: none;
border-left: 1px solid #d9ceee;
border-left: 1px solid #dce3ec;
transition: transform 0.3s ease-out;
}

7
openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
View File

@ -624,7 +624,10 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
return (
<Fragment>
{!deleted ? (
<div className="tw-relative tw-h-full tw--mx-4 tw--mt-4">
<div
className={classNames(
'tw-relative tw-h-full tw--ml-4 tw--mr-7 tw--mt-4'
)}>
<div className="tw-w-full tw-h-full" ref={reactFlowWrapper}>
<ReactFlowProvider>
<ReactFlow
@ -660,7 +663,7 @@ const Entitylineage: FunctionComponent<EntityLineageProp> = ({
onNodeMouseLeave={onNodeMouseLeave}
onNodeMouseMove={onNodeMouseMove}>
<CustomControls
className="tw-absolute tw-top-1 tw-right-1 tw-bottom-full tw-ml-4 tw-mt-4"
className="tw-absolute tw-top-1 tw-right-3 tw-bottom-full tw-ml-4 tw-mt-4"
fitViewParams={{ minZoom: 0.5, maxZoom: 2.5 }}>
{!deleted && (
<NonAdminAction

6
openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
View File

@ -344,7 +344,7 @@ const EntityTable = ({
return (
<td
className={classNames(
'tableBody-cell tw-group tw-relative'
'tableBody-cell tw-group tw-relative tw-align-baseline'
)}
key={index}
{...cell.getCellProps()}>
@ -353,7 +353,7 @@ const EntityTable = ({
{...row.getToggleRowExpandedProps({})}
className="tw-mr-2 tw-cursor-pointer"
style={{
marginLeft: `${row.depth * 25}px`,
marginLeft: `${row.depth * 35}px`,
}}>
{row.isExpanded ? (
<i className="fas fa-caret-down" />
@ -614,7 +614,7 @@ const EntityTable = ({
<span
style={{
paddingLeft: `${
row.canExpand ? '0px' : `${row.depth * 25}px`
row.canExpand ? '0px' : `${row.depth * 35}px`
}`,
}}>
{getConstraintIcon(row.original.constraint)}

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

@ -126,7 +126,14 @@ const EntityVersionTimeLine: React.FC<Props> = ({
</span>
) : null}
</p>
<div className="tw-text-xs tw-font-normal tw-break-all">
<div
className={classNames(
'tw-text-xs tw-font-normal tw-break-all',
{
'diff-description':
toString(currV?.version) === currentVersion,
}
)}>
{getSummary(currV?.changeDescription)}
</div>
<p className="tw-text-xs tw-italic">

12
openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
View File

@ -61,7 +61,6 @@ import { formatDataResponse } from '../../utils/APIUtils';
import { getCountBadge } from '../../utils/CommonUtils';
import { getFilterCount, getFilterString } from '../../utils/FilterUtils';
import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
import SVGIcons from '../../utils/SvgUtils';
import PageLayout from '../containers/PageLayout';
import { ExploreProps } from './explore.interface';
@ -317,7 +316,7 @@ const Explore: React.FC<ExploreProps> = ({
<span className="tw-mr-2">Sort by:</span>
<span className="tw-relative">
<Button
className="tw-underline"
className="hover:tw-no-underline focus:tw-no-underline"
data-testid="sortBy"
size="custom"
theme="primary"
@ -427,15 +426,6 @@ const Explore: React.FC<ExploreProps> = ({
onClick={() => {
onTabChange(tabDetail.tab);
}}>
<SVGIcons
alt="icon"
className="tw-h-4 tw-w-4 tw-mr-2"
icon={
tabDetail.tab === currentTab
? tabDetail.selectedIcon
: tabDetail.icon
}
/>
{tabDetail.label}
<span className="tw-pl-2">
{getTabCount(tabDetail.index, tabDetail.tab === currentTab)}

2
openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
View File

@ -66,7 +66,7 @@ const MyData: React.FC<MyDataProps> = ({
<Fragment>
<div className="tw-relative tw-mt-5">
<Button
className="tw-underline"
className="hover:tw-no-underline focus:tw-no-underline"
data-testid="feeds"
size="custom"
tag="button"

2
openmetadata-ui/src/main/resources/ui/src/components/SchemaTab/SchemaTab.component.tsx
View File

@ -54,7 +54,7 @@ const SchemaTab: FunctionComponent<Props> = ({
<Searchbar
placeholder="Find in table..."
searchValue={searchText}
typingInterval={1500}
typingInterval={500}
onSearch={handleSearchAction}
/>
</div>

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

@ -127,6 +127,14 @@ const Appbar: React.FC = (): JSX.Element => {
},
];
const getUserName = () => {
const currentUser = isAuthDisabled
? appState.users[0]
: appState.userDetails;
return currentUser?.displayName || currentUser?.name || 'User';
};
const getUserData = () => {
const currentUser = isAuthDisabled
? appState.users[0]
@ -244,6 +252,7 @@ const Appbar: React.FC = (): JSX.Element => {
searchValue={searchValue || ''}
settingDropdown={navLinkSettings}
supportDropdown={supportLinks}
username={getUserName()}
/>
) : null}
</>

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

@ -256,15 +256,15 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
{options.length > 0 && isOpen ? (
<>
<button
className="tw-z-10 tw-fixed tw-inset-0 tw-h-full tw-w-full tw-bg-black tw-opacity-0"
className="tw-z-10 tw-fixed tw-inset-0 tw-h-full tw-w-full tw-bg-black tw-opacity-0 "
onClick={() => setIsOpen(false)}
/>
<div
aria-labelledby="menu-button"
aria-orientation="vertical"
className="tw-origin-top-right tw-absolute tw-z-20
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"
tw-w-600 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 tw-ml-4"
role="menu">
{getEntitiesSuggestions()}
</div>

5
openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx
View File

@ -36,6 +36,7 @@ const Searchbar = ({
removeMargin = false,
}: Props) => {
const [userSearch, setUserSearch] = useState('');
const [searchIcon, setSearchIcon] = useState<string>('icon-searchv1');
// const typingTimer = useRef<ReturnType<typeof setInterval>>();
useEffect(() => {
@ -75,7 +76,7 @@ const Searchbar = ({
<SVGIcons
alt="icon-search"
className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-top-2 tw-left-2 tw-text-center tw-pointer-events-none"
icon="icon-searchv1"
icon={searchIcon}
/>
<input
className="tw-form-inputs tw-relative tw-px-3 tw-py-1 tw-pl-8"
@ -83,7 +84,9 @@ const Searchbar = ({
placeholder={placeholder}
type="text"
value={userSearch}
onBlur={() => setSearchIcon('icon-searchv1')}
onChange={handleChange}
onFocus={() => setSearchIcon('icon-searchv1color')}
/>
</div>
</div>

1
openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.interface.ts
View File

@ -22,6 +22,7 @@ export interface NavBarProps {
isFeatureModalOpen: boolean;
pathname: string;
isSearchBoxOpen: boolean;
username: string;
handleSearchBoxOpen: (value: boolean) => void;
handleFeatureModal: (value: boolean) => void;
handleSearchChange: (value: string) => void;

14
openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
View File

@ -23,10 +23,10 @@ import { activeLink, normalLink } from '../../utils/styleconstant';
import SVGIcons, { Icons } from '../../utils/SvgUtils';
import SearchOptions from '../app-bar/SearchOptions';
import Suggestions from '../app-bar/Suggestions';
import Avatar from '../common/avatar/Avatar';
import PopOver from '../common/popover/PopOver';
import DropDown from '../dropdown/DropDown';
import { WhatsNewModal } from '../Modals/WhatsNewModal';
import { ReactComponent as IconDefaultUserProfile } from './../../assets/svg/ic-default-profile.svg';
import { NavBarProps } from './NavBar.interface';
const NavBar = ({
@ -37,6 +37,7 @@ const NavBar = ({
isFeatureModalOpen,
isTourRoute = false,
pathname,
username,
isSearchBoxOpen,
handleSearchBoxOpen,
handleFeatureModal,
@ -86,7 +87,7 @@ const NavBar = ({
/>
<input
autoComplete="off"
className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-pt-2 tw-pb-1.5 tw-form-inputs"
className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-pt-2 tw-pb-1.5 tw-form-inputs tw-ml-4"
data-testid="searchBox"
id="searchBox"
placeholder="Search for Table, Topics, Dashboards and Pipeline"
@ -190,14 +191,7 @@ const NavBar = ({
/>
</div>
) : (
<IconDefaultUserProfile
className="tw--mr-2"
style={{
height: '22px',
width: '22px',
borderRadius: '50%',
}}
/>
<Avatar name={username} width="30" />
)}
</PopOver>
</>

2
openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx
View File

@ -376,7 +376,7 @@ const ServicesPage = () => {
{getCountBadge(
servicesCount[tab.name],
'',
'tw-self-center',
tab.name === serviceName
)}
</div>

1
openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.component.tsx
View File

@ -224,6 +224,7 @@ const TourPage = () => {
searchValue={searchValue}
settingDropdown={[]}
supportDropdown={[]}
username="User"
/>
<Tour steps={getSteps(TOUR_SEARCH_TERM, clearSearchTerm)} />
{getCurrentPage(currentPage)}

3
openmetadata-ui/src/main/resources/ui/src/styles/temp.css
View File

@ -707,6 +707,9 @@ body .list-option.rdw-option-active {
text-decoration: line-through;
width: fit-content;
}
.diff-description {
color: #008376;
}
/* status style */
.tw-bg-status-success {

2
openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
View File

@ -455,7 +455,7 @@ export const getInfoElements = (data: ExtraInfo) => {
{data.key === 'Owner' ? (
<span
className={classNames(
'tw-mr-1 tw-inline-block tw-truncate tw-align-text-bottom',
'tw-mr-1 tw-inline-block tw-truncate tw-align-middle',
{ 'tw-w-52': (displayVal as string).length > 32 }
)}
title={displayVal as string}>

1
openmetadata-ui/src/main/resources/ui/tailwind.config.js
View File

@ -136,6 +136,7 @@ module.exports = {
'screen-lg': '992px',
'screen-xl': '1200px',
'screen-xxl': '1440px',
600: '600px',
},
minWidth: {
badgeCount: '30px',