Skip to content

Commit 871872e

Browse files
brunolemosbrunolemos
committed
Change unread design to a more traditional dot indicator
1 parent 2519677 commit 871872e

3 files changed

Lines changed: 102 additions & 101 deletions

File tree

‎packages/components/src/components/cards/BaseCard.shared.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
AppViewMode,
32
Column,
43
ColumnSubscription,
54
constants,
@@ -105,7 +104,7 @@ export const renderCardActions =
105104
Platform.OS === 'web' || constants.DISABLE_SWIPEABLE_CARDS
106105

107106
export interface AdditionalCardProps {
108-
appViewMode: AppViewMode
107+
// appViewMode: AppViewMode
109108
columnId: string
110109
height: number
111110
}

‎packages/components/src/components/cards/BaseCard.tsx‎

Lines changed: 91 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
smallTextSize,
1616
} from '../../styles/variables'
1717
import { fixColorHexWithoutHash } from '../../utils/helpers/colors'
18-
import { stripEmojis } from '../../utils/helpers/github/emojis'
1918
import { vibrateHapticFeedback } from '../../utils/helpers/shared'
2019
import { KeyboardKeyIsPressed } from '../AppKeyboardShortcuts'
2120
import { getCardBackgroundThemeColor } from '../columns/ColumnRenderer'
@@ -193,7 +192,7 @@ const styles = StyleSheet.create({
193192
export const BaseCard = React.memo((props: BaseCardProps) => {
194193
const {
195194
action,
196-
appViewMode,
195+
// appViewMode,
197196
height,
198197

199198
avatar,
@@ -226,7 +225,7 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
226225
link,
227226
)
228227

229-
const isMuted = appViewMode === 'single-column' ? false : isRead
228+
const isMuted = false // appViewMode === 'single-column' ? false : isRead
230229

231230
const backgroundThemeColor = (theme: Theme) =>
232231
getCardBackgroundThemeColor({
@@ -317,6 +316,13 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
317316
{title}
318317
</ThemedText>
319318

319+
{!!showPrivateLock && (
320+
<>
321+
<Text children=" " />
322+
<ThemedIcon name="lock" color="foregroundColorMuted65" />
323+
</>
324+
)}
325+
320326
<IntervalRefresh date={date}>
321327
{() => {
322328
const dateText = getDateSmallText(date)
@@ -335,20 +341,42 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
335341
>
336342
{dateText.toLowerCase()}
337343
</ThemedText>
338-
339-
{!!showPrivateLock && (
340-
<>
341-
<Text children=" " />
342-
<ThemedIcon
343-
name="lock"
344-
color="foregroundColorMuted65"
345-
/>
346-
</>
347-
)}
348344
</>
349345
)
350346
}}
351347
</IntervalRefresh>
348+
349+
{!isRead &&
350+
(() => {
351+
const dotSize = smallTextSize / 2
352+
353+
return (
354+
<>
355+
<Text children=" " />
356+
357+
<View
358+
style={{
359+
width: dotSize,
360+
height: dotSize + 1,
361+
paddingTop: 1,
362+
}}
363+
pointerEvents="none"
364+
>
365+
<ThemedView
366+
backgroundColor={
367+
(reason && reason.color) || 'primaryBackgroundColor'
368+
}
369+
style={{
370+
width: dotSize,
371+
height: dotSize,
372+
borderRadius: dotSize / 2,
373+
}}
374+
pointerEvents="none"
375+
/>
376+
</View>
377+
</>
378+
)
379+
})()}
352380
</View>
353381

354382
{!!subtitle && (
@@ -448,86 +476,59 @@ export const BaseCard = React.memo((props: BaseCardProps) => {
448476
</ThemedText>
449477
)}
450478

451-
{!!(reason && reason.label && columnId) &&
452-
(() => {
453-
const dotSize = smallTextSize / 2
454-
const dotSpacing = contentPadding / 3
479+
{!!(reason && reason.label && columnId) && (
480+
<View
481+
style={[
482+
sharedStyles.horizontalAndVerticallyAligned,
483+
sharedStyles.flexShrink0,
484+
]}
485+
>
486+
<Link
487+
TouchableComponent={GestureHandlerTouchableOpacity}
488+
enableUnderlineHover
489+
href="javascript:void(0)"
490+
openOnNewTab={false}
491+
onPress={() => {
492+
vibrateHapticFeedback()
455493

456-
return (
457-
<View
458-
style={[
459-
sharedStyles.horizontalAndVerticallyAligned,
460-
sharedStyles.flexShrink0,
461-
]}
462-
>
463-
<Link
464-
TouchableComponent={GestureHandlerTouchableOpacity}
465-
enableUnderlineHover
466-
href="javascript:void(0)"
467-
openOnNewTab={false}
468-
onPress={() => {
469-
vibrateHapticFeedback()
470-
471-
const removeIfAlreadySet = !(
472-
KeyboardKeyIsPressed.meta ||
473-
KeyboardKeyIsPressed.shift
474-
)
475-
476-
const removeOthers = !(
477-
KeyboardKeyIsPressed.alt ||
478-
KeyboardKeyIsPressed.meta ||
479-
KeyboardKeyIsPressed.shift
480-
)
481-
482-
dispatch(
483-
actions.setColumnReasonFilter({
484-
columnId,
485-
reason: reason.reason,
486-
value: KeyboardKeyIsPressed.alt ? false : true,
487-
removeIfAlreadySet,
488-
removeOthers,
489-
}),
490-
)
491-
}}
492-
style={sharedStyles.flexShrink0}
493-
textProps={{
494-
color: 'foregroundColorMuted65',
495-
numberOfLines: 1,
496-
style: [
497-
styles.reason,
498-
{ minWidth: reason.label.length * 7 },
499-
],
500-
}}
501-
{...Platform.select({
502-
web: { title: reason.tooltip },
503-
})}
504-
>
505-
{reason.label.toLowerCase()}
506-
</Link>
494+
const removeIfAlreadySet = !(
495+
KeyboardKeyIsPressed.meta ||
496+
KeyboardKeyIsPressed.shift
497+
)
507498

508-
<Spacer width={dotSpacing} pointerEvents="none" />
499+
const removeOthers = !(
500+
KeyboardKeyIsPressed.alt ||
501+
KeyboardKeyIsPressed.meta ||
502+
KeyboardKeyIsPressed.shift
503+
)
509504

510-
<View
511-
style={{
512-
width: dotSize,
513-
height: dotSize + 1,
514-
paddingTop: 1,
515-
}}
516-
pointerEvents="none"
517-
>
518-
<ThemedView
519-
backgroundColor={reason.color}
520-
style={{
521-
width: dotSize,
522-
height: dotSize,
523-
borderRadius: dotSize / 2,
524-
}}
525-
pointerEvents="none"
526-
/>
527-
</View>
528-
</View>
529-
)
530-
})()}
505+
dispatch(
506+
actions.setColumnReasonFilter({
507+
columnId,
508+
reason: reason.reason,
509+
value: KeyboardKeyIsPressed.alt ? false : true,
510+
removeIfAlreadySet,
511+
removeOthers,
512+
}),
513+
)
514+
}}
515+
style={sharedStyles.flexShrink0}
516+
textProps={{
517+
color: 'foregroundColorMuted65',
518+
numberOfLines: 1,
519+
style: [
520+
styles.reason,
521+
{ minWidth: reason.label.length * 7 },
522+
],
523+
}}
524+
{...Platform.select({
525+
web: { title: reason.tooltip },
526+
})}
527+
>
528+
{reason.label.toLowerCase()}
529+
</Link>
530+
</View>
531+
)}
531532
</View>
532533
)}
533534
</View>

‎packages/components/src/components/cards/CardWithLink.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
5555

5656
const dispatch = useDispatch()
5757
const plan = useReduxState(selectors.currentUserPlanSelector)
58-
const { appViewMode } = useAppViewMode()
58+
// const { appViewMode } = useAppViewMode()
5959

6060
const item = useItem(nodeIdOrId)
6161

@@ -76,12 +76,12 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
7676
<BaseCard
7777
key={`${type}-base-card-${getItemNodeIdOrId(item)!}`}
7878
{..._cardProps}
79-
appViewMode={appViewMode}
79+
// appViewMode={appViewMode}
8080
columnId={columnId}
8181
/>
8282
),
8383
}
84-
}, [appViewMode, columnId, item, ownerIsKnown, plan, repoIsKnown])
84+
}, [/* appViewMode, */ columnId, item, ownerIsKnown, plan, repoIsKnown])
8585

