feat(ui): add more info to object page (#75)

ui5-community · Apr 10, 2022 · bd02583 · bd02583
1 parent 98d4537
commit bd02583
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 13 deletions.
diff --git a/packages/ui/src/view/AllPackages.view.xml b/packages/ui/src/view/AllPackages.view.xml
@@ -14,7 +14,7 @@
 					<core:Item key="createdAt" text="By date of creation" />
 					<core:Item key="addedToBoUI5" text="By date of addition on Best of UI5" />
 				</Select>
-                <List id="listAllPackages" headerText="Packages" mode="None" items="{path: 'data>/packages/'}" width="{= ${device>/system/phone} === true ? '' : '800px' }">
+                <List id="listAllPackages" headerText="Packages" mode="None" items="{path: 'data>/packages/'}" width="{= ${device>/system/phone} === true ? '' : '1024px' }">
                     <CustomListItem id="_IDGenCustomListItem1" type="Navigation" press="onPress">
                         <ui5cc:PackageListItemContent name="{data>name}" githublink="{data>githublink}" npmlink="{data>npmlink}" description="{
                                         parts: ['data>description', 'settings>/search'],

diff --git a/packages/ui/src/view/HotPackages.view.xml b/packages/ui/src/view/HotPackages.view.xml
@@ -3,7 +3,7 @@
     xmlns="sap.m"
     xmlns:ui5cc="org.openui5.ui5community.control"
     xmlns:core="sap.ui.core">
-        <List id="listHotPackages" headerText="Packages" mode="None" items="{path: 'data>/packages/'}" width="{= ${device>/system/phone} === true ? '' : '800px' }">
+        <List id="listHotPackages" headerText="Packages" mode="None" items="{path: 'data>/packages/'}" width="{= ${device>/system/phone} === true ? '' : '1024px' }">
             <CustomListItem id="_IDGenCustomListItem1" type="Navigation" press="onPress">
                 <ui5cc:PackageListItemContent name="{data>name}" githublink="{data>githublink}" npmlink="{data>npmlink}" description="{
                                         parts: ['data>description', 'settings>/search'],

diff --git a/packages/ui/src/view/Main.view.xml b/packages/ui/src/view/Main.view.xml
@@ -28,9 +28,9 @@
                             <FlexItemData minWidth="{= ${device>/system/phone} === true ? '' : '500px' }" />
                         </layoutData>
                     </MultiInput>
-                    <NavContainer width="{= ${device>/system/phone} === true ? '' : '800px' }" id="pageContainer">
+                    <NavContainer width="{= ${device>/system/phone} === true ? '' : '1024px' }" id="pageContainer">
                         <layoutData>
-                            <FlexItemData minHeight="100%" minWidth="{= ${device>/system/phone} === true ? '' : '800px' }" />
+                            <FlexItemData minHeight="100%" minWidth="{= ${device>/system/phone} === true ? '' : '1024px' }" />
                         </layoutData>
                     </NavContainer>
                 </FlexBox>

diff --git a/packages/ui/src/view/Object.view.xml b/packages/ui/src/view/Object.view.xml
@@ -1,13 +1,103 @@
 <mvc:View controllerName="org.openui5.ui5community.controller.Object"
-	xmlns="sap.m"
+	xmlns:m="sap.m"
 	xmlns:mvc="sap.ui.core.mvc"
-	xmlns:semantic="sap.m.semantic"
 	xmlns:form="sap.ui.layout.form"
-	xmlns:md="cc.md">
+	xmlns:md="cc.md"
+	xmlns="sap.uxap"
+	xmlns:layout="sap.ui.layout"
+	xmlns:tnt="sap.tnt">
+	<ObjectPageLayout id="ObjectPageLayout" upperCaseAnchorBar="false">
+		<headerTitle>
+			<ObjectPageHeader id="headerForTest"
+							  objectTitle="{data>name}"
+							  objectSubtitle="{data>description}"
+							  titleSelectorTooltip="Custom Tooltip">
+			</ObjectPageHeader>
+		</headerTitle>
+		<headerContent>
+			<layout:VerticalLayout>
+				<m:ObjectStatus title="Author" text="{data>author}"/>
+				<m:ObjectStatus title="License" text="{data>license}"/>
+				<m:Link text="GitHub" href="{data>githublink}"/>
+				<m:Link text="NPM" href="{data>npmlink}"/>
+			</layout:VerticalLayout>
+			<layout:VerticalLayout>
+				<tnt:InfoLabel id="downloads365" text="Downloads last 365 days {data>downloads365}" renderMode="Loose"
+					colorScheme="5" />
+					<tnt:InfoLabel id="downloads30" text="Downloads last 30 days {data>downloads30}" renderMode="Loose"
+						colorScheme="5" />
+					<tnt:InfoLabel id="version" text=" Version {data>version}" renderMode="Loose"
+					colorScheme="3" />
+			</layout:VerticalLayout>
+			<layout:VerticalLayout>
+				<m:ObjectStatus title="Created At" text="{
+					path: 'data>createdAt',
+					type: 'sap.ui.model.type.DateTime',
+					formatOptions: {
+						source: {pattern: 'yyyy-MM-ddTHH:mm:ss.SSSX'},
+						pattern: 'dd.MM.yyyy'
+					}
+				}"/>
+				<m:ObjectStatus title="Last update" text="{
+					path: 'data>updatedAt',
+					type: 'sap.ui.model.type.DateTime',
+					formatOptions: {
+						source: {pattern: 'yyyy-MM-ddTHH:mm:ss.SSSX'},
+						pattern: 'dd.MM.yyyy'
+					}
+				}"/>
+			</layout:VerticalLayout>
 
