Page MenuHomePhabricator

D9891.diff
No OneTemporary

D9891.diff

diff --git a/web/settings/keyserver-selection-list-item.css b/web/settings/keyserver-selection-list-item.css
new file mode 100644
--- /dev/null
+++ b/web/settings/keyserver-selection-list-item.css
@@ -0,0 +1,15 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 0;
+}
+
+.container:not(:last-child) {
+ border-bottom: 1px solid var(--separator-background-primary-default);
+}
+
+.container:hover {
+ cursor: pointer;
+}
diff --git a/web/settings/keyserver-selection-list-item.react.js b/web/settings/keyserver-selection-list-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/keyserver-selection-list-item.react.js
@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+
+import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
+import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+import css from './keyserver-selection-list-item.css';
+import KeyserverPill from '../components/keyserver-pill.react.js';
+import StatusIndicator from '../components/status-indicator.react.js';
+
+type Props = {
+ +keyserverAdminUserInfo: GlobalAccountUserInfo,
+ +keyserverInfo: KeyserverInfo,
+};
+
+function KeyserverSelectionListItem(props: Props): React.Node {
+ const { keyserverAdminUserInfo, keyserverInfo } = props;
+
+ const keyserverSelectionListItem = React.useMemo(
+ () => (
+ <div className={css.container}>
+ <KeyserverPill
+ keyserverAdminUsername={keyserverAdminUserInfo.username}
+ />
+ <StatusIndicator connectionInfo={keyserverInfo.connection} />
+ </div>
+ ),
+ [keyserverAdminUserInfo.username, keyserverInfo.connection],
+ );
+
+ return keyserverSelectionListItem;
+}
+
+export default KeyserverSelectionListItem;

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 3:00 PM (21 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2590744
Default Alt Text
D9891.diff (1 KB)

Event Timeline