diff options
author | 2020-01-31 21:19:04 +0100 | |
---|---|---|
committer | 2020-01-31 21:19:04 +0100 | |
commit | b1325c57f380a2411ac669e33ce683c034ad99b5 (patch) | |
tree | d6c6293b1d0b1f6b4bd26dd4231f10c13ae6f2e5 /src/features/publishDebugInfo/Component.js | |
parent | Merge branch 'develop' into publish-debug (diff) | |
download | ferdium-app-b1325c57f380a2411ac669e33ce683c034ad99b5.tar.gz ferdium-app-b1325c57f380a2411ac669e33ce683c034ad99b5.tar.zst ferdium-app-b1325c57f380a2411ac669e33ce683c034ad99b5.zip |
Improve debugger feature
Diffstat (limited to 'src/features/publishDebugInfo/Component.js')
-rw-r--r-- | src/features/publishDebugInfo/Component.js | 85 |
1 files changed, 49 insertions, 36 deletions
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js index 9e59fa205..fbaa88a43 100644 --- a/src/features/publishDebugInfo/Component.js +++ b/src/features/publishDebugInfo/Component.js | |||
@@ -41,12 +41,15 @@ const messages = defineMessages({ | |||
41 | }); | 41 | }); |
42 | 42 | ||
43 | const styles = theme => ({ | 43 | const styles = theme => ({ |
44 | container: { | ||
45 | minWidth: '70vw', | ||
46 | }, | ||
44 | info: { | 47 | info: { |
45 | paddingTop: 20, | 48 | paddingTop: 20, |
46 | paddingBottom: 20, | 49 | paddingBottom: 20, |
47 | }, | 50 | }, |
48 | link: { | 51 | link: { |
49 | color: theme.styleTypes.primary.accent + ' !important', | 52 | color: `${theme.styleTypes.primary.accent} !important`, |
50 | padding: 10, | 53 | padding: 10, |
51 | cursor: 'pointer', | 54 | cursor: 'pointer', |
52 | }, | 55 | }, |
@@ -57,10 +60,18 @@ const styles = theme => ({ | |||
57 | }, | 60 | }, |
58 | url: { | 61 | url: { |
59 | marginTop: 20, | 62 | marginTop: 20, |
63 | width: '100%', | ||
60 | 64 | ||
61 | '& > div': { | 65 | '& div': { |
62 | fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | 66 | fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', |
63 | }, | 67 | }, |
68 | |||
69 | '& input': { | ||
70 | width: '100%', | ||
71 | padding: 15, | ||
72 | borderRadius: 6, | ||
73 | border: `solid 1px ${theme.styleTypes.primary.accent}`, | ||
74 | }, | ||
64 | }, | 75 | }, |
65 | }); | 76 | }); |
66 | 77 | ||
@@ -86,22 +97,22 @@ export default @injectSheet(styles) @inject('stores') @observer class PublishDeb | |||
86 | async publishDebugInfo() { | 97 | async publishDebugInfo() { |
87 | this.setState({ | 98 | this.setState({ |
88 | isSendingLog: true, | 99 | isSendingLog: true, |
89 | }) | 100 | }); |
90 | 101 | ||
91 | const debugInfo = JSON.stringify(this.props.stores.app.debugInfo); | 102 | const debugInfo = JSON.stringify(this.props.stores.app.debugInfo); |
92 | 103 | ||
93 | const request = await sendAuthRequest(`${DEBUG_API}/create`, { | 104 | const request = await sendAuthRequest(`${DEBUG_API}/create`, { |
94 | method: 'POST', | 105 | method: 'POST', |
95 | body: JSON.stringify({ | 106 | body: JSON.stringify({ |
96 | log: debugInfo | 107 | log: debugInfo, |
97 | }), | 108 | }), |
98 | }, false); | 109 | }, false); |
99 | const response = await request.json(); | 110 | const response = await request.json(); |
100 | console.log(response); | 111 | |
101 | if (response.id) { | 112 | if (response.id) { |
102 | this.setState({ | 113 | this.setState({ |
103 | log: response.id, | 114 | log: response.id, |
104 | }) | 115 | }); |
105 | } else { | 116 | } else { |
106 | // TODO: Show error message | 117 | // TODO: Show error message |
107 | this.close(); | 118 | this.close(); |
@@ -116,7 +127,7 @@ export default @injectSheet(styles) @inject('stores') @observer class PublishDeb | |||
116 | } = this.props; | 127 | } = this.props; |
117 | 128 | ||
118 | const { | 129 | const { |
119 | log | 130 | log, |
120 | } = this.state; | 131 | } = this.state; |
121 | 132 | ||
122 | const { intl } = this.context; | 133 | const { intl } = this.context; |
@@ -127,43 +138,45 @@ export default @injectSheet(styles) @inject('stores') @observer class PublishDeb | |||
127 | shouldCloseOnOverlayClick | 138 | shouldCloseOnOverlayClick |
128 | close={this.close.bind(this)} | 139 | close={this.close.bind(this)} |
129 | > | 140 | > |
130 | <H1> | 141 | <div className={classes.container}> |
131 | {intl.formatMessage(messages.title)} | 142 | <H1> |
132 | </H1> | 143 | {intl.formatMessage(messages.title)} |
133 | { log ? ( | 144 | </H1> |
134 | <> | 145 | { log ? ( |
135 | <p className={classes.info}>{intl.formatMessage(messages.published)}</p> | 146 | <> |
147 | <p className={classes.info}>{intl.formatMessage(messages.published)}</p> | ||
136 | <Input | 148 | <Input |
137 | className={classes.url} | 149 | className={classes.url} |
138 | showLabel={false} | 150 | showLabel={false} |
139 | field={{ | 151 | field={{ |
140 | type: 'url', | 152 | type: 'url', |
141 | value: DEBUG_API + '/' + log, | 153 | value: `${DEBUG_API}/${log}`, |
142 | disabled: true, | 154 | disabled: true, |
143 | }} | 155 | }} |
144 | readonly | 156 | readonly |
145 | /> | 157 | /> |
146 | </> | 158 | </> |
147 | ) : ( | 159 | ) : ( |
148 | <> | 160 | <> |
149 | <p className={classes.info}>{intl.formatMessage(messages.info)}</p> | 161 | <p className={classes.info}>{intl.formatMessage(messages.info)}</p> |
150 | 162 | ||
151 | <a href={ DEBUG_API + '/privacy.html' } target="_blank" className={classes.link}> | 163 | <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link}> |
152 | {intl.formatMessage(messages.privacy)} | 164 | {intl.formatMessage(messages.privacy)} |
153 | </a> | 165 | </a> |
154 | <a href={ DEBUG_API + '/terms.html' } target="_blank" className={classes.link}> | 166 | <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link}> |
155 | {intl.formatMessage(messages.terms)} | 167 | {intl.formatMessage(messages.terms)} |
156 | </a> | 168 | </a> |
157 | 169 | ||
158 | <Button | 170 | <Button |
159 | type="button" | 171 | type="button" |
160 | label={intl.formatMessage(messages.publish)} | 172 | label={intl.formatMessage(messages.publish)} |
161 | className={classes.button} | 173 | className={classes.button} |
162 | onClick={this.publishDebugInfo.bind(this)} | 174 | onClick={this.publishDebugInfo.bind(this)} |
163 | disabled={this.state.isSendingLog} | 175 | disabled={this.state.isSendingLog} |
164 | /> | 176 | /> |
165 | </> | 177 | </> |
166 | ) } | 178 | ) } |
179 | </div> | ||
167 | </Modal> | 180 | </Modal> |
168 | ); | 181 | ); |
169 | } | 182 | } |