Skip to content

Commit

Permalink
feat(feed): connected, ordered, disabled, divided variant + inverted fix
Browse files Browse the repository at this point in the history 
Added a connected variant to the feed view, which now easily offers to use feed as a simple timeline component
Added an ordered variant which automatically creates labels or can create ones via data-text attribute including colorization as usual and a basic variant
Added support for text labels or ui label labels
Added disabled support
Added a simple divided variant just like we already have for item, list, grid
Added optional right floated variant for feed sub components such as date
Fixed inverted variants when icons were used
  • Loading branch information
@lubber-de
lubber-de authored Jun 8, 2023
1 parent 20625bd commit 41577bc
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 39 deletions.
10 changes: 5 additions & 5 deletions src/definitions/elements/icon.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ i.icon {
}

i.icon::before {
background: none !important;
background: none;
}

/*******************************
Expand Down Expand Up @@ -322,16 +322,16 @@ i.emphasized.icons:not(.disabled) {
@c: @colors[@@color][color];
@l: @colors[@@color][light];

i.@{color}.icon.icon.icon.icon.icon {
i.@{color}.icon.icon.icon.icon.icon.icon {
color: @c;
}
& when (@variationIconInverted) {
i.inverted.@{color}.icon.icon.icon.icon.icon {
i.inverted.@{color}.icon.icon.icon.icon.icon.icon {
color: @l;
}
& when (@variationIconBordered) or (@variationIconCircular) {
i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
i.inverted.bordered.@{color}.icon.icon.icon.icon.icon.icon,
i.inverted.circular.@{color}.icon.icon.icon.icon.icon.icon,
i.inverted.bordered.@{color}.icons,
i.inverted.circular.@{color}.icons {
background-color: @c;
Expand Down
2 changes: 1 addition & 1 deletion src/definitions/elements/list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,7 +681,7 @@ ol.ui.list ol li,
.ui.ordered.list,
.ui.ordered.list .list:not(.icon),
ol.ui.list ol {
counter-reset: ordered;
counter-reset: @orderedCountName;
margin-left: @orderedCountDistance;
list-style-type: none;
}
Expand Down
270 changes: 238 additions & 32 deletions src/definitions/views/feed.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,42 +43,75 @@
padding: @eventPadding;
margin: @eventMargin;
background: @eventBackground;
border-top: @eventDivider;
&:not(:first-child) {
border-top: @eventDivider;
}
}
.ui.feed > .event:first-child {
border-top: 0;
.ui.feed:not(.connected) > .event:first-child {
padding-top: 0;
}
.ui.feed > .event:last-child {
padding-bottom: 0;
}

/* Event Label */
.ui.feed > .event > .label {
display: block;
flex: 0 0 auto;
width: @labelWidth;
height: @labelHeight;
align-self: @labelAlignSelf;
text-align: @labelTextAlign;
}
.ui.feed > .event > .label .icon {
opacity: @iconLabelOpacity;
font-size: @iconLabelSize;
width: @iconLabelWidth;
padding: @iconLabelPadding;
background: @iconLabelBackground;
border: @iconLabelBorder;
border-radius: @iconLabelBorderRadius;
color: @iconLabelColor;
}
.ui.feed > .event > .label img {
width: @imageLabelWidth;
height: @imageLabelHeight;
border-radius: @imageLabelBorderRadius;
}
.ui.feed > .event > .label + .content {
margin: @labeledContentMargin;
& when (@variationFeedLabel) {
/* Event Label */

.ui.feed > .event > .label {
display: block;
flex: 0 0 auto;
width: @labelWidth;
height: @labelHeight;
align-self: @labelAlignSelf;
text-align: @labelTextAlign;
}

& when (@variationFeedLabelIcon) {
.ui.feed > .event > .label .icon {
opacity: @iconLabelOpacity;
font-size: @iconLabelSize;
width: @iconLabelWidth;
padding: @iconLabelPadding;
background: @iconLabelBackground;
border: @iconLabelBorder;
border-radius: @iconLabelBorderRadius;
color: @iconLabelColor;
}
}
& when (@variationFeedLabelImage) {
.ui.feed > .event > .label img {
width: @imageLabelWidth;
height: @imageLabelHeight;
border-radius: @imageLabelBorderRadius;
}
}
& when (@variationFeedLabelText) {
.ui.feed > .event > .label > .text {
display: block;
text-align: center;
margin-top: @textLabelTopMargin;
&.ui {
margin-top: @uiTextLabelTopMargin;
}
&.multiline {
margin-top: @multilineTextLabelTopMargin;
&.ui {
margin-top: @uiMultilineTextLabelTopMargin;
}
}
}
}
& when (@variationFeedLabelUiLabel) {
.ui.feed > .event > .label > .ui.label {
margin-top: @uiLabelTopMargin;
position: relative;
z-index: @uiLabelZIndex;
}
}

.ui.feed > .event > .label + .content {
margin: @labeledContentMargin;
}
}

/* --------------
Expand Down Expand Up @@ -146,13 +179,15 @@
/* Date inside Summary */
.ui.feed > .event > .content .summary > .date {
display: @summaryDateDisplay;
float: @summaryDateFloat;
font-weight: @summaryDateFontWeight;
font-size: @summaryDateFontSize;
font-style: @summaryDateFontStyle;
margin: @summaryDateMargin;
padding: @summaryDatePadding;
color: @summaryDateColor;
&:not(.floated) {
float: @summaryDateFloat;
}
}
}
}
Expand Down Expand Up @@ -274,6 +309,106 @@
/*******************************
Variations
*******************************/
& when (@variationFeedRightFloated) {
/* rtl:rename */
.ui.feed .right.floated {
float: right;
}
}
& when (@variationFeedConnected) {
.ui.connected.feed > .event {
position: relative;
&:not(:last-child)::before {
border-left: @connectedBorder;
content: "";
left: @connectedBorderLeftOffset;
position: absolute;
top: @connectedBorderTopOffset;
height: @connectedBorderHeight;
}
& > .label when (@variationFeedLabel) {
position: relative;
}
}
& when (@variationFeedInverted) {
.ui.inverted.connected.feed > .event {
&::before {
border-left-color: @invertedConnectedBorderColor;
}
}
}
}

