diff --git a/src/scripts/components/download-button/download-button.styl b/src/scripts/components/download-button/download-button.styl index e4fe7706d..4709dc812 100644 --- a/src/scripts/components/download-button/download-button.styl +++ b/src/scripts/components/download-button/download-button.styl @@ -1,8 +1,8 @@ @require '../../../variables.styl' .downloadButton - width: emCalc(22px) - height: emCalc(22px) + width: emCalc(20px) + height: emCalc(20px) button, svg width: 100% @@ -16,10 +16,25 @@ .circle color: red - transition: 0.2s all ease-out transform: rotate(-90deg) fill: none stroke-width: 4px stroke: $main stroke-dasharray: 100 - stroke-dashoffset: 100 + + circle + transition: 0.5s all linear + +.delete + .trash + display: none + + .complete + display: block + + &:hover + .trash + display: block + + .complete + display: none diff --git a/src/scripts/components/download-button/download-button.tsx b/src/scripts/components/download-button/download-button.tsx index a90bfc9c3..866bb03a9 100644 --- a/src/scripts/components/download-button/download-button.tsx +++ b/src/scripts/components/download-button/download-button.tsx @@ -6,6 +6,7 @@ import {downloadedDataSelector} from '../../selectors/offline/downloaded'; import {downloadProgressSelector} from '../../selectors/offline/progress'; import {DownloadIcon} from '../icons/download-icon'; import {DownloadCompleteIcon} from '../icons/download-complete-icon'; +import {DeleteIcon} from '../icons/delete-icon'; import Button from '../button/button'; import styles from './download-button.styl'; @@ -44,23 +45,37 @@ export const DownloadButton: FunctionComponent = ({url, id}) => { /> )} {isDownloaded && ( - - )} - - {isElectron() && isDownloaded && ( - - )} */} ); }; diff --git a/src/scripts/components/story-list-item/story-list-item.styl b/src/scripts/components/story-list-item/story-list-item.styl index 8cf415e7a..e9921fc14 100644 --- a/src/scripts/components/story-list-item/story-list-item.styl +++ b/src/scripts/components/story-list-item/story-list-item.styl @@ -28,6 +28,8 @@ line-height: 30px .imageInfo + display: flex + flex-direction: column padding: 16px height: 40% background-color: $darkGrey1 @@ -56,3 +58,10 @@ a .description font-size: 1.5em + +.downloadButton + display: flex + flex-grow: 1 + flex-direction: column + justify-content: flex-end + align-self: flex-end diff --git a/src/scripts/components/story-list-item/story-list-item.tsx b/src/scripts/components/story-list-item/story-list-item.tsx index 2eefe719c..4a98665b0 100644 --- a/src/scripts/components/story-list-item/story-list-item.tsx +++ b/src/scripts/components/story-list-item/story-list-item.tsx @@ -46,7 +46,9 @@ const StoryListItemContent: FunctionComponent = ({

{story.title}

{story.description}

- +
+ +
);