@peers-app/peers-ui 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/tabs-layout/tabs-layout.js +10 -10
  2. package/package.json +3 -3
  3. package/src/tabs-layout/tabs-layout.tsx +11 -11
package/dist/tabs-layout/tabs-layout.js CHANGED
@@ -100,7 +100,7 @@ function TabsLayoutInternal() {
100
100
  sub = userContext.currentlyActiveGroupId.subscribe(async (groupId) => {
101
101
  setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
102
102
  // below reloading logic is a kludge to deal with different groups having different packages installed
103
- await (0, peers_sdk_1.sleep)(100);
103
+ await (0, peers_sdk_1.sleep)(250);
104
104
  window.location.reload();
105
105
  });
106
106
  });
@@ -177,28 +177,28 @@ function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }) {
177
177
  react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: '36px' } },
178
178
  react_1.default.createElement("i", { className: "bi-list" }),
179
179
  nonLauncherTabs.length > 0 && (react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length))),
180
- showMenuDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '250px' } },
181
- react_1.default.createElement("div", { className: `dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => {
180
+ showMenuDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '280px', maxHeight: 'calc(100vh - 60px)', overflowY: 'auto' } },
181
+ react_1.default.createElement("div", { className: `dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`, style: { cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }, onClick: () => {
182
182
  onSwitch('launcher');
183
183
  setShowMenuDropdown(false);
184
184
  } },
185
- react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-2" }),
185
+ react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: '20px' } }),
186
186
  react_1.default.createElement("span", null, "Apps")),
187
- react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer' }, onClick: () => {
187
+ react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }, onClick: () => {
188
188
  (0, command_palette_1.openCommandPalette)();
189
189
  setShowMenuDropdown(false);
190
190
  } },
191
- react_1.default.createElement("i", { className: "bi-search me-2" }),
191
+ react_1.default.createElement("i", { className: "bi-search me-3", style: { fontSize: '20px' } }),
192
192
  react_1.default.createElement("span", null, "Search")),
193
- nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider" })),
194
- nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("div", { key: tab.tabId, className: `dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => {
193
+ nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider", style: { margin: '8px 0' } })),
194
+ nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("div", { key: tab.tabId, className: `dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`, style: { cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }, onClick: () => {
195
195
  onSwitch(tab.tabId);
196
196
  setShowMenuDropdown(false);
197
197
  } },
198
198
  react_1.default.createElement("div", { className: "d-flex align-items-center" },
199
- tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` }),
199
+ tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-3`, style: { fontSize: '20px' } }),
200
200
  react_1.default.createElement("span", null, tab.title)),
201
- react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-2", style: { width: '20px', height: '20px' }, onClick: (e) => {
201
+ react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-3", style: { width: '32px', height: '32px', fontSize: '20px' }, onClick: (e) => {
202
202
  e.stopPropagation();
203
203
  onClose(tab.tabId);
204
204
  } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@peers-app/peers-ui",
3
- "version": "0.8.1",
3
+ "version": "0.8.3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "peerDependencies": {
29
29
  "bootstrap": "^5.3.3",
30
- "@peers-app/peers-sdk": "^0.8.1",
30
+ "@peers-app/peers-sdk": "^0.8.3",
31
31
  "react": "^18.0.0",
32
32
  "react-dom": "^18.0.0"
33
33
  },
@@ -57,7 +57,7 @@
57
57
  "jest": "^29.7.0",
58
58
  "jest-environment-jsdom": "^30.0.5",
59
59
  "path-browserify": "^1.0.1",
60
- "@peers-app/peers-sdk": "0.8.1",
60
+ "@peers-app/peers-sdk": "0.8.3",
61
61
  "react": "^18.0.0",
62
62
  "react-dom": "^18.0.0",
63
63
  "string-width": "^7.1.0",
package/src/tabs-layout/tabs-layout.tsx CHANGED
@@ -74,7 +74,7 @@ function TabsLayoutInternal() {
74
74
  sub = userContext.currentlyActiveGroupId.subscribe(async groupId => {
75
75
  setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
76
76
  // below reloading logic is a kludge to deal with different groups having different packages installed
77
- await sleep(100);
77
+ await sleep(250);
78
78
  window.location.reload();
79
79
  });
80
80
  });
@@ -252,37 +252,37 @@ function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }: Mob
252
252
  {showMenuDropdown && (
253
253
  <div
254
254
  className={`dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`}
255
- style={{ right: 0, top: '100%', zIndex: 1000, minWidth: '250px' }}
255
+ style={{ right: 0, top: '100%', zIndex: 1000, minWidth: '280px', maxHeight: 'calc(100vh - 60px)', overflowY: 'auto' }}
256
256
  >
257
257
  {/* Apps Option */}
258
258
  <div
259
259
  className={`dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`}
260
- style={{ cursor: 'pointer' }}
260
+ style={{ cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }}
261
261
  onClick={() => {
262
262
  onSwitch('launcher');
263
263
  setShowMenuDropdown(false);
264
264
  }}
265
265
  >
266
- <i className="bi-grid-3x3-gap me-2" />
266
+ <i className="bi-grid-3x3-gap me-3" style={{ fontSize: '20px' }} />
267
267
  <span>Apps</span>
268
268
  </div>
269
269
 
270
270
  {/* Search Option */}
271
271
  <div
272
272
  className="dropdown-item d-flex align-items-center"
273
- style={{ cursor: 'pointer' }}
273
+ style={{ cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }}
274
274
  onClick={() => {
275
275
  openCommandPalette();
276
276
  setShowMenuDropdown(false);
277
277
  }}
278
278
  >
279
- <i className="bi-search me-2" />
279
+ <i className="bi-search me-3" style={{ fontSize: '20px' }} />
280
280
  <span>Search</span>
281
281
  </div>
282
282
 
283
283
  {/* Divider if there are open tabs */}
284
284
  {nonLauncherTabs.length > 0 && (
285
- <div className="dropdown-divider" />
285
+ <div className="dropdown-divider" style={{ margin: '8px 0' }} />
286
286
  )}
287
287
 
288
288
  {/* Open Tabs */}
@@ -290,19 +290,19 @@ function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }: Mob
290
290
  <div
291
291
  key={tab.tabId}
292
292
  className={`dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`}
293
- style={{ cursor: 'pointer' }}
293
+ style={{ cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }}
294
294
  onClick={() => {
295
295
  onSwitch(tab.tabId);
296
296
  setShowMenuDropdown(false);
297
297
  }}
298
298
  >
299
299
  <div className="d-flex align-items-center">
300
- {tab.iconClassName && <i className={`${tab.iconClassName} me-2`} />}
300
+ {tab.iconClassName && <i className={`${tab.iconClassName} me-3`} style={{ fontSize: '20px' }} />}
301
301
  <span>{tab.title}</span>
302
302
  </div>
303
303
  <button
304
- className="btn btn-sm p-0 ms-2"
305
- style={{ width: '20px', height: '20px' }}
304
+ className="btn btn-sm p-0 ms-3"
305
+ style={{ width: '32px', height: '32px', fontSize: '20px' }}
306
306
  onClick={(e) => {
307
307
  e.stopPropagation();
308
308
  onClose(tab.tabId);