Commit c0704603564bdacfa6c4af8906d51d6bd589ecd3
move progress notifier to top bar (over Patchwork logo)
Matt McKegg committed on 6/28/2017, 2:39:42 AMParent: f8bdee2684f2d8c6b83777a938fbac68a863bbf3
Files changed
main-window.js | changed |
modules/app/html/progress-notifier.js | changed |
styles/loading.mcss | changed |
styles/main-window.mcss | changed |
main-window.js | ||
---|---|---|
@@ -86,9 +86,12 @@ | ||
86 | 86 | tab('Public', '/public'), |
87 | 87 | tab('Private', '/private'), |
88 | 88 | tab('Gatherings', '/gatherings') |
89 | 89 | ]), |
90 | - h('span.appTitle', ['Patchwork']), | |
90 | + h('span.appTitle', [ | |
91 | + h('span.title', 'Patchwork'), | |
92 | + api.app.html.progressNotifier() | |
93 | + ]), | |
91 | 94 | h('span', [ api.app.html.search(api.app.navigate) ]), |
92 | 95 | h('span.nav', [ |
93 | 96 | tab('Profile', id), |
94 | 97 | tab('Mentions', '/mentions') |
@@ -101,9 +104,8 @@ | ||
101 | 104 | h('a.ignore', {'ev-click': latestUpdate.ignore}, 'X') |
102 | 105 | ]) |
103 | 106 | ]) |
104 | 107 | ), |
105 | - api.app.html.progressNotifier(), | |
106 | 108 | views.html |
107 | 109 | ]) |
108 | 110 | |
109 | 111 | catchLinks(container, (href, external) => { |
modules/app/html/progress-notifier.js | ||
---|---|---|
@@ -43,13 +43,13 @@ | ||
43 | 43 | return h('div.info', { hidden }, [ |
44 | 44 | h('div.status', [ |
45 | 45 | when(displaying, h('Loading -small', [ |
46 | 46 | when(pendingMigration, |
47 | - ['Upgrading database', h('progress', { style: {'margin-left': '10px'}, min: 0, max: 1, value: migrationProgress })], | |
47 | + [h('span.info', 'Upgrading database'), h('progress', { style: {'margin-left': '10px'}, min: 0, max: 1, value: migrationProgress })], | |
48 | 48 | when(computed(replicateProgress.incompleteFeeds, (v) => v > 5), |
49 | - ['Downloading new messages', h('progress', { style: {'margin-left': '10px'}, min: 0, max: 1, value: downloadProgress })], | |
49 | + [h('span.info', 'Downloading new messages'), h('progress', { style: {'margin-left': '10px'}, min: 0, max: 1, value: downloadProgress })], | |
50 | 50 | when(pending, [ |
51 | - ['Indexing database', h('progress', { style: {'margin-left': '10px'}, min: 0, max: 1, value: indexProgress })] | |
51 | + [h('span.info', 'Indexing database'), h('progress', { style: {'margin-left': '10px'}, min: 0, max: 1, value: indexProgress })] | |
52 | 52 | ], 'Scuttling...') |
53 | 53 | ) |
54 | 54 | ) |
55 | 55 | ])) |
styles/loading.mcss | ||
---|---|---|
@@ -2,9 +2,16 @@ | ||
2 | 2 | height: 25% |
3 | 3 | display: flex |
4 | 4 | align-items: center |
5 | 5 | justify-content: center |
6 | + whitespace: no-wrap | |
6 | 7 | |
8 | + span.info { | |
9 | + overflow: hidden | |
10 | + white-space: nowrap | |
11 | + text-overflow: ellipsis | |
12 | + } | |
13 | + | |
7 | 14 | -inline { |
8 | 15 | height: 16px |
9 | 16 | width: 16px |
10 | 17 | display: inline-block |
styles/main-window.mcss | ||
---|---|---|
@@ -129,8 +129,29 @@ | ||
129 | 129 | color: #757575; |
130 | 130 | letter-spacing: 1px; |
131 | 131 | font-weight: 200; |
132 | 132 | -webkit-app-region: drag; |
133 | + position: relative | |
134 | + | |
135 | + div.info { | |
136 | + display: block | |
137 | + position: absolute; | |
138 | + top: 0; | |
139 | + bottom: 0; | |
140 | + left: 0; | |
141 | + right: 0; | |
142 | + background: white; | |
143 | + margin-top: -3px; | |
144 | + opacity: 1; | |
145 | + transition: opacity 0.1s; | |
146 | + max-height: 25px; | |
147 | + padding: 0 10px; | |
148 | + font-size: 13px; | |
149 | + letter-spacing: 0; | |
150 | + [hidden] { | |
151 | + opacity: 0 | |
152 | + } | |
153 | + } | |
133 | 154 | } |
134 | 155 | } |
135 | 156 | |
136 | 157 | div.info { |
Built with git-ssb-web