Skip to content

Commit b847053

Browse files
author
James Baxley
committed
clean up some styles
1 parent eb358a5 commit b847053

File tree

11 files changed

+163
-33
lines changed

11 files changed

+163
-33
lines changed

‎shells/dev/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf8">
55
<title>Plain Shell</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,700|Source+Sans+Pro:300,300i,400,400i,600,700" rel="stylesheet">
78
<style>
89
#container {
910
display: flex;

‎shells/webextension/devtools.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
width: 100%;
1818
}
1919
</style>
20+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,700|Source+Sans+Pro:300,300i,400,400i,600,700" rel="stylesheet">
21+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/dracula.css" />
2022
</head>
2123
<body>
2224
<div id="container">

‎src/backend/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ let connected;
1212
const connect = () => {
1313
if (connected) return;
1414
connected = true;
15-
initLinkEvents(hook, bridge);
16-
initBroadCastEvents(hook, bridge);
15+
if (Number(hook.ApolloClient.version[0]) !== 1) {
16+
initLinkEvents(hook, bridge);
17+
initBroadCastEvents(hook, bridge);
18+
}
1719
bridge.log("backend ready.");
1820
bridge.send("ready", hook.ApolloClient.version);
1921
checkVersions(hook, bridge);

‎src/devtools/components/Explorer/Explorer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,10 +161,12 @@ export class Explorer extends Component {
161161

162162
render() {
163163
const { noFetch } = this.state;
164+
const { theme } = this.props;
164165
const graphiql = (
165166
<GraphiQL
166167
fetcher={this.fetcher}
167168
query={this.state.query}
169+
editorTheme={theme === "dark" ? "dracula" : "graphiql"}
168170
onEditQuery={() => {
169171
this.clearDefaultQueryState();
170172
}}

‎src/devtools/components/Explorer/graphiql-overrides.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
.dark {
2+
.graphiql-container {
3+
.topBar, .variable-editor-title {
4+
background-color: #21232b !important;
5+
color: white !important;
6+
}
7+
}
8+
}
19
.graphiql-container {
210
.CodeMirror pre {
311
font-size: 12px;
@@ -81,6 +89,7 @@
8189
background-color: #FBFBFB;
8290
border-bottom: none;
8391
padding: 5px 10px;
92+
8493
}
8594
}
8695

‎src/devtools/components/Inspector/Inspector.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export default class Inspector extends React.Component {
150150
<div className="inspector-panel body">
151151
<div className="inspector-body">
152152
<Sidebar className="inspector-sidebar" name="inspector-sidebar">
153-
<div className="inspector-sidebar-title">Apollo client state</div>
153+
<h4 className="inspector-sidebar-title">Cache</h4>
154154
<InspectorToolbar
155155
searchTerm={searchTerm}
156156
setSearchTerm={this.setSearchTerm}

‎src/devtools/components/Mutations/Mutations.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { GraphqlCodeBlock } from "graphql-syntax-highlighter-react";
99
import { Sidebar } from "../Sidebar";
1010
import Warning from "../Images/Warning";
1111

12-
import "./Mutations.less";
12+
import "../WatchedQueries/WatchedQueries.less";
1313

1414
const mutationLabel = (mutationId, mutation) => {
1515
const mutationName = getOperationName(parse(mutation.mutationString));
@@ -63,7 +63,7 @@ class Mutations extends React.Component {
6363
})}
6464
>
6565
<div className="item-row">
66-
<span>{mutationLabel(id, mutation)}</span>
66+
<h4>{mutationLabel(id, mutation)}</h4>
6767
{hasError && (
6868
<span className="error-icon">
6969
<Warning />
@@ -79,10 +79,10 @@ class Mutations extends React.Component {
7979

8080
const { selectedId } = this.state;
8181
return (
82-
<div className="mutations body">
82+
<div className="watchedQueries body">
8383
<Sidebar className="sidebar" name="watched-mutations-sidebar">
84-
<div className="mutations-sidebar-title">Mutation log</div>
85-
<ol className="mutation-list">
84+
<h4 className="queries-sidebar-title">Mutation log</h4>
85+
<ol className="queries-list">
8686
{this.sortedMutationIds().map(id =>
8787
this.renderSidebarItem(id, mutations[id]),
8888
)}

‎src/devtools/components/Panel.js‎

Lines changed: 102 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,92 @@ import WatchedQueries from "./WatchedQueries";
55
import Mutations from "./Mutations";
66
import Explorer from "./Explorer";
77
import Inspector from "./Inspector";
8-
import Logger from "./Logger";
98
import { Sidebar } from "./Sidebar";
109

1110
import Apollo from "./Images/Apollo";
1211
import GraphQL from "./Images/GraphQL";
13-
import Store from "./Images/Store";
12+
import Cache from "./Images/Store";
1413
import Queries from "./Images/Queries";
1514

1615
import "../style.less";
1716

17+
const Shell = ({ children }) => (
18+
<div
19+
style={{
20+
backgroundImage:
21+
"linear-gradient(174deg,#1c2945 0,#2d4d5a 54%,#436a75 81%,#448b8e 100%)",
22+
display: "flex",
23+
alignItems: "center",
24+
justifyContent: "center",
25+
position: "absolute",
26+
top: 0,
27+
bottom: 0,
28+
left: 0,
29+
right: 0,
30+
}}
31+
>
32+
<div style={{ maxWidth: "50%" }}>{children}</div>
33+
</div>
34+
);
35+
36+
const UpgradeNotice = ({ version }) => (
37+
<Shell>
38+
<h1 style={{ color: "white" }}>Your Apollo Client needs updating!</h1>
39+
<h3 style={{ color: "white" }}>
40+
We've detected your version of Apollo Client to be v{version}. The Apollo
41+
Devtools requires version 2.0.0 or greater. Luckily, upgrading is pretty
42+
painless and brings a whole bunch of new features! To learn how to
43+
upgrade, check out the migration guide{" "}
44+
<a
45+
style={{ color: "white" }}
46+
href="https://www.apollographql.com/docs/react/2.0-migration.html"
47+
target="_blank"
48+
>
49+
here!
50+
</a>
51+
</h3>
52+
<h3 style={{ color: "white" }}>
53+
To continue using the Devtools with v{version}, check out this guide to
54+
<a
55+
style={{ color: "white" }}
56+
href="https://github.com/apollographql/apollo-client-devtools#previous"
57+
target="_blank"
58+
>
59+
using the previous version
60+
</a>
61+
</h3>
62+
</Shell>
63+
);
64+
65+
const Loading = () => (
66+
<Shell>
67+
<h2 style={{ color: "white" }}>Connecting to Apollo Client...</h2>
68+
</Shell>
69+
);
70+
71+
const NotFound = () => (
72+
<Shell>
73+
<h1 style={{ color: "white" }}>
74+
We couldn't detect Apollo Client in your app!
75+
</h1>
76+
<h3 style={{ color: "white" }}>
77+
To use the Apollo Devtools, make sure that <code>connectToDevTools</code>{" "}
78+
is not disabled. To learn more about setting up Apollo Client to work with
79+
the Devtools, checkout this{" "}
80+
<a
81+
style={{ color: "white" }}
82+
href="https://github.com/apollographql/apollo-client-devtools#configuration"
83+
target="_blank"
84+
>
85+
link!
86+
</a>{" "}
87+
The Devtools are turned off by default when running in production. To
88+
manually turn them on, set <code>connectToDevTools</code> to be{" "}
89+
<code>true</code>
90+
</h3>
91+
</Shell>
92+
);
93+
1894
export default class Panel extends Component {
1995
constructor(props, context) {
2096
super(props, context);
@@ -24,13 +100,17 @@ export default class Panel extends Component {
24100
tabData: {},
25101
runQuery: undefined,
26102
runVariables: undefined,
27-
selectedRequestId: undefined,
103+
version: undefined,
28104
automaticallyRunQuery: undefined,
105+
// assume success
106+
notFound: false,
29107
};
30108

31-
this.props.bridge.on("ready", () => {
109+
this.props.bridge.on("ready", version => {
110+
this.setState({ version });
32111
this.props.bridge.send("panel:ready", "ready");
33112
});
113+
34114
this.props.bridge.on("broadcast:new", _data => {
35115
const data = JSON.parse(_data);
36116
this.setState(({ tabData }) => ({
@@ -39,8 +119,15 @@ export default class Panel extends Component {
39119
});
40120
}
41121

122+
componentDidMount() {
123+
this._timeout = setTimeout(() => {
124+
if (this.state.version) return;
125+
this.setState({ notFound: true });
126+
}, 10000);
127+
}
128+
42129
componentWillUnmount() {
43-
clearTimeout(this._interval);
130+
clearTimeout(this._timeout);
44131
}
45132

46133
onRun = (queryString, variables, tab, automaticallyRunQuery) => {
@@ -63,10 +150,11 @@ export default class Panel extends Component {
63150
});
64151
};
65152

66-
selectLogItem = id => this.setState({ selectedRequestId: id });
67-
68153
render() {
69-
const { active, tabData } = this.state;
154+
const { active, tabData, version, notFound } = this.state;
155+
if (notFound) return <NotFound />;
156+
if (!version) return <Loading />;
157+
if (Number(version[0]) === 1) return <UpgradeNotice version={version} />;
70158
let body;
71159
switch (active) {
72160
case "queries":
@@ -86,14 +174,7 @@ export default class Panel extends Component {
86174
query={this.state.runQuery}
87175
variables={this.state.runVariables}
88176
automaticallyRunQuery={this.state.automaticallyRunQuery}
89-
/>
90-
);
91-
break;
92-
case "logger":
93-
body = (
94-
<Logger
95-
onSelectLogItem={this.selectLogItem}
96-
selectedId={this.state.selectedRequestId}
177+
theme={this.props.theme}
97178
/>
98179
);
99180
break;
@@ -119,15 +200,15 @@ export default class Panel extends Component {
119200
onClick={() => this.switchPane("graphiql")}
120201
>
121202
<GraphQL />
122-
<div>GraphiQL</div>
203+
<h4>GraphiQL</h4>
123204
</div>
124205
<div
125206
title="Watched queries"
126207
className={classnames("tab", { active: active === "queries" })}
127208
onClick={() => this.switchPane("queries")}
128209
>
129210
<Queries />
130-
<div>Queries</div>
211+
<h4>Queries</h4>
131212
</div>
132213

133214
<div
@@ -136,15 +217,15 @@ export default class Panel extends Component {
136217
onClick={() => this.switchPane("mutations")}
137218
>
138219
<Queries />
139-
<div>Mutations</div>
220+
<h4>Mutations</h4>
140221
</div>
141222
<div
142223
title="Apollo client store"
143224
className={classnames("tab", { active: active === "store" })}
144225
onClick={() => this.switchPane("store")}
145226
>
146-
<Store />
147-
<div>Store</div>
227+
<Cache />
228+
<h4>Cache</h4>
148229
</div>
149230
</Sidebar>
150231
{body}

‎src/devtools/components/WatchedQueries/WatchedQueries.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ class WatchedQueries extends React.Component {
6363
})}
6464
>
6565
<div className="item-row">
66-
<span>{queryLabel(id, query)}</span>
66+
<h4>{queryLabel(id, query)}</h4>
6767
{hasError && (
6868
<span className="error-icon">
6969
<Warning />
@@ -80,7 +80,7 @@ class WatchedQueries extends React.Component {
8080
return (
8181
<div className="watchedQueries body">
8282
<Sidebar className="sidebar" name="watched-queries-sidebar">
83-
<div className="queries-sidebar-title">Watched queries</div>
83+
<h4 className="queries-sidebar-title">Watched queries</h4>
8484
<ol className="query-list">
8585
{this.sortedQueryIds().map(id =>
8686
this.renderSidebarItem(id, queries[id]),

‎src/devtools/components/WatchedQueries/WatchedQueries.less‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@
179179

180180
.panel-title {
181181
font-size: 14px;
182+
font-family: "Source Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
183+
182184
margin-bottom: 10px;
183185

184186
.loading-label {
@@ -234,6 +236,7 @@
234236

235237
.toggle {
236238
font-size: 12px;
239+
font-family: "Source Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
237240
font-weight: bold;
238241
cursor: pointer;
239242
display: block;
@@ -265,4 +268,8 @@
265268
.labeled {
266269
padding-left: 16px;
267270
}
271+
272+
td {
273+
font-family: "Source Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
274+
}
268275
}

0 commit comments

Comments
 (0)