GlcoinCore/squeaknode
1
0
Fork 0
mirror of https://github.com/yzernik/squeaknode.git synced 2026-08-16 13:01:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show locked squeak with icon (#226)

Browse source 
* Show lock icon when squeak thread item is locekd

* Squeak thread item locked display now looks good

* Show squeak detail item differently when locked
This commit is contained in:
Jonathan Zernik 2020-08-05 01:00:56 -07:00 • committed by GitHub
parent 4aebbfbbaf
commit d956cda20a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 95 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

56
frontend/squeak-node-frontend/src/components/SqueakDetailItem/SqueakDetailItem.js
View file

@ -14,6 +14,8 @@ import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import LockIcon from '@material-ui/icons/Lock';
import ReplyIcon from '@material-ui/icons/Reply';
import RepeatIcon from '@material-ui/icons/Repeat';
import FavoriteIcon from '@material-ui/icons/Favorite';
@ -65,11 +67,54 @@ export default function SqueakDetailItem({
}
}
function SqueakUnlockedContent() {
return (
<Typography
variant="h4"
style={{whiteSpace: 'pre-line'}}
>{squeak.getContentStr()}
</Typography>
)
}
function SqueakLockedContent() {
return (
<>
<LockIcon />
</>
)
}
function SqueakContent() {
return (
<>
{squeak.getIsUnlocked()
? SqueakUnlockedContent()
: SqueakLockedContent()
}
</>
)
}
function SqueakLockedBackgroundColor() {
return {backgroundColor: 'lightgray'};
}
function SqueakUnlockedBackgroundColor() {
return {backgroundColor: 'white'};
}
function SqueakBackgroundColor() {
return squeak.getIsUnlocked()
? SqueakUnlockedBackgroundColor()
: SqueakLockedBackgroundColor()
}
return (
<Box
p={1}
m={0}
bgcolor="background.paper"
style={SqueakBackgroundColor()}
>
<Grid
container
@ -95,14 +140,7 @@ export default function SqueakDetailItem({
alignItems="flex-start"
>
<Grid item>
<Typography
variant="h4"
style={{whiteSpace: 'pre-line'}}
>{squeak.getIsUnlocked()
? squeak.getContentStr()
: "Content is locked."
}
</Typography>
{SqueakContent()}
</Grid>
</Grid>
<Grid

62
frontend/squeak-node-frontend/src/components/SqueakThreadItem/SqueakThreadItem.js
View file

@ -13,6 +13,8 @@ import { MoreVert as MoreIcon } from "@material-ui/icons";
import {useHistory} from "react-router-dom";
import classnames from "classnames";
import LockIcon from '@material-ui/icons/Lock';
// styles
import useStyles from "./styles";
@ -26,10 +28,6 @@ export default function SqueakThreadItem({
}) {
var classes = useStyles();
// local
// var [moreButtonRef, setMoreButtonRef] = useState(null);
// var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
const history = useHistory();
const onAddressClick = (event) => {
@ -49,11 +47,54 @@ export default function SqueakThreadItem({
}
}
function SqueakUnlockedContent() {
return (
<Typography
size="md"
style={{whiteSpace: 'pre-line', overflow: "hidden", textOverflow: "ellipsis", height: '6rem'}}
>{squeak.getContentStr()}
</Typography>
)
}
function SqueakLockedContent() {
return (
<>
<LockIcon />
</>
)
}
function SqueakContent() {
return (
<>
{squeak.getIsUnlocked()
? SqueakUnlockedContent()
: SqueakLockedContent()
}
</>
)
}
function SqueakLockedBackgroundColor() {
return {backgroundColor: 'lightgray'};
}
function SqueakUnlockedBackgroundColor() {
return {backgroundColor: 'white'};
}
function SqueakBackgroundColor() {
return squeak.getIsUnlocked()
? SqueakUnlockedBackgroundColor()
: SqueakLockedBackgroundColor()
}
return (
<Box
p={1}
m={0}
bgcolor="background.paper"
style={SqueakBackgroundColor()}
onClick={onSqueakClick}
>
<Grid
@ -80,14 +121,7 @@ export default function SqueakThreadItem({
alignItems="flex-start"
>
<Grid item>
<Typography
size="md"
style={{whiteSpace: 'pre-line', overflow: "hidden", textOverflow: "ellipsis", height: '6rem'}}
>{squeak.getIsUnlocked()
? squeak.getContentStr()
: "Content is locked."
}
</Typography>
{SqueakContent()}
</Grid>
</Grid>
<Grid
@ -97,7 +131,7 @@ export default function SqueakThreadItem({
alignItems="flex-start"
>
<Grid item>
<Box color="secondary.main">
<Box color="secondary.main" fontWeight="fontWeightBold">
{new Date(squeak.getBlockTime()*1000).toString()} (Block # {squeak.getBlockHeight()})
</Box>
</Grid>