Offray/Socialmetrica
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI/UX improvements in Twitter User and Tweet.

Browse Source
This commit is contained in:
Offray Vladimir Luna Cárdenas 2021-08-27 16:35:30 -05:00
parent 3853c3e9fc
commit 3134c006e6
6 changed files with 136 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
Datanalitica.package/Tweet.class/instance/asCardElement.st
View File

@ -1,4 +1,61 @@
accessing
asCardElement
| aModeLook anEditor textInfoPane |
^ self asTestCardElement
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 ].
}
}
}

62
Datanalitica.package/Tweet.class/instance/asTestCardElement.st
View File

@ -1,62 +0,0 @@
accessing
asTestCardElement
<gtExample>
| 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 ].
}
}
}

16
Datanalitica.package/Tweet.class/instance/gtViewTweetDetailsOn..st Normal file
View File

@ -0,0 +1,16 @@
accessing
gtViewTweetDetailsOn: aView
<gtView>
^ 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))
]

4
Datanalitica.package/TweetsCollection.class/instance/gtTweetsFor..st
View File

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

81
Datanalitica.package/TwitterUser.class/instance/asCardElement.st
View File

@ -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;
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]
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;
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 ].
}
}
}

4
Datanalitica.package/TwitterUser.class/instance/gtViewProfileDetailsOn..st
View File

@ -1,4 +1,4 @@
accessing
ui
gtViewProfileDetailsOn: aView
<gtView>
^ 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].