Skip to content

Commit

Permalink
[DDW-708] Fix Loading Screen icons (#1427)
Browse files Browse the repository at this point in the history
* [DDW-708] Loading Story

* [DDW-708] Fix icon sizes

* [DDW-708] Hide other Storybook stories

* [DDW-7080] Styling adjustments
  • Loading branch information
thedanheller committed Jun 24, 2019
1 parent 0483a28 commit 009056f
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 27 deletions.
6 changes: 3 additions & 3 deletions source/renderer/app/components/loading/Loading.scss
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@

.connecting,
.syncing {
bottom: 60px;
bottom: 64px;
position: absolute;
text-align: center;
width: 100%;
Expand Down Expand Up @@ -149,8 +149,8 @@ $adaLogoWidth: 43px;
}

.headline {
font-family: var(--font-light);
font-size: 16px;
font-family: var(--font-regular);
font-size: 18px;
}

.connecting {
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/loading/StatusIcons.js
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ export default class StatusIcon extends Component<Props> {
return classNames([
styles.icon,
styles[`icon-${status}`],
styles[`icon-${paramName}`],
isNodeSyncing ? styles.syncing : styles.loading,
]);
};
Expand Down
19 changes: 18 additions & 1 deletion source/renderer/app/components/loading/StatusIcons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,25 @@
width: 100%;

.icon {
height: 24px;
padding: 2px;
width: 24px;
svg {
height: 24px;
height: 20px;
width: 20px;
}
&.icon-nodeState {
padding-top: 0;
svg {
height: 22px;
}
}
&.icon-isNodeResponding {
padding: 3.2px 0 0;
svg {
height: 17.6px;
width: 24px;
}
}
}
}
Expand Down
79 changes: 79 additions & 0 deletions storybook/stories/Loading.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import {
withKnobs,
number,
boolean,
text,
select,
} from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

// Assets and helpers
import StoryDecorator from './support/StoryDecorator';

// Screens
import Loading from '../../source/renderer/app/components/loading/Loading';
import currencyIcon from '../../source/renderer/app/assets/images/ada-logo.inline.svg';
import apiIcon from '../../source/renderer/app/assets/images/cardano-logo.inline.svg';
import { CardanoNodeStates } from '../../source/common/types/cardano-node.types';

storiesOf('Loading', module)
.addDecorator((story, context) => (
<StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
))

// ====== Stories ======

.add('Default', () => (
<Loading
currencyIcon={currencyIcon}
apiIcon={apiIcon}
cardanoNodeState={select(
'cardanoNodeState',
CardanoNodeStates,
CardanoNodeStates.STARTING
)}
availableAppVersion={null}
hasBeenConnected={boolean('hasBeenConnected', true)}
isConnected={boolean('isConnected', true)}
isSynced={boolean('isSynced', true)}
isNodeStopping={boolean('isNodeStopping', false)}
isNodeStopped={boolean('isNodeStopped', false)}
isNotEnoughDiskSpace={boolean('isNotEnoughDiskSpace', false)}
isTlsCertInvalid={boolean('isTlsCertInvalid', false)}
diskSpaceRequired={`${text('diskSpaceRequired (GB)', 4)} GB`}
diskSpaceMissing={`${text('diskSpaceRequired (GB)', 1)} GB`}
diskSpaceRecommended={`${text('diskSpaceRequired (GB)', 8)} GB`}
syncPercentage={number('syncPercentage', 100)}
loadingDataForNextScreenMessage={{
id: 'loading.screen.loadingWalletData',
defaultMessage: '!!!Loading wallet data',
description: 'Message "Loading wallet data" on the loading screen.',
}}
hasLoadedCurrentLocale={boolean('hasLoadedCurrentLocale', true)}
hasLoadedCurrentTheme={boolean('hasLoadedCurrentTheme', true)}
localTimeDifference={number('localTimeDifference', 0)}
isSystemTimeCorrect={boolean('isSystemTimeCorrect', true)}
isCheckingSystemTime={boolean('isCheckingSystemTime', false)}
isNodeResponding={boolean('isNodeResponding', true)}
isNodeSubscribed={boolean('isNodeSubscribed', true)}
isNodeSyncing={boolean('isNodeSyncing', true)}
isNodeTimeCorrect={boolean('isNodeTimeCorrect', true)}
currentLocale="en-US"
currentAppVersion="1.1.1"
isNewAppVersionAvailable={boolean('isNewAppVersionAvailable', false)}
isNewAppVersionLoading={boolean('isNewAppVersionLoading', false)}
isNewAppVersionLoaded={boolean('isNewAppVersionLoaded', false)}
onExternalLinkClick={action('onExternalLinkClick')}
onReportIssueClick={action('onReportIssueClick')}
onCheckTheTimeAgain={action('onCheckTheTimeAgain')}
onContinueWithoutClockSyncCheck={action(
'onContinueWithoutClockSyncCheck'
)}
onDownloadLogs={action('onDownloadLogs')}
onGetAvailableVersions={action('onGetAvailableVersions')}
disableDownloadLogs={boolean('disableDownloadLogs', true)}
/>
));
49 changes: 26 additions & 23 deletions storybook/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,34 @@
import '../../source/renderer/app/themes/index.global.scss';
import './support/environment';

// Wallets
import './WalletScreens.stories';
import './WalletSummary.stories';
import './BlockConsolidationStatus.stories';
import './AddWallet.stories';
import './DeleteWalletConfirmationDialog.stories';
import './WalletTransactionsList.stories';
import './ExportWalletToFileDialog.stories';
import './PaperWallets.stories';
import './ManualUpdateOverlay.stories';
// // Wallets
// import './WalletScreens.stories';
// import './WalletSummary.stories';
// import './BlockConsolidationStatus.stories';
// import './AddWallet.stories';
// import './DeleteWalletConfirmationDialog.stories';
// import './WalletTransactionsList.stories';
// import './ExportWalletToFileDialog.stories';
// import './PaperWallets.stories';
// import './ManualUpdateOverlay.stories';

// Staking
import './Staking.stories';
// // Staking
// import './Staking.stories';

// Ada Redemption
import './AdaRedemptionDialog.stories';
// // Ada Redemption
// import './AdaRedemptionDialog.stories';

// Settings
import './LanguageSelectionForm.stories';
// // Settings
// import './LanguageSelectionForm.stories';

// Navigation
import './Sidebar.stories';
import './SidebarCategory.stories';
import './SidebarWalletsMenu.stories';
import './TopBar.stories';
// Loading
import './Loading.stories';

// Widgets
import './Widgets.stories';
// // Navigation
// import './Sidebar.stories';
// import './SidebarCategory.stories';
// import './SidebarWalletsMenu.stories';
// import './TopBar.stories';

// // Widgets
// import './Widgets.stories';

0 comments on commit 009056f

Please sign in to comment.