& when(@variationFeedDivided) {
.ui.divided.feed > .event:not(:first-child) {
border-top: @dividedBorder;
}
& when (@variationFeedInverted) {
.ui.inverted.divided.feed > .event {
border-top-color: @invertedDividedBorderColor;
}
}
}
& when (@variationFeedLabelText) {
.ui.ui.feed > .event > .label[data-text]::before {
content: attr(data-text);
}
}
& when (@variationFeedOrdered) or (@variationFeedLabelText) {
.ui.feed > .event > .label[data-text]::before,
.ui.ordered.feed > .event > .label::before {
text-align: center;
line-height: 1;
height: @orderedHeight;
background: @orderedBackground;
color: @orderedColor;
border-radius: @orderedBorderRadius;
padding-top: @orderedTopOffset;
position: relative;
display: block;
margin-bottom: @orderedBottomMargin;
border: @orderedBorder;
}
}
& when (@variationFeedOrdered) {
.ui.ordered.feed {
counter-reset: @orderedCountName;
& > .event > .label::before {
counter-increment: @orderedCountName;
content: @orderedCountContent;
}
}
& when (@variationFeedBasic) {
.ui.ordered.basic.feed > .event > .label::before,
.ui.ordered.feed > .event > .basic.label::before {
border-color: @orderedBasicBorderColor;
color: @orderedBasicColor;
background: @orderedBasicBackground;
}
}
& when (@variationFeedConnected) {
.ui.ordered.connected.feed > .event::before {
top: @orderedConnectedBorderTopOffset;
height: @orderedConnectedBorderHeight;
}

/* workaround until all browsers support :has() */
.ui.connected.labeled.feed > .event::before,
.ui.connected.feed > .labeled.event::before {
top: @orderedConnectedLabeledBorderTopOffset;
height: @orderedConnectedLabeledBorderHeight;
}
}
}
& when (@variationFeedConnected) and ((@variationFeedOrdered) or (@variationFeedLabelText)) {
@supports selector(:has(.f)) {
.ui.connected.feed > .event:has(> .label[data-text] > *)::before,
.ui.ordered.connected.feed > .event:has(> .label > *)::before {
top: @orderedConnectedLabeledBorderTopOffset;
height: @orderedConnectedLabeledBorderHeight;
}
}
}

