From 3134c006e690c0dde9d19cddbc2852da4b5be0ac Mon Sep 17 00:00:00 2001 From: Offray Luna Date: Fri, 27 Aug 2021 16:35:30 -0500 Subject: [PATCH] UI/UX improvements in Twitter User and Tweet. --- .../Tweet.class/instance/asCardElement.st | 59 ++++++++++++- .../Tweet.class/instance/asTestCardElement.st | 62 -------------- .../instance/gtViewTweetDetailsOn..st | 16 ++++ .../instance/gtTweetsFor..st | 4 +- .../instance/asCardElement.st | 85 +++++++++++++------ .../instance/gtViewProfileDetailsOn..st | 4 +- 6 files changed, 136 insertions(+), 94 deletions(-) delete mode 100644 Datanalitica.package/Tweet.class/instance/asTestCardElement.st create mode 100644 Datanalitica.package/Tweet.class/instance/gtViewTweetDetailsOn..st diff --git a/Datanalitica.package/Tweet.class/instance/asCardElement.st b/Datanalitica.package/Tweet.class/instance/asCardElement.st index e840bb5..8fdb899 100644 --- a/Datanalitica.package/Tweet.class/instance/asCardElement.st +++ b/Datanalitica.package/Tweet.class/instance/asCardElement.st @@ -1,4 +1,61 @@ accessing asCardElement + | aModeLook anEditor textInfoPane | - ^ self asTestCardElement \ No newline at end of file + aModeLook := BrEditorModeAptitude new + editableFocused: [ :aWidget | aWidget border: (BlBorder paint: BrGlamorousColors focusedEditorBorderColor width: 1) ]; + editableUnfocused: [ :aWidget | aWidget border: (BlBorder paint: BrGlamorousColors editorBorderColor width: 1) ]; + readOnly: [ :aWidget | aWidget border: BlBorder empty ]. + + anEditor := BrEditor new + aptitude: BrGlamorousRegularEditorAptitude new + aModeLook; + text: self text; + vFitContent. + + textInfoPane := BrVerticalPane new + hMatchParent; + vFitContent; + margin: (BlInsets left: 20); + addChild: (BrLabel new + aptitude: BrGlamorousLabelAptitude; + text: '@' , self user userName , ' | ' , self created asString; + beSmallSize); + addChild: anEditor. + + ^ BrHorizontalPane new + padding: (BlInsets all: 15); + margin: (BlInsets all: 10); + cellSpacing: 5; + hMatchParent; + vFitContent; + addChildren: { + (self user profileImage asElement asScalableElement size: 64 @ 64). + BrVerticalPane new + cellSpacing: 5; + hMatchParent; + vFitContent; + addChildren: { + textInfoPane. + BrHorizontalPane new + fitContent; + cellSpacing: 5; + addChildren: { + BrButton new + aptitude: BrGlamorousButtonWithLabelAptitude new; + label: 'Toggle subtopics'; + action: [ anEditor beEditable ]. + BrButton new + aptitude: BrGlamorousButtonWithLabelAptitude new; + label: 'Add subtopic keyword'; + action: [ anEditor beReadOnlyWithSelection ]. + BrButton new + aptitude: BrGlamorousButtonWithLabelAptitude new; + label: 'Details'; + action: [ :e | e phlow spawnObject: self ]. + BrButton new + aptitude: BrGlamorousButtonWithLabelAptitude new; + label: 'Web view'; + action: [ self webView ]. + } + } + } \ No newline at end of file diff --git a/Datanalitica.package/Tweet.class/instance/asTestCardElement.st b/Datanalitica.package/Tweet.class/instance/asTestCardElement.st deleted file mode 100644 index 4173c83..0000000 --- a/Datanalitica.package/Tweet.class/instance/asTestCardElement.st +++ /dev/null @@ -1,62 +0,0 @@ -accessing -asTestCardElement - - | aModeLook anEditor textInfoPane | - - aModeLook := BrEditorModeAptitude new - editableFocused: [ :aWidget | aWidget border: (BlBorder paint: BrGlamorousColors focusedEditorBorderColor width: 1) ]; - editableUnfocused: [ :aWidget | aWidget border: (BlBorder paint: BrGlamorousColors editorBorderColor width: 1) ]; - readOnly: [ :aWidget | aWidget border: BlBorder empty ]. - - anEditor := BrEditor new - aptitude: BrGlamorousRegularEditorAptitude new + aModeLook; - text: self text; - vFitContent. - - textInfoPane := BrVerticalPane new - hMatchParent; - vFitContent; - margin: (BlInsets left: 20); - addChild: (BrLabel new - aptitude: BrGlamorousLabelAptitude; - text: '@' , self user userName , ' | ' , self created asString; - beSmallSize); - addChild: anEditor. - - ^ BrHorizontalPane new - padding: (BlInsets all: 15); - margin: (BlInsets all: 10); - cellSpacing: 5; - hMatchParent; - vFitContent; - addChildren: { - (self user profileImage asElement asScalableElement size: 64 @ 64). - BrVerticalPane new - cellSpacing: 5; - hMatchParent; - vFitContent; - addChildren: { - textInfoPane. - BrHorizontalPane new - fitContent; - cellSpacing: 5; - addChildren: { - BrButton new - aptitude: BrGlamorousButtonWithLabelAptitude new; - label: 'Toggle subtopics'; - action: [ anEditor beEditable ]. - BrButton new - aptitude: BrGlamorousButtonWithLabelAptitude new; - label: 'Add subtopic keyword'; - action: [ anEditor beReadOnlyWithSelection ]. - BrButton new - aptitude: BrGlamorousButtonWithLabelAptitude new; - label: 'Details'; - action: [ :e | e phlow spawnObject: self ]. - BrButton new - aptitude: BrGlamorousButtonWithLabelAptitude new; - label: 'Web view'; - action: [ self webView ]. - } - } - } \ No newline at end of file diff --git a/Datanalitica.package/Tweet.class/instance/gtViewTweetDetailsOn..st b/Datanalitica.package/Tweet.class/instance/gtViewTweetDetailsOn..st new file mode 100644 index 0000000..ec1bd23 --- /dev/null +++ b/Datanalitica.package/Tweet.class/instance/gtViewTweetDetailsOn..st @@ -0,0 +1,16 @@ +accessing +gtViewTweetDetailsOn: aView + + ^ aView explicit + title: 'Tweet Details' translated; + priority: 5; + stencil: [ + BlElement new + layout: BlFlowLayout new; + constraintsDo: [ :c | + c vertical fitContent. + c horizontal matchParent ]; + padding: (BlInsets all: 10); + addChild: (self asCardElement margin: (BlInsets all: 20)) + ] + \ No newline at end of file diff --git a/Datanalitica.package/TweetsCollection.class/instance/gtTweetsFor..st b/Datanalitica.package/TweetsCollection.class/instance/gtTweetsFor..st index 19ace39..2ac4b76 100644 --- a/Datanalitica.package/TweetsCollection.class/instance/gtTweetsFor..st +++ b/Datanalitica.package/TweetsCollection.class/instance/gtTweetsFor..st @@ -18,8 +18,8 @@ gtTweetsFor: aView background: Color white; margin: (BlInsets all: 10); constraintsDo: [ :c | - c vertical exact: 135. + c vertical exact: 145. c horizontal matchParent ]; - elementBuilder: [ each asTestCardElement margin: (BlInsets all: 20) ]. + elementBuilder: [ each asCardElement margin: (BlInsets all: 20) ]. container addChild: imageContainer]. container asScrollableElement ] \ No newline at end of file diff --git a/Datanalitica.package/TwitterUser.class/instance/asCardElement.st b/Datanalitica.package/TwitterUser.class/instance/asCardElement.st index dbebf22..c162f39 100644 --- a/Datanalitica.package/TwitterUser.class/instance/asCardElement.st +++ b/Datanalitica.package/TwitterUser.class/instance/asCardElement.st @@ -1,29 +1,60 @@ -ui +accessing asCardElement - ^ BrHorizontalPane new - hFitContent; + | aModeLook anEditor textInfoPane | + + aModeLook := BrEditorModeAptitude new + editableFocused: [ :aWidget | aWidget border: (BlBorder paint: BrGlamorousColors focusedEditorBorderColor width: 1) ]; + editableUnfocused: [ :aWidget | aWidget border: (BlBorder paint: BrGlamorousColors editorBorderColor width: 1) ]; + readOnly: [ :aWidget | aWidget border: BlBorder empty ]. + + anEditor := BrEditor new + aptitude: BrGlamorousRegularEditorAptitude new + aModeLook; + text: self description; + vFitContent. + + textInfoPane := BrVerticalPane new + hMatchParent; + vFitContent; + margin: (BlInsets left: 20); + addChild: (BrLabel new + aptitude: BrGlamorousLabelAptitude; + text: '@' , self userName ; + beHugeSize); + addChild: (BrLabel new + aptitude: BrGlamorousLabelAptitude; + text: self name; + beLargeSize); + addChild: (BrLabel new + aptitude: BrGlamorousLabelAptitude; + text: 'Joined: ' , self createdAtShorted ); + addChild: anEditor. + + ^ BrHorizontalPane new + padding: (BlInsets all: 15); + margin: (BlInsets all: 10); + cellSpacing: 5; + hMatchParent; vFitContent; - padding: (BlInsets all: 20); - margin: (BlInsets all: 10); - addChild: (self profileImage asElement asScalableElement size: 124@124); - addChild: (BrVerticalPane new - fitContent; - margin: (BlInsets left: 20); - addChild: (BlTextElement new - constraintsDo: [ :c | - c horizontal fitContent ]; - margin: (BlInsets top: 5 right: 0 bottom: 5 left: 5); - text: (('@', self userName) asRopedText glamorousRegularFont - fontSize: 20; - foreground: Color black)); - addChild: (BrLabel new aptitude: BrGlamorousLabelAptitude; text: self name; beLargeSize); - addChild: (BrLabel new - aptitude: BrGlamorousLabelAptitude; text: 'joined: ', self createdAtShorted); - addChild: (BrLabel new aptitude: BrGlamorousLabelAptitude; text: self description); - addChild: (BrEditor new - constraintsDo: [ :c | - c horizontal matchParent ]; - aptitude: BrGlamorousRegularEditorAptitude new; - beReadOnlyWithSelection; - text: String loremIpsum)); - when: BlClickEvent do: [:e | e target phlow spawnObject: self tweets] \ No newline at end of file + addChildren: { + (self profileImage asElement asScalableElement size: 124 @ 124). + BrVerticalPane new + cellSpacing: 5; + hMatchParent; + vFitContent; + addChildren: { + textInfoPane. + BrHorizontalPane new + fitContent; + cellSpacing: 5; + addChildren: { + BrButton new + aptitude: BrGlamorousButtonWithLabelAptitude new; + label: 'Tweets'; + action: [ :e | e phlow spawnObject: self tweets ]. + BrButton new + aptitude: BrGlamorousButtonWithLabelAptitude new; + label: 'Web view'; + action: [ self webView ]. + } + } + } \ No newline at end of file diff --git a/Datanalitica.package/TwitterUser.class/instance/gtViewProfileDetailsOn..st b/Datanalitica.package/TwitterUser.class/instance/gtViewProfileDetailsOn..st index d338871..49c9da6 100644 --- a/Datanalitica.package/TwitterUser.class/instance/gtViewProfileDetailsOn..st +++ b/Datanalitica.package/TwitterUser.class/instance/gtViewProfileDetailsOn..st @@ -1,4 +1,4 @@ -accessing +ui gtViewProfileDetailsOn: aView ^ aView explicit @@ -18,7 +18,7 @@ gtViewProfileDetailsOn: aView background: Color white; margin: (BlInsets all: 20); constraintsDo: [ :c | - c vertical exact: 150. + c vertical exact: 175. c horizontal matchParent ]; elementBuilder: [ self asCardElement margin: (BlInsets all: 20) ]. container addChild: imageContainer]. \ No newline at end of file