Skip to content

Add option to inject custom CSS #1193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Mar 23, 2018
Merged

Add option to inject custom CSS #1193

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
49a3aa2
Initial feature commit
Mar 20, 2018
bcbaa25
minor fix to pass test
Mar 20, 2018
021629d
work on suggestions
Mar 20, 2018
14ab72a
work on suggestions again
Mar 20, 2018
0ba851d
Use GitHub's font stack for textareas
Mar 20, 2018
52d3054
Remove quotes around font name to pass Travis CI test
Mar 21, 2018
07ab057
Shorten; use DOM4
fregante Mar 23, 2018
74efd0f
Align checkbox correctly
fregante Mar 23, 2018
85fcf6c
Allow more text in the textareas
fregante Mar 23, 2018
781a907
Improve/shorten copy
fregante Mar 23, 2018
d681461
Indent with tab in the CSS box
fregante Mar 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion source/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ import monospaceTextareas from './features/monospace-textareas';
import improveShortcutHelp from './features/improve-shortcut-help';

import * as pageDetect from './libs/page-detect';
import {safeElementReady, enableFeature} from './libs/utils';
import {safeElementReady, enableFeature, injectCustomCSS} from './libs/utils';
import observeEl from './libs/simplified-element-observer';

// Add globals for easier debugging
Expand All @@ -97,6 +97,8 @@ async function init() {

document.documentElement.classList.add('refined-github');

injectCustomCSS();

if (!pageDetect.isGist()) {
enableFeature(addTrendingMenuItem);
}
Expand Down
11 changes: 11 additions & 0 deletions source/libs/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {h} from 'dom-chef';
import select from 'select-dom';
import onetime from 'onetime';
import domLoaded from 'dom-loaded';
Expand Down Expand Up @@ -134,3 +135,13 @@ export const anySelector = selector => {
const prefix = document.head.style.MozOrient === '' ? 'moz' : 'webkit';
return selector.replace(/:any\(/g, `:-${prefix}-any(`);
};

export const injectCustomCSS = async () => {
const {customCSS = ''} = await options;

Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if customCSS === '', return

document.head.appendChild(
<style class="rgh-custom-styles">
{customCSS}
</style>
);
};
16 changes: 16 additions & 0 deletions source/options.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,28 @@ body {
min-width: 400px; /* Required to size the Browser Action popup */
}
textarea {
display: block;
width: 100%;
font-family: monospace !important;
font-size: 12px;
line-height: 1.5;
resize: vertical;
}
label {
display: flex;
align-items: center;
}
Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⬆️❓

Copy link
Author

@ramlmn ramlmn Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before After
image image

Just some vertical alignment!

Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vertical-alignment: ---px on the checkbox

label span {
margin-left: 0.5em;
}
.small {
font-size: 0.9em;
}

p {
margin: 0 0 1em;
}
Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin-bottom already seems to be 1em and I think margin-top looks better at 1em (default)

Copy link
Author

@ramlmn ramlmn Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As you know vertical margins do collapse, and margin-top of 0 makes h2 elements and p to be closer, making more content fit in view.

Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then we only need margin-top: 0


/* Increase spacing between sections */
h2 ~ h2 {
margin-top: 2em;
Expand Down
16 changes: 12 additions & 4 deletions source/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,25 @@ <h2>Disable features</h2>
<p>
List the features to disable, by <a href="https://github.com/sindresorhus/refined-github/tree/master/source/features" target="_blank">filename</a>. Enable logging to show in the console what features are enabled on each page.
</p>
<p class="small">
<textarea name="disabledFeatures" rows="3" placeholder="For example: &#10;mark-unread hide-own-stars"></textarea> <br>
<strong>Notice:</strong> Mostly untested; only JavaScript-based features can be disabled.
<p>
<textarea name="disabledFeatures" rows="3" placeholder="For example: &#10;mark-unread hide-own-stars"></textarea>
Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

<div class="small">
<strong>Notice:</strong> Mostly untested; only JavaScript-based features can be disabled.
</div>
Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem necessary. Also p>div isn't valid HTML

Copy link
Author

@ramlmn ramlmn Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having class .small for p is of no use as textarea gets an exclusive font-size of 12px, but mostly a WIP.

</p>
<p>
<label>
<input type="checkbox" name="logging">
Enable logging
<span>Enable logging</span>
Copy link
Member

@fregante fregante Mar 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nor does this. If you want to add spacing you can add margin-right to input[type='checkbox']

</label>
</p>

<h2>Custom CSS</h2>
<p>Write your custom CSS to override Refined GitHub's default styles.</p>
<p>
<textarea name="customCSS" rows="5"></textarea>
</p>

<h2>More features</h2>
<p>
Want more? Check out our <a href="https://github.com/sindresorhus/refined-github#related" target="_blank">related GitHub extensions</a>
Expand Down