6 |
7 | # git-sketch-plugin
8 |
9 | [](https://github.com/mathieudutour/git-sketch-plugin/releases)
10 | [](http://bit.ly/SketchRunnerWebsite)
11 |
12 | A Git client built right into [Sketch](http://www.bohemiancoding.com/sketch). Generate [pretty diffs](https://github.com/mathieudutour/git-sketch-plugin/pull/1/files) so that everybody knows what are the changes!
13 |
14 | From ...
15 | 
16 |
17 | ... To
18 | 
19 |
20 | 
21 |
22 | ## Requirements
23 |
24 | - [Sketch](http://sketchapp.com/) >= 3.4 (**not** with the sandboxed version ie from the App Store).
25 | - [Git](https://git-scm.com/) (coming with OS X so you shouldn't have to do anything)
26 | - [Xcode Command Line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/)
27 |
28 | ## Installation
29 |
30 | ### From a release (simplest)
31 |
32 | - [Download](https://github.com/mathieudutour/git-sketch-plugin/releases/latest) the latest release of the plugin
33 | - Un-zip
34 | - Double-click on Git.sketchplugin
35 |
36 | ### From the sources
37 |
38 | - Clone the repo
39 | - Install the dependencies (`npm install`)
40 | - Build (`npm run build`)
41 | - Double-click on Git.sketchplugin
42 |
43 | ## Documentation
44 |
45 | For a Getting started guide, FAQ, etc. check out our [docs](https://github.com/mathieudutour/git-sketch-plugin/tree/master/docs)!
46 |
47 | ## Want to contribute?
48 |
49 | Anyone can help make this project better - check out our [Contributing guide](/.github/CONTRIBUTING.md)!
50 |
--------------------------------------------------------------------------------
/Resources/branches.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: -apple-system;
3 | background: white;
4 | padding-top: 20px;
5 | }
6 |
7 | .branch {
8 | opacity: 0.6;
9 | height: 25px;
10 | clear: both;
11 | }
12 |
13 | .branch.selected {
14 | opacity: 1;
15 | }
16 |
17 | .branch:hover {
18 | opacity: 1;
19 | }
20 |
21 | .name {
22 | cursor: pointer;
23 | }
24 |
25 | .delete {
26 | float: right;
27 | cursor: pointer;
28 | }
29 | .delete img {
30 | width: 15px;
31 | }
32 |
33 | .create {
34 | position: fixed;
35 | width: 100%;
36 | bottom: 0;
37 | left: 0;
38 | border: 0;
39 | border-radius: 0;
40 | height: 40px;
41 | background-image: linear-gradient(180deg, #8f779d, #613b75);
42 | color: white;
43 | letter-spacing: 0.3px;
44 | font-size: 13px;
45 | cursor: pointer;
46 | z-index: 1;
47 | }
48 |
49 | #container {
50 | margin-bottom: 70px;
51 | }
52 |
--------------------------------------------------------------------------------
/Resources/branches.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 | window.postMessage("checkoutBranch", name)}
14 | title="Switch to the branch"
15 | >
16 | {name}
17 |
18 | window.postMessage("deleteBranch", name)}
21 | >
22 | 
23 |
24 |
25 | );
26 | }
27 | }
28 |
29 | class Branches extends Component {
30 | constructor(props) {
31 | super(props);
32 | this.state = {
33 | branches: (window.branches || []).filter(x => x).map(cleanBranchName),
34 | currentBranch: cleanBranchName(window.currentBranch),
35 | ready: window.ready
36 | };
37 | if (!window.ready) {
38 | const interval = setInterval(() => {
39 | if (window.ready) {
40 | this.setState({
41 | branches: (window.branches || [])
42 | .filter(x => x)
43 | .map(cleanBranchName),
44 | currentBranch: cleanBranchName(window.currentBranch),
45 | ready: window.ready
46 | });
47 | clearInterval(interval);
48 | }
49 | }, 100);
50 | }
51 | }
52 |
53 | render(props, { ready, branches, currentBranch }) {
54 | return (
55 |
23 |
24 |
56 |
62 | {!ready && "loading..."}
63 | {(branches || []).map(name => (
64 |
67 | );
68 | }
69 | }
70 |
71 | render(
27 |
33 | {!ready && "loading..."}
34 |
118 | );
119 | }
120 | }
121 |
122 | render(Diffs preferences
35 |
36 |
39 |
45 |
46 |
47 |
48 |
54 |
55 |
56 |
57 |
68 |
69 |
70 |
76 |
80 |
81 |
82 |
88 |
92 |
93 |
94 |
100 |
104 |
105 | Miscellaneous
106 |
107 |
108 |
116 |
117 |