UI/UX starting to improve view/usability of Tweets in the collection.

This commit is contained in:
Offray Vladimir Luna Cárdenas 2021-08-25 11:42:16 -05:00
parent 39f8f7ee22
commit c7e5d66f10
3 changed files with 81 additions and 2 deletions

View File

@ -18,5 +18,22 @@ asCardElement
addChild: (BrEditor new
aptitude: BrGlamorousRegularEditorAptitude new;
beReadOnlyWithSelection;
text: self text));
text: self text);
addChild:(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: 'Web view';
action: [ "anEditor beReadOnlyWithoutSelection" ]
}));
when: BlClickEvent do: [ :e | e target phlow spawnObject: self ]

View File

@ -0,0 +1,62 @@
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: [ anEditor beReadOnlyWithSelection ].
BrButton new
aptitude: BrGlamorousButtonWithLabelAptitude new;
label: 'Web view';
action: [ anEditor beReadOnlyWithoutSelection ].
}
}
}

View File

@ -21,6 +21,6 @@ gtTweetsFor: aView
constraintsDo: [ :c |
c vertical exact: 200.
c horizontal matchParent ];
elementBuilder: [ each asCardElement margin: (BlInsets all: 20) ].
elementBuilder: [ each asTestCardElement margin: (BlInsets all: 20) ].
container addChild: imageContainer].
container asScrollableElement ]