github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-02-14 18:09:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Load up fa5 instead of 4

Browse Source 
- Switch to fa5 icons and tweak font-sizes a bit
This commit is contained in:
Simon Howe
2018-11-13 12:43:19 +01:00
parent 730d5e3b62
commit d3a36cf873
28 changed files with 63 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/.gitignore vendored
View File

@@ -1,5 +1,6 @@
node_modules
build/
build-external/
coverage/
test/*png
weave-scope.tgz

3
client/app/scripts/charts/nodes-error.js
View File

@@ -7,13 +7,12 @@ const NodesError = ({
const className = classnames(mainClassName, {
hide: hidden
});
const iconClassName = `fa ${faIconClass}`;
return (
<div className={className}>
<div className="nodes-chart-error-icon-container">
<div className="nodes-chart-error-icon">
<span className={iconClassName} />
<span className={faIconClass} />
</div>
</div>
{children}

2
client/app/scripts/components/footer.js
View File

@@ -74,7 +74,7 @@ class Footer extends React.Component {
className="footer-icon"
onClick={this.handleRelayoutClick}
title={forceRelayoutTitle}>
<span className="fa fa-refresh" />
<span className="fa fa-sync" />
</button>
<button onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
<span className="fa fa-adjust" />

2
client/app/scripts/components/help-panel.js
View File

@@ -174,7 +174,7 @@ function HelpPanel({
<div className="help-panel-tools">
<span
title="Close details"
className="fa fa-close"
className="fa fa-times"
onClick={onClickClose}
/>
</div>

2
client/app/scripts/components/loading.js
View File

@@ -48,7 +48,7 @@ export class Loading extends React.Component {
const { itemType, show } = this.props;
const message = renderTemplate(itemType, this.state.template);
return (
<NodesError mainClassName="nodes-chart-loading" faIconClass="fa-circle-thin" hidden={!show}>
<NodesError mainClassName="nodes-chart-loading" faIconClass="far fa-circle" hidden={!show}>
<div className="heading">{message}</div>
</NodesError>
);

2
client/app/scripts/components/metric-selector-item.js
View File

@@ -58,7 +58,7 @@ class MetricSelectorItem extends React.Component {
onMouseOver={this.onMouseOver}
onClick={this.onMouseClick}>
{type}
{isPinned && <span className="fa fa-thumb-tack" />}
{isPinned && <span className="fa fa-thumbtack" />}
</div>
);
}

2
client/app/scripts/components/network-selector-item.js
View File

@@ -49,7 +49,7 @@ class NetworkSelectorItem extends React.Component {
onClick={this.onMouseClick}
style={style}>
{network.get('label')}
{isPinned && <span className="fa fa-thumb-tack" />}
{isPinned && <span className="fa fa-thumbtack" />}
</div>
);
}

6
client/app/scripts/components/node-details.js
View File

@@ -59,14 +59,14 @@ class NodeDetails extends React.Component {
{showSwitchTopology &&
<span
title={topologyTitle}
className="fa fa-long-arrow-left"
className="fa fa-long-arrow-alt-left"
onClick={this.handleShowTopologyForNode}>
<span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
</span>
}
<span
title="Close details"
className="fa fa-close close-details"
className="fa fa-times close-details"
onClick={this.handleClickClose}
/>
</div>
@@ -80,7 +80,7 @@ class NodeDetails extends React.Component {
// NOTE: If we start the fa-spin animation before the node details panel has been
// mounted, the spinner is displayed blurred the whole time in Chrome (possibly
// caused by a bug having to do with animating the details panel).
const spinnerClassName = classNames('fa fa-circle-o-notch', { 'fa-spin': this.props.mounted });
const spinnerClassName = classNames('fa fa-circle-notch', { 'fa-spin': this.props.mounted });
const nodeColor = (node ?
getNodeColorDark(node.get('rank'), label, node.get('pseudo')) :
getNeutralColor());

13
client/app/scripts/components/node-details/node-details-control-button.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { trackAnalyticsEvent } from '../../utils/tracking-utils';
import { doControl } from '../../actions/app-actions';
@@ -11,12 +12,14 @@ class NodeDetailsControlButton extends React.Component {
}
render() {
let className = `tour-step-anchor node-control-button fa ${this.props.control.icon}`;
if (this.props.pending) {
className += ' node-control-button-pending';
}
const { icon, human } = this.props.control;
const className = classNames('tour-step-anchor node-control-button', icon, {
'node-control-button-pending': this.props.pending,
// TODO: remove this at some point. This BE will start providing the 'fa ' classname.
fa: icon.startsWith('fa-')
});
return (
<span className={className} title={this.props.control.human} onClick={this.handleClick} />
<span className={className} title={human} onClick={this.handleClick} />
);
}

4
client/app/scripts/components/node-details/node-details-controls.js
View File

@@ -6,7 +6,7 @@ import NodeDetailsControlButton from './node-details-control-button';
export default function NodeDetailsControls({
controls, error, nodeId, pending
}) {
let spinnerClassName = 'fa fa-circle-o-notch fa-spin';
let spinnerClassName = 'fa fa-circle-notch fa-spin';
if (pending) {
spinnerClassName += ' node-details-controls-spinner';
} else {
@@ -17,7 +17,7 @@ export default function NodeDetailsControls({
<div className="node-details-controls">
{error &&
<div className="node-details-controls-error" title={error}>
<span className="node-details-controls-error-icon fa fa-warning" />
<span className="node-details-controls-error-icon fa fa-exclamation-triangle" />
<span className="node-details-controls-error-messages">{error}</span>
</div>
}

2
client/app/scripts/components/nodes.js
View File

@@ -42,7 +42,7 @@ class Nodes extends React.Component {
const { topologyNodeCountZero, nodesDisplayEmpty } = this.props;
return (
<NodesError faIconClass="fa-circle-thin" hidden={!nodesDisplayEmpty}>
<NodesError faIconClass="far fa-circle" hidden={!nodesDisplayEmpty}>
<div className="heading">Nothing to show. This can have any of these reasons:</div>
{topologyNodeCountZero ?
renderCauses(NODES_STATS_COUNT_ZERO_CAUSES) :

2
client/app/scripts/components/terminal.js
View File

@@ -269,7 +269,7 @@ class Terminal extends React.Component {
</span>
<span
title="Close"
className="terminal-header-tools-item-icon fa fa-close"
className="terminal-header-tools-item-icon fa fa-times"
onClick={this.handleCloseClick} />
</div>
{this.getControlStatusIcon()}

2
client/app/scripts/components/troubleshooting-menu.js
View File

@@ -79,7 +79,7 @@ class DebugMenu extends React.Component {
<div className="help-panel-tools">
<span
title="Close menu"
className="fa fa-close"
className="fa fa-times"
onClick={this.props.toggleTroubleshootingMenu}
/>
</div>

2
client/app/scripts/components/view-mode-button.js
View File

@@ -35,7 +35,7 @@ class ViewModeButton extends React.Component {
disabled={disabled}
onClick={!disabled ? this.handleClick : undefined}
title={`View ${label.toLowerCase()}`}>
<span className={this.props.icons} style={{ fontSize: 12 }} />
<span className={this.props.icons} />
<span className="label">{label}</span>
</div>
);

2
client/app/scripts/components/view-mode-selector.js
View File

@@ -41,7 +41,7 @@ class ViewModeSelector extends React.Component {
/>
<ViewModeButton
label="Resources"
icons="fa fa-bar-chart"
icons="fa fa-chart-bar"
viewMode={RESOURCE_VIEW_MODE}
onClick={this.props.setResourceView}
disabled={!this.props.hasResourceView}

2
client/app/scripts/components/warning.js
View File

@@ -27,7 +27,7 @@ class Warning extends React.Component {
return (
<div className={className} onClick={this.handleClick}>
<div className="warning-wrapper">
<span className="warning-icon fa fa-warning" title={text} />
<span className="warning-icon fa fa-exclamation-triangle" title={text} />
{expanded && <span className="warning-text">{text}</span>}
</div>
</div>

12
client/app/styles/_base.scss
View File

@@ -1,4 +1,4 @@
@import '~font-awesome/scss/font-awesome.scss';
@import '~@fortawesome/fontawesome-free/css/all.css';
@import '~rc-slider/dist/rc-slider.css';
/* sass-lint:disable variable-for-property */
@@ -122,7 +122,7 @@ a {
outline: 0;
.fa {
font-size: $font-size-normal;
font-size: $font-size-small;
position: relative;
top: 2px;
}
@@ -634,6 +634,7 @@ a {
&-controls {
white-space: nowrap;
padding: 8px 0;
font-size: $font-size-small;
&-wrapper {
padding: 0 36px 0 32px;
@@ -997,7 +998,7 @@ a {
@extend .btn-opacity;
padding: 6px;
margin-left: 2px;
font-size: $font-size-normal;
font-size: $font-size-small;
color: $text-secondary-color;
cursor: pointer;
border: 1px solid transparent;
@@ -1232,6 +1233,7 @@ a {
}
.fa {
font-size: $font-size-tiny;
margin-left: 4px;
color: $color-orange-500;
}
@@ -1319,7 +1321,7 @@ a {
.fa {
color: $text-secondary-color;
font-size: $font-size-large;
font-size: $font-size-normal;
}
}
@@ -1783,7 +1785,7 @@ a {
margin-right: 10px;
}
.fa-close {
.fa-times {
width: 25px;
}
}

2
client/app/styles/_variables.scss
View File

@@ -1,5 +1,3 @@
$fa-font-path: "~font-awesome/fonts";
$base-ease: ease-in-out;
$background-color: $color-gray-50;

2
client/package.json
View File

@@ -22,7 +22,6 @@
"debug": "3.1.0",
"filesize": "3.5.11",
"filter-invalid-dom-props": "2.0.0",
"font-awesome": "4.7.0",
"immutable": "3.8.2",
"json-stable-stringify": "1.0.1",
"lcp": "1.1.0",
@@ -49,6 +48,7 @@
"xterm": "3.3.0"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.5.0",
"autoprefixer": "7.1.5",
"babel-cli": "6.26.0",
"babel-core": "6.26.0",

2
client/test/actions/90-nodes-select.js
View File

@@ -29,7 +29,7 @@ function selectNode(browser) {
function deselectNode(browser) {
debug('deselect node');
return browser.elementByCssSelector('.fa-close', function(err, el) {
return browser.elementByCssSelector('.fa-times', function(err, el) {
return el.click();
});
}

9
client/yarn.lock
View File

@@ -182,6 +182,11 @@
lodash "^4.2.0"
to-fast-properties "^2.0.0"
"@fortawesome/fontawesome-free@^5.5.0":
version "5.5.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.5.0.tgz#0c6c53823d04457ae669cd19567b8a21dbb4fcfd"
integrity sha512-p4lu0jfj5QN013ddArh99r3OXZ/fp9rbovs62LfaO70OMBsAXxtNd0lAq/97fitrscR0fqfd+/a5KNcp6Sh/0A==
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3319,10 +3324,6 @@ flatten@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
font-awesome@4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
for-in@^0.1.3:
version "0.1.8"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"

4
examples/plugins/README.md
View File

@@ -158,13 +158,13 @@ two controls (`ctrl-one` and `ctrl-two`) and two nodes, each with a different co
"ctrl-one": {
"id": "ctrl-one",
"human": "Ctrl One",
"icon": "fa-futbol-o",
"icon": "far fa-futbol",
"rank": 1
},
"ctrl-two": {
"id": "ctrl-two",
"human": "Ctrl Two",
"icon": "fa-beer",
"icon": "fa fa-beer",
"rank": 2
}
},

4
probe/awsecs/reporter.go
View File

@@ -213,13 +213,13 @@ func (Reporter) Report() (report.Report, error) {
{
ID: ScaleDown,
Human: "Scale down",
Icon: "fa-minus",
Icon: "fa fa-minus",
Rank: 0,
},
{
ID: ScaleUp,
Human: "Scale up",
Icon: "fa-plus",
Icon: "fa fa-plus",
Rank: 1,
},
})

16
probe/docker/reporter.go
View File

@@ -93,49 +93,49 @@ var (
{
ID: AttachContainer,
Human: "Attach",
Icon: "fa-desktop",
Icon: "fa fa-desktop",
Rank: 1,
},
{
ID: ExecContainer,
Human: "Exec shell",
Icon: "fa-terminal",
Icon: "fa fa-terminal",
Rank: 2,
},
{
ID: StartContainer,
Human: "Start",
Icon: "fa-play",
Icon: "fa fa-play",
Rank: 3,
},
{
ID: RestartContainer,
Human: "Restart",
Icon: "fa-repeat",
Icon: "fa fa-redo",
Rank: 4,
},
{
ID: PauseContainer,
Human: "Pause",
Icon: "fa-pause",
Icon: "fa fa-pause",
Rank: 5,
},
{
ID: UnpauseContainer,
Human: "Unpause",
Icon: "fa-play",
Icon: "fa fa-play",
Rank: 6,
},
{
ID: StopContainer,
Human: "Stop",
Icon: "fa-stop",
Icon: "fa fa-stop",
Rank: 7,
},
{
ID: RemoveContainer,
Human: "Remove",
Icon: "fa-trash-o",
Icon: "far fa-trash-alt",
Rank: 8,
},
}

2
probe/host/reporter.go
View File

@@ -144,7 +144,7 @@ func (r *Reporter) Report() (report.Report, error) {
rep.Host.Controls.AddControl(report.Control{
ID: ExecHost,
Human: "Exec shell",
Icon: "fa-terminal",
Icon: "fa fa-terminal",
})
return rep, nil

14
probe/kubernetes/reporter.go
View File

@@ -160,13 +160,13 @@ var (
{
ID: ScaleDown,
Human: "Scale down",
Icon: "fa-minus",
Icon: "fa fa-minus",
Rank: 0,
},
{
ID: ScaleUp,
Human: "Scale up",
Icon: "fa-plus",
Icon: "fa fa-plus",
Rank: 1,
},
}
@@ -480,7 +480,7 @@ func (r *Reporter) persistentVolumeClaimTopology() (report.Topology, []Persisten
result.Controls.AddControl(report.Control{
ID: CreateVolumeSnapshot,
Human: "Create snapshot",
Icon: "fa-camera",
Icon: "fa fa-camera",
Rank: 0,
})
err := r.client.WalkPersistentVolumeClaims(func(p PersistentVolumeClaim) error {
@@ -512,13 +512,13 @@ func (r *Reporter) volumeSnapshotTopology() (report.Topology, []VolumeSnapshot,
result.Controls.AddControl(report.Control{
ID: CloneVolumeSnapshot,
Human: "Clone snapshot",
Icon: "fa-clone",
Icon: "far fa-clone",
Rank: 0,
})
result.Controls.AddControl(report.Control{
ID: DeleteVolumeSnapshot,
Human: "Delete",
Icon: "fa-trash-o",
Icon: "far fa-trash-alt",
Rank: 1,
})
err := r.client.WalkVolumeSnapshots(func(p VolumeSnapshot) error {
@@ -568,13 +568,13 @@ func (r *Reporter) podTopology(services []Service, deployments []Deployment, dae
pods.Controls.AddControl(report.Control{
ID: GetLogs,
Human: "Get logs",
Icon: "fa-desktop",
Icon: "fa fa-desktop",
Rank: 0,
})
pods.Controls.AddControl(report.Control{
ID: DeletePod,
Human: "Delete",
Icon: "fa-trash-o",
Icon: "far fa-trash-alt",
Rank: 1,
})
for _, service := range services {

2
render/report.json
View File

File diff suppressed because one or more lines are too long

4
site/plugins.md
View File

@@ -156,13 +156,13 @@ two controls (`ctrl-one` and `ctrl-two`) and two nodes, each with a different co
"ctrl-one": {
"id": "ctrl-one",
"human": "Ctrl One",
"icon": "fa-futbol-o",
"icon": "far fa-futbol",
"rank": 1
},
"ctrl-two": {
"id": "ctrl-two",
"human": "Ctrl Two",
"icon": "fa-beer",
"icon": "fa fa-beer",
"rank": 2
}
},