Commit 232d1b421613d81a3488bf7c5cfd585639edb91b
add "More" nav menu, move gatherings and others in here
Matt McKegg committed on 6/29/2017, 2:31:25 AMParent: 652c6133c026281265b284256390a078fd7279c7
Files changed
| main-window.js | changed |
| styles/main-window.mcss | changed |
| main-window.js | ||
|---|---|---|
| @@ -53,9 +53,9 @@ | ||
| 53 | 53 | }) |
| 54 | 54 | }) |
| 55 | 55 | |
| 56 | 56 | var views = api.app.views(api.page.html.render, [ |
| 57 | - '/public', '/private', '/gatherings', id, '/mentions' | |
| 57 | + '/public', '/private', id, '/mentions' | |
| 58 | 58 | ]) |
| 59 | 59 | |
| 60 | 60 | var pendingCount = computed([ |
| 61 | 61 | views.get('/public').pendingUpdates, |
| @@ -84,9 +84,13 @@ | ||
| 84 | 84 | ]), |
| 85 | 85 | h('span.nav', [ |
| 86 | 86 | tab('Public', '/public'), |
| 87 | 87 | tab('Private', '/private'), |
| 88 | - tab('Gatherings', '/gatherings') | |
| 88 | + dropTab('More', [ | |
| 89 | + ['Channels', '/channels'], | |
| 90 | + ['Gatherings', '/gatherings'], | |
| 91 | + ['Extended Network', '/all'], | |
| 92 | + ]) | |
| 89 | 93 | ]), |
| 90 | 94 | h('span.appTitle', [ |
| 91 | 95 | h('span.title', 'Patchwork'), |
| 92 | 96 | api.app.html.progressNotifier() |
| @@ -130,8 +134,33 @@ | ||
| 130 | 134 | return container |
| 131 | 135 | |
| 132 | 136 | // scoped |
| 133 | 137 | |
| 138 | + function dropTab (title, items) { | |
| 139 | + var menu = electron.remote.Menu.buildFromTemplate(items.map(item => { | |
| 140 | + return { | |
| 141 | + label: item[0], | |
| 142 | + click () { | |
| 143 | + setView(item[1]) | |
| 144 | + } | |
| 145 | + } | |
| 146 | + })) | |
| 147 | + | |
| 148 | + var element = h('a -drop', { | |
| 149 | + 'ev-click': (ev) => { | |
| 150 | + var rects = element.getBoundingClientRect() | |
| 151 | + electron.remote.getCurrentWindow().webContents.getZoomFactor((factor) => { | |
| 152 | + menu.popup(electron.remote.getCurrentWindow(), { | |
| 153 | + x: Math.round(rects.left * factor), | |
| 154 | + y: Math.round(rects.bottom * factor) + 4, | |
| 155 | + async: true | |
| 156 | + }) | |
| 157 | + }) | |
| 158 | + } | |
| 159 | + }, title) | |
| 160 | + return element | |
| 161 | + } | |
| 162 | + | |
| 134 | 163 | function setView (href) { |
| 135 | 164 | views.setView(href) |
| 136 | 165 | } |
| 137 | 166 | |
| styles/main-window.mcss | ||
|---|---|---|
| @@ -103,8 +103,26 @@ | ||
| 103 | 103 | background: #d2d2d2 |
| 104 | 104 | } |
| 105 | 105 | } |
| 106 | 106 | |
| 107 | + -drop { | |
| 108 | + | |
| 109 | + :after { | |
| 110 | + background-image: svg(dropArrow) | |
| 111 | + background-repeat: no-repeat; | |
| 112 | + background-position: center right; | |
| 113 | + width: 10px; | |
| 114 | + height: 14px; | |
| 115 | + display: inline-block; | |
| 116 | + content: ' '; | |
| 117 | + margin-left: 6px; | |
| 118 | + margin-right: -6px; | |
| 119 | + border-left: 1px solid #d2d2d2; | |
| 120 | + padding-left: 5px; | |
| 121 | + margin-bottom: -2px; | |
| 122 | + } | |
| 123 | + } | |
| 124 | + | |
| 107 | 125 | -add { |
| 108 | 126 | border-color: #498849 |
| 109 | 127 | background-color: #255D24 |
| 110 | 128 | text-shadow: 1px 1px 1px #000 |
| @@ -261,4 +279,20 @@ | ||
| 261 | 279 | 100% { |
| 262 | 280 | max-height: 100px |
| 263 | 281 | } |
| 264 | 282 | } |
| 283 | + | |
| 284 | +@svg dropArrow { | |
| 285 | + width: 12px | |
| 286 | + height: 6px | |
| 287 | + content: "<path d='M2,0 L10,0 L6,6 Z' />" | |
| 288 | + | |
| 289 | + path { | |
| 290 | + fill: #888 | |
| 291 | + } | |
| 292 | + | |
| 293 | + -active { | |
| 294 | + path { | |
| 295 | + fill: #DDD | |
| 296 | + } | |
| 297 | + } | |
| 298 | +} | |
Built with git-ssb-web