.ui.feed {
font-size: @medium;
Expand All @@ -294,12 +429,18 @@

.ui.inverted.feed > .event {
background: @black;
& > .label i.icon when (@variationFeedLabelIcon) {
color: @invertedIconLabelColor;
}
& > .label .text:not(.ui) when (@variationFeedLabelText) {
color: @invertedTextLabelColor;
}
}

& when (@variationFeedDate) or (@variationFeedLike) {
.ui.inverted.feed > .event > .content .date,
.ui.inverted.feed > .event > .content .meta .like {
color: @invertedLightTextColor;
color: @invertedLikeColor;
}
}

Expand All @@ -312,8 +453,73 @@

& when (@variationFeedLike) {
.ui.inverted.feed > .event > .content .meta .like:hover {
color: @invertedSelectedTextColor;
color: @invertedLikeHoverColor;
}
.ui.inverted.feed > .event > .content .meta .active.like i.icon {
color: @invertedLikeActiveColor;
}
}
}

/* --------------
Colors
--------------- */
& when not (@variationFeedColors = false) {
each(@variationFeedColors, {
@color: @value;
@c: @colors[@@color][color];
@l: @colors[@@color][light];

& when (@variationFeedOrdered) or (@variationFeedLabelText) {
.ui.ui.feed > .event > .@{color}.label::before,
.ui.@{color}.feed > .event > .label::before {
background: @c;
}
}
& when (@variationFeedConnected) {
.ui.@{color}.connected.feed > .event::before,
.ui.connected.feed > .@{color}.event::before {
border-color: @c;
}
& when (@variationFeedInverted) {
.ui.inverted.@{color}.connected.feed > .event::before,
.ui.connected.feed > .inverted.@{color}.event::before {
border-color: @l;
}
}
}
& when (@variationFeedBasic) {
.ui.ui.feed > .event > .@{color}.basic.label::before,
.ui.@{color}.basic.feed > .event > .label::before {
color: @c;
}
}
& when (@variationFeedInverted) {
.ui.feed > .event > .inverted.@{color}.label::before,
.ui.inverted.@{color}.feed > .event > .label::before {
background: @l;
}
& when (@variationFeedBasic) {
.ui.feed > .event > .inverted.@{color}.basic.label::before,
.ui.inverted.@{color}.basic.feed > .event > .label::before {
color: @l;
}
}
}
});
}
& when (@variationFeedBasic) {
.ui.ui.feed > .event > .basic.label::before,
.ui.ui.ui.basic.feed > .event > .label::before {
background: @orderedBasicBackground;
border-color: currentColor;
}
}
& when (@variationFeedDisabled) {
.ui.disabled.feed,
.ui.feed .disabled.event {
opacity: @disabledOpacity;
pointer-events: @disabledPointerEvents;
}
}

Expand Down
12 changes: 12 additions & 0 deletions src/themes/default/globals/variation.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,13 +452,25 @@

/* Feed */
@variationFeedInverted: true;
@variationFeedDisabled: true;
@variationFeedMeta: true;
@variationFeedSummary: true;
@variationFeedUser: true;
@variationFeedExtra: true;
@variationFeedDate: true;
@variationFeedLike: true;
@variationFeedLabel: true;
@variationFeedLabelIcon: true;
@variationFeedLabelImage: true;
@variationFeedLabelText: true;
@variationFeedLabelUiLabel: true;
@variationFeedConnected: true;
@variationFeedDivided: true;
@variationFeedOrdered: true;
@variationFeedBasic: true;
@variationFeedRightFloated: true;
@variationFeedSizes: @variationAllSizes;
@variationFeedColors: @variationAllColors;

/* Item */
@variationItemInverted: true;
Expand Down
Loading

0 comments on commit 41577bc

Please sign in to comment.