-	<semantic:SemanticPage id="page" title="{data>name}" enableScrolling="false" showFooter="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">
-		<semantic:content>
-			<md:Markdown id="test" content="{data>readme}" />
-		</semantic:content>
-	</semantic:SemanticPage>
+		</headerContent>
+		<sections>
+
+			<ObjectPageSection titleUppercase="true" title="README">
+				<subSections>
+					<ObjectPageSubSection titleUppercase="false">
+						<blocks>
+							<md:Markdown id="test" content="{data>readme}" />
+						</blocks>
+					</ObjectPageSubSection>
+				</subSections>
+			</ObjectPageSection>
+
+			<!-- <ObjectPageSection titleUppercase="false" title="Dependencies">
+				<subSections>
+					<ObjectPageSubSection titleUppercase="false">
+						<blocks>
+							<m:Table id="dependenciesTable"
+							inset="false"
+							items="{
+								path: 'data>dependencies/',
+								sorter: {
+									path: 'Name'
+								}
+							}">
+							<m:columns>
+								<m:Column>
+									<m:Text text="Name" />
+								</m:Column>
+								<m:Column>
+									<m:Text text="Version" />
+								</m:Column>
+							</m:columns>
+							<m:items>
+								<m:ColumnListItem vAlign="Middle">
+									<m:cells>
+										<m:ObjectIdentifier
+											title="{Name}"
+											text="{value}"/>
+										<m:Text
+											text="{data>livereload}" />
+
+									</m:cells>
+								</m:ColumnListItem>
+							</m:items>
+						</m:Table>
+						</blocks>
+					</ObjectPageSubSection>
+				</subSections>
+			</ObjectPageSection> -->
+		</sections>
+	</ObjectPageLayout>
 </mvc:View>
diff --git a/packages/ui/src/view/Tags.view.xml b/packages/ui/src/view/Tags.view.xml
@@ -10,7 +10,7 @@
             <SegmentedButtonItem text="Types" key="type" />
         </items>
     </SegmentedButton>
-    <List id="tagsLits" headerText="Types/Tags" mode="None"  items="{path: 'data>/tags/', sorter : { path : 'count',descending: 'false' }}" width="{= ${device>/system/phone} === true ? '' : '800px' }">
+    <List id="tagsLits" headerText="Types/Tags" mode="None"  items="{path: 'data>/tags/', sorter : { path : 'count',descending: 'false' }}" width="{= ${device>/system/phone} === true ? '' : '1024px' }">
         <CustomListItem type="Navigation" press="onPress" counter="{data>count}">
             <FlexBox id="trend-item-box" class="item-box" alignItems="Start">
                 <VBox id="trend-item-inner-box" class="sapUiSmallMargin min-width-zero">

diff --git a/packages/ui/ui5.yaml b/packages/ui/ui5.yaml
@@ -12,6 +12,7 @@ framework:
     - name: sap.f
     - name: sap.tnt
     - name: themelib_sap_horizon
+    - name: sap.uxap
 server:
   customMiddleware:
   - name: ui5-middleware-livereload