8686
const isReadRef = useDynamicRef(!!(cardProps && cardProps.isRead))
8787

@@ -113,8 +113,7 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
113113
theme[
114114
getCardBackgroundThemeColor({
115115
isDark: theme.isDark,
116-
isMuted:
117-
appViewMode === 'single-column' ? false : isReadRef.current,
116+
isMuted: false, // appViewMode === 'single-column' ? false : isReadRef.current,
118117
isHovered: isHoveredRef.current,
119118
})
120119
],
@@ -132,7 +131,9 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
132131
},
133132
})
134133
}
135-
}, [appViewMode])
134+
}, [
135+
/*appViewMode*/
136+
])
136137

137138
const handleFocusChange = useCallback(
138139
(value, disableDomFocus?: boolean) => {
@@ -186,7 +187,7 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
186187
backgroundThemeColor={theme =>
187188
getCardBackgroundThemeColor({
188189
isDark: theme.isDark,
189-
isMuted: appViewMode === 'single-column' ? false : cardProps.isRead,
190+
isMuted: false, // appViewMode === 'single-column' ? false : cardProps.isRead,
190191
// isHovered: !Platform.supportsTouch && isFocusedRef.current,
191192
})
192193
}
@@ -245,13 +246,13 @@ export const CardWithLink = React.memo((props: CardWithLinkProps) => {
245246

246247
{CardComponent}
247248

248-
{appViewMode === 'single-column' && (
249+
{/* {appViewMode === 'single-column' && (
249250
<CardLeftBorder
250251
style={{
251252
opacity: !!(cardProps && !cardProps.isRead) ? 1 : 0,
252253
}}
253254
/>
254-
)}
255+
)} */}
255256

256257
{!!isSaved && <CardSavedIndicator />}
257258
</Link>

0 commit comments

Comments
 (0)