Improve styles and add setting description to README

This commit is contained in:
Buu Nguyen 2015-11-15 10:40:54 -08:00
parent 50fea8ad0f
commit b3d0088903
7 changed files with 57 additions and 19 deletions

View File

@ -19,11 +19,11 @@ The prebuilt packages for all extensions are located in the [dist](https://gith
* Safari: drag `safari.safariextz` to the browser and follow on-screen the instructions
__Note__: the Safari build is out of date with the main line because Apple wants to be the only company who forces open-source developers to [pay](http://gizmodo.com/apples-great-new-developer-program-screws-over-safari-d-1710539882) for the privillege of creating free extensions for their little-used browser.
__Note__: the Safari build is out of date with the main line because Apple wants to be the only company who forces open-source developers to [pay](http://gizmodo.com/apples-great-new-developer-program-screws-over-safari-d-1710539882) for the privilege of creating extensions for their little-used browser.
## Access token
### GitHub
## Octotree Settings
### Access Token
#### GitHub
Octotree uses [GitHub API](https://developer.github.com/v3/) to retrieve repository metadata. By default, it makes unauthenticated requests to the GitHub API. However, there are two situations when requests must be authenticated:
* You access a private repository
@ -31,26 +31,31 @@ Octotree uses [GitHub API](https://developer.github.com/v3/) to retrieve reposit
When that happens, Octotree will ask for your [GitHub personal access token](https://help.github.com/articles/creating-an-access-token-for-command-line-use). If you don't already have one, [create one](https://github.com/settings/tokens/new), then copy and paste it into the textbox. Note that the minimal scopes that should be granted are `public_repo` and `repo` (if you need access to private repositories).
### GitLab
#### GitLab
Octotree uses [GitLab API](http://doc.gitlab.com/ce/api/) to retrieve repository metadata. By default, Octotree attempts to retrieve the access token embedded in the GitLab DOM and use the token to authenticate against the GitLab API. If Octotree cannot retrieve the token, it will prompt you to [create one](https://gitlab.com/profile/account).
## Enterprise deployment
### Enterprise URLs
By default, Octotree only works on `github.com` and `gitlab.com`. To support enterprise version on Chrome and Opera, you must grant Octotree sufficient permissions. Follow these steps to do so:
* Navigate to any GitHub or GitLab repository
* Open Octotree's settings panel
* Fill in the Enterprise URLs textbox, one URL per line
* Fill in the Enterprise URLs textbox, _one URL per line_
* Click Save and accept any permission prompt
* Navigate to your GitHub or GitLab Enterprise site
* You might be asked to create an [access token](#access-token)
### Other Settings
* __Hotkeys__: Octotree uses [keymaster](https://github.com/madrobby/keymaster) to register hotkeys. Checkout the [supported keys](https://github.com/madrobby/keymaster#supported-keys).
* __Remember sidebar visibility__: if checked, will show or hide Octotree based on its previous visibility.
* __Show in non-code pages__: if checked, allow Octotree to show in non-code pages such as Issues and Pull Requests.
* __Load entire tree at once__: if checked, will issue a single API request to load the entire code tree. Could be slow in very large repos, in which case this option should be unchecked.
## Changelog
### v2.0.0
* Support GitLab
* Support lazy-load individual folder (GitHub only)
* Add ability to lazy-load individual folders
* Simplify Octotree options
* Support selecting different options for each host

View File

@ -177,9 +177,12 @@ function buildJs(overrides, ctx) {
}
function buildTemplate(ctx) {
const LOTS_OF_SPACES = new Array(500).join(' ')
return pipe(
'./src/template.html',
$.preprocess({context: ctx}),
$.replace('__SPACES__', LOTS_OF_SPACES),
html2js('const TEMPLATE = \'$$\''),
'./tmp'
)

View File

@ -34,6 +34,7 @@
"gulp-mocha": "2.0.0",
"gulp-preprocess": "^1.1.1",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.4",
"gulp-run": "^1.6.4",
"gulp-run-sequence": "*",
"gulp-util": "^2.2.20",

View File

@ -33,6 +33,16 @@
background-repeat: repeat-x;
border-bottom: 1px solid #e5e5e5;
}
.octotree_help {
& > span {
font: normal normal 15px octicons;
color: black;
}
& > span:before {
content: '\f02c';
}
}
}
.octotree_treeview {
@ -61,7 +71,7 @@
}
.jstree-node.jstree-leaf:hover {
.jstree-icon.blob:before {
content: '\f00b';
content: '\f0dc';
}
}
.jstree-icon.commit:before {
@ -97,14 +107,14 @@
}
a.octotree_opts {
top: 18px;
top: 16px;
right: 42px;
& > span {
font: normal normal 12px octicons;
font: normal normal 15px octicons;
}
& > span:before {
content: '\f031';
content: '\f02f';
}
}

View File

@ -35,6 +35,16 @@
background-color: #f7f8fa;
border-bottom: 1px solid #dce0e6;
}
.octotree_help {
& > span {
font: normal normal 15px FontAwesome;
color: black;
}
& > span:before {
content: '\f059';
}
}
}
.octotree_treeview {
@ -96,14 +106,14 @@
}
a.octotree_opts {
top: 22px;
top: 21px;
right: 42px;
& > span {
font: normal normal 16px FontAwesome;
}
& > span:before {
content: '\f0ad';
content: '\f013';
}
&:hover, &.selected {
color: #4183C4 !important;

View File

@ -30,9 +30,11 @@
.octotree_view {
display: none;
&.current {
display: block;
}
.octotree_view_header {
width: 100%;
position: absolute;
@ -44,6 +46,12 @@
text-shadow: 0 1px 0 #fff;
z-index: 1000002;
}
.octotree_help {
outline: 0;
cursor: pointer;
text-decoration: none;
}
}
.octotree_treeview {

View File

@ -28,14 +28,15 @@
<form class="octotree_view_body">
<div>
<label>Site access token</label>
<a href="https://github.com/buunguyen/octotree#access-token" target="_blank" tabIndex="-1">what's this?</a>
<a class="octotree_help" href="https://github.com/buunguyen/octotree#octotree-settings" target="_blank" tabIndex="-1">
<span></span>
</a>
<input type="text" data-store="TOKEN" data-perhost="true">
</div>
<div>
<div>
<label>Hotkeys</label>
<a href="https://github.com/madrobby/keymaster#defining-shortcuts" target="_blank" tabIndex="-1">supported keys</a>
</div>
<input type="text" data-store="HOTKEYS">
</div>
@ -45,7 +46,7 @@
<div>
<label>GitHub Enterprise URLs</label>
</div>
<textarea data-store="GHEURLS" placeholder="https://github.mysite1.com/ https://github.mysite2.com/">
<textarea data-store="GHEURLS" placeholder="https://github.mysite1.com/__SPACES__https://github.mysite2.com/">
</textarea>
</div>
@ -53,7 +54,7 @@
<div>
<label>GitLab Enterprise URLs</label>
</div>
<textarea data-store="GLEURLS" placeholder="https://gitlab.mysite1.com/ https://gitlab.mysite2.com/">
<textarea data-store="GLEURLS" placeholder="https://gitlab.mysite1.com/__SPACES__https://gitlab.mysite2.com/">
</textarea>
</div>
<!-- @endif -->