Page MenuHomePhabricator
Files F3396441

D6812.diff
No OneTemporary
Actions

D6812.diff
View Options

diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -38,7 +38,7 @@
import InputStateContainer from './input/input-state-container.react.js';
import LoadingIndicator from './loading-indicator.react.js';
import { MenuProvider } from './menu-provider.react.js';
-import AppsDirectory from './modals/apps/apps-directory.react.js';
+import AppsDirectory from './modals/apps/apps-directory-modal.react.js';
import UpdateModalHandler from './modals/update-modal.react.js';
import SettingsSwitcher from './navigation-panels/settings-switcher.react.js';
import Topbar from './navigation-panels/topbar.react.js';
diff --git a/web/modals/apps/apps-directory.react.js b/web/modals/apps/apps-directory-modal.react.js
rename from web/modals/apps/apps-directory.react.js
rename to web/modals/apps/apps-directory-modal.react.js
--- a/web/modals/apps/apps-directory.react.js
+++ b/web/modals/apps/apps-directory-modal.react.js
@@ -3,8 +3,11 @@
import * as React from 'react';
import { useSelector } from 'react-redux';
-import AppListing from './app-listing.react.js';
-import css from './apps.css';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import AppListing from '../apps/app-listing.react.js';
+import css from '../apps/apps.css';
+import Modal from '../modal.react.js';
const APP_DIRECTORY_DATA = [
{
@@ -25,7 +28,9 @@
},
];
-function AppsDirectory(): React.Node {
+function AppsModal(): React.Node {
+ const { popModal } = useModalContext();
+
const enabledApps = useSelector(state => state.enabledApps);
const appData = React.useMemo(
@@ -46,11 +51,12 @@
);
return (
- <div className={css.appsDirectoryContainer}>
- <h4 className={css.appsHeader}>Choose Apps</h4>
- <div className={css.appsDirectoryList}>{appItems}</div>
- </div>
+ <Modal name="Choose apps" onClose={popModal} size="large">
+ <div className={css.appsDirectoryContainer}>
+ <div className={css.appsDirectoryList}>{appItems}</div>
+ </div>
+ </Modal>
);
}
-export default AppsDirectory;
+export default AppsModal;
diff --git a/web/modals/apps/apps.css b/web/modals/apps/apps.css
--- a/web/modals/apps/apps.css
+++ b/web/modals/apps/apps.css
@@ -1,7 +1,8 @@
div.appsDirectoryContainer {
display: flex;
flex-direction: column;
- align-items: flex-start;
+ padding-top: 34px;
+ padding-bottom: 16px;
}
h4.appsHeader {
@@ -11,17 +12,19 @@
}
div.appsDirectoryList {
- margin-left: 20px;
display: flex;
flex-direction: column;
- row-gap: 10px;
+ row-gap: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 32px;
}
div.appListingContainer {
color: var(--fg);
display: flex;
flex-direction: row;
- align-items: center;
+ align-items: space-between;
}
div.appListingTextContainer {
@@ -39,15 +42,15 @@
font-size: var(--xs-font-12);
}
-div.appListingIcon {
- padding: 0 20px;
+.appListingIcon {
+ padding: 0 20px 0 0;
align-self: stretch;
display: flex;
align-items: center;
}
.appListingIconState {
- padding: 0 20px;
+ padding: 0 0 0 20px;
font-size: var(--xl-font-20);
}
diff --git a/web/navigation-panels/topbar.react.js b/web/navigation-panels/topbar.react.js
--- a/web/navigation-panels/topbar.react.js
+++ b/web/navigation-panels/topbar.react.js
@@ -1,26 +1,22 @@
// @flow
import * as React from 'react';
-import { useDispatch } from 'react-redux';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import AppSwitcher from './app-switcher.react.js';
import css from './topbar.css';
import Button from '../components/button.react.js';
-import { updateNavInfoActionType } from '../redux/action-types.js';
+import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
function Topbar(): React.Node {
- const dispatch = useDispatch();
-
- const onClickApps = React.useCallback(() => {
- dispatch({
- type: updateNavInfoActionType,
- payload: {
- tab: 'apps',
- },
- });
- }, [dispatch]);
+ const { pushModal } = useModalContext();
+
+ const onClickApps = React.useCallback(
+ () => pushModal(<AppsDirectory />),
+ [pushModal],
+ );
const appNavigationItem = React.useMemo(
() => (

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 2, 12:21 PM (21 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2607581
Default Alt Text
D6812.diff (4 KB)

Event Timeline