kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvement: Move inline styles to SCSS instead (#5578)

Browse Source 
* fix: convert propStyle to propClass
This commit is contained in:
tomdegoede
2020-06-11 01:39:48 +02:00
committed by GitHub
parent 67627d7587
commit fc3ed30f3d
30 changed files with 282 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/components/array-model.jsx
View File

@@ -2,7 +2,7 @@ import React, { Component } from "react"
import PropTypes from "prop-types"
import ImPropTypes from "react-immutable-proptypes"
const propStyle = { color: "#999", fontStyle: "italic" }
const propClass = "property"
export default class ArrayModel extends Component {
static propTypes = {
@@ -44,7 +44,7 @@ export default class ArrayModel extends Component {
<ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
[
{
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
}
{
!description ? (properties.size ? <div className="markdown"></div> : null) :

4
src/core/components/auth/error.jsx
View File

@@ -15,8 +15,8 @@ export default class AuthError extends React.Component {
let source = error.get("source")
return (
<div className="errors" style={{ backgroundColor: "#ffeeee", color: "red", margin: "1em" }}>
<b style={{ textTransform: "capitalize", marginRight: "1em"}} >{ source } { level }</b>
<div className="errors">
<b>{ source } { level }</b>
<span>{ message }</span>
</div>
)

2
src/core/components/curl.jsx
View File

@@ -20,7 +20,7 @@ export default class Curl extends React.Component {
<div>
<h4>Curl</h4>
<div className="copy-paste">
<textarea onFocus={this.handleFocus} readOnly={true} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
<textarea onFocus={this.handleFocus} readOnly={true} className="curl" value={curl}></textarea>
</div>
</div>
)

8
src/core/components/errors.jsx
View File

@@ -72,10 +72,10 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => {
<h4>{ (error.get("source") && error.get("level")) ?
toTitleCase(error.get("source")) + " " + error.get("level") : "" }
{ error.get("path") ? <small> at {error.get("path")}</small>: null }</h4>
<span style={{ whiteSpace: "pre-line", "maxWidth": "100%" }}>
<span className="message thrown">
{ error.get("message") }
</span>
<div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
<div className="error-line">
{ errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
</div>
</div>
@@ -102,8 +102,8 @@ const SpecErrorItem = ( { error, jumpToLine } ) => {
{ !error ? null :
<div>
<h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
<span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span>
<div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
<span className="message">{ error.get("message") }</span>
<div className="error-line">
{ jumpToLine ? (
<a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
) : null }

4
src/core/components/headers.jsx
View File

@@ -2,7 +2,7 @@ import React from "react"
import PropTypes from "prop-types"
import Im from "immutable"
const propStyle = { color: "#999", fontStyle: "italic" }
const propClass = "header-example"
export default class Headers extends React.Component {
static propTypes = {
@@ -46,7 +46,7 @@ export default class Headers extends React.Component {
<td className="header-col">{
!description ? null : <Markdown source={ description } />
}</td>
<td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td>
<td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propClass={ propClass } /> : null }</td>
</tr>)
}).toArray()
}

8
src/core/components/layout-utils.jsx
View File

@@ -73,10 +73,14 @@ export class Col extends React.Component {
}
}
if (hide) {
classesAr.push("hidden")
}
let classes = xclass(rest.className, ...classesAr)
return (
<section {...rest} style={{display: hide ? "none": null}} className={classes}/>
<section {...rest} className={classes}/>
)
}
@@ -213,7 +217,7 @@ Link.propTypes = {
className: PropTypes.string
}
const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div>
const NoMargin = ({children}) => <div className="no-margin"> {children} </div>
NoMargin.propTypes = {
children: PropTypes.node

2
src/core/components/layouts/base.jsx
View File

@@ -57,7 +57,7 @@ export default class BaseLayout extends React.Component {
if (loadingStatus === "failedConfig") {
const lastErr = errSelectors.lastError()
const lastErrMsg = lastErr ? lastErr.get("message") : ""
loadingMessage = <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
loadingMessage = <div className="info failed-config">
<div className="loading-container">
<h4 className="title">Failed to load remote configuration.</h4>
<p>{lastErrMsg}</p>

4
src/core/components/model-collapse.jsx
View File

@@ -71,8 +71,8 @@ export default class ModelCollapse extends Component {
return (
<span className={classes || ""}>
{ title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
{ title && <span onClick={this.toggleCollapsed} className="pointer">{title}</span> }
<span onClick={ this.toggleCollapsed } className="pointer">
<span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span>
</span>
{ this.state.expanded ? this.props.children :this.state.collapsedContent }

6
src/core/components/model.jsx
View File

@@ -53,11 +53,7 @@ export default class Model extends ImmutablePureComponent {
if(!schema) {
return <span className="model model-title">
<span className="model-title__text">{ displayName || name }</span>
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{
marginLeft: "1em",
position: "relative",
bottom: "0px"
}} />
<img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} />
</span>
}

28
src/core/components/object-model.jsx
View File

@@ -79,8 +79,8 @@ export default class ObjectModel extends Component {
{
<table className="model"><tbody>
{
!description ? null : <tr style={{ color: "#666", fontWeight: "normal" }}>
<td style={{ fontWeight: "bold" }}>description:</td>
!description ? null : <tr className="description">
<td>description:</td>
<td>
<Markdown source={ description } />
</td>
@@ -91,16 +91,22 @@ export default class ObjectModel extends Component {
([key, value]) => {
let isDeprecated = isOAS3() && value.get("deprecated")
let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
if ( isRequired ) {
propertyStyle.fontWeight = "bold"
let classNames = ["property-row"]
if (isDeprecated) {
classNames.push("deprecated")
}
return (<tr key={key} className={isDeprecated && "deprecated"}>
<td style={ propertyStyle }>
{ key }{ isRequired && <span style={{ color: "red" }}>*</span> }
if (isRequired) {
classNames.push("required")
}
return (<tr key={key} className={classNames.join(" ")}>
<td>
{ key }{ isRequired && <span className="star">*</span> }
</td>
<td style={{ verticalAlign: "top" }}>
<td>
<Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
required={ isRequired }
getComponent={ getComponent }
@@ -126,11 +132,11 @@ export default class ObjectModel extends Component {
const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
return (<tr key={key} style={{ color: "#777" }}>
return (<tr key={key} className="extension">
<td>
{ key }
</td>
<td style={{ verticalAlign: "top" }}>
<td>
{ JSON.stringify(normalizedValue) }
</td>
</tr>)

2
src/core/components/online-validator-badge.jsx
View File

@@ -53,7 +53,7 @@ export default class OnlineValidatorBadge extends React.Component {
return null
}
return (<span style={{ float: "right"}}>
return (<span className="float-right">
<a target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
<ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/>
</a>

2
src/core/components/overview.jsx
View File

@@ -97,7 +97,7 @@ export class OperationLink extends React.Component {
let { id, method, shown, href } = this.props
return (
<Link href={ href } style={{fontWeight: shown ? "bold" : "normal"}} onClick={this.onClick} className="block opblock-link">
<Link href={ href } onClick={this.onClick} className={`block opblock-link ${shown ? "shown" : ""}`}>
<div>
<small className={`bold-label-${method}`}>{method.toUpperCase()}</small>
<span className="bold-label" >{id}</span>

2
src/core/components/parameter-row.jsx
View File

@@ -262,7 +262,7 @@ export default class ParameterRow extends Component {
<td className="parameters-col_name">
<div className={required ? "parameter__name required" : "parameter__name"}>
{ param.get("name") }
{ !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
{ !required ? null : <span>&nbsp;*</span> }
</div>
<div className="parameter__type">
{ type }

10
src/core/components/primitive-model.jsx
View File

@@ -2,7 +2,7 @@ import React, { Component } from "react"
import PropTypes from "prop-types"
import { getExtensions } from "core/utils"
const propStyle = { color: "#6b6b6b", fontStyle: "italic" }
const propClass = "property primitive"
export default class Primitive extends Component {
static propTypes = {
@@ -44,19 +44,19 @@ export default class Primitive extends Component {
<span className="prop-type">{ type }</span>
{ format && <span className="prop-format">(${format})</span>}
{
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
}
{
showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
}
{
!description ? null :
<Markdown source={ description } />
}
{
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
xml && xml.size ? (<span><br /><span className={ propClass }>xml:</span>
{
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} className={ propClass }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
}
</span>): null
}

6
src/core/components/property.jsx
View File

@@ -1,16 +1,16 @@
import React from "react"
import PropTypes from "prop-types"
export const Property = ({ propKey, propVal, propStyle }) => {
export const Property = ({ propKey, propVal, propClass }) => {
return (
<span style={ propStyle }>
<span className={ propClass }>
<br />{ propKey }: { String(propVal) }</span>
)
}
Property.propTypes = {
propKey: PropTypes.string,
propVal: PropTypes.any,
propStyle: PropTypes.object
propClass: PropTypes.string
}
export default Property

2
src/core/components/response-body.jsx
View File

@@ -118,7 +118,7 @@ export default class ResponseBody extends React.PureComponent {
if(contentType.includes("svg")) {
bodyEl = <div> { content } </div>
} else {
bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
bodyEl = <img className="full-width" src={ window.URL.createObjectURL(content) } />
}
// Audio

6
src/core/components/svg-assets.jsx
View File

@@ -1,11 +1,7 @@
import React from "react"
const SvgAssets = () =>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{
position: "absolute",
width: 0,
height: 0
}}>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className="svg-assets">
<defs>
<symbol viewBox="0 0 20 20" id="unlocked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>

10
src/core/containers/filter.jsx
View File

@@ -23,18 +23,18 @@ export default class FilterContainer extends React.Component {
const isFailed = specSelectors.loadingStatus() === "failed"
const filter = layoutSelectors.currentFilter()
const inputStyle = {}
if (isFailed) inputStyle.color = "red"
if (isLoading) inputStyle.color = "#aaa"
const classNames = ["operation-filter-input"]
if (isFailed) classNames.push("failed")
if (isLoading) classNames.push("loading")
return (
<div>
{filter === null || filter === false ? null :
<div className="filter-container">
<Col className="filter wrapper" mobile={12}>
<input className="operation-filter-input" placeholder="Filter by tag" type="text"
<input className={classNames.join(" ")} placeholder="Filter by tag" type="text"
onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter}
disabled={isLoading} style={inputStyle}/>
disabled={isLoading}/>
</Col>
</div>
}

4
src/core/plugins/oas3/components/operation-link.jsx
View File

@@ -12,8 +12,8 @@ class OperationLink extends Component {
let parameters = link.get("parameters") && link.get("parameters").toJS()
let description = link.get("description")
return <div style={{ marginBottom: "1.5em" }}>
<div style={{ marginBottom: ".5em" }}>
return <div className="operation-link">
<div className="description">
<b><code>{name}</code></b>
{ description ? <Markdown source={description}></Markdown> : null }
</div>

2
src/core/plugins/oas3/components/request-body.jsx
View File

@@ -145,7 +145,7 @@ const RequestBody = ({
<td className="parameters-col_name">
<div className={required ? "parameter__name required" : "parameter__name"}>
{ key }
{ !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
{ !required ? null : <span>&nbsp;*</span> }
</div>
<div className="parameter__type">
{ type }

2
src/core/plugins/oas3/wrap-components/version-stamp.jsx
View File

@@ -6,7 +6,7 @@ export default OAS3ComponentWrapFactory((props) => {
return <span>
<Ori {...props} />
<small style={{ backgroundColor: "#89bf04" }}>
<small className="version-stamp">
<pre className="version">OAS3</pre>
</small>
</span>

7
src/core/plugins/view/root-injects.jsx
View File

@@ -76,10 +76,9 @@ const createClass = component => class extends Component {
}
}
const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
padding: "1em",
"color": "#aaa"
}}>😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
const Fallback = ({
name // eslint-disable-line react/prop-types
}) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
const wrapRender = (component) => {
const isStateless = component => !(component.prototype && component.prototype.isReactComponent)

6
src/core/utils.js
View File

@@ -307,15 +307,15 @@ export function highlight (el) {
// (some types are highlighted similarly)
el[appendChild](
node = _document.createElement("span")
).setAttribute("style", [
).setAttribute("class", [
// 0: not formatted
"color: #555; font-weight: bold;",
"token-not-formatted",
// 1: keywords
"",
// 2: punctuation
"",
// 3: strings and regexps
"color: #555;",
"token-string",
// 4: comments
""
][

10
src/plugins/topbar/topbar.jsx
View File

@@ -104,10 +104,10 @@ export default class Topbar extends React.Component {
let isLoading = specSelectors.loadingStatus() === "loading"
let isFailed = specSelectors.loadingStatus() === "failed"
let inputStyle = {}
if(isFailed) inputStyle.color = "red"
if(isLoading) inputStyle.color = "#aaa"
const classNames = ["download-url-input"]
if (isFailed) classNames.push("failed")
if (isLoading) classNames.push("loading")
const { urls } = getConfigs()
let control = []
let formOnSubmit = null
@@ -128,7 +128,7 @@ export default class Topbar extends React.Component {
}
else {
formOnSubmit = this.downloadUrl
control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
control.push(<input className={classNames.join(" ")} type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} />)
control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
}

12
src/style/_authorize.scss
View File

@@ -65,7 +65,19 @@
border-radius: 4px;
background-color: #ffeeee;
color: red;
margin: 1em;
@include text_code();
b
{
text-transform: capitalize;
margin-right: 1em;
}
}
}

16
src/style/_errors.scss
View File

@@ -29,6 +29,22 @@
{
color: $errors-wrapper-errors-small-font-color;
}
.message
{
white-space: pre-line;
&.thrown
{
max-width: 100%;
}
}
.error-line
{
text-decoration: underline;
cursor: pointer;
}
}
hgroup

13
src/style/_information.scss
View File

@@ -2,6 +2,14 @@
{
margin: 50px 0;
&.failed-config
{
max-width: 880px;
margin-left: auto;
margin-right: auto;
text-align: center
}
hgroup.main
{
margin: 0 0 20px 0;
@@ -78,6 +86,11 @@
border-radius: 57px;
background: $info-title-small-background-color;
&.version-stamp
{
background-color: #89bf04;
}
pre
{

87
src/style/_layout.scss
View File

@@ -419,6 +419,19 @@
}
}
.filter, .download-url-wrapper
{
.failed
{
color: red;
}
.loading
{
color: #aaa;
}
}
.model-example {
margin-top: 1em;
}
@@ -553,6 +566,11 @@
@include text_body();
}
.curl
{
white-space: normal;
}
}
.response-col_status
@@ -583,6 +601,16 @@
@include text_code($response-col-links-font-color);
}
.operation-link
{
margin-bottom: 1.5em;
.description
{
margin-bottom: 0.5em;
}
}
}
.opblock-body
@@ -793,6 +821,35 @@
}
}
.hidden
{
display: none;
}
.no-margin
{
height: auto;
border: none;
margin: 0;
padding: 0;
}
.float-right
{
float: right;
}
img.full-width
{
width: 100%;
}
.svg-assets
{
position: absolute;
width: 0;
height: 0;
}
section
{
@@ -815,6 +872,12 @@ a.nostyle {
}
}
.fallback
{
padding: 1em;
color: #aaa;
}
.version-pragma {
height: 100%;
padding: 5em 0px;
@@ -841,3 +904,27 @@ a.nostyle {
}
}
}
.opblock-link
{
font-weight: normal;
&.shown
{
font-weight: bold;
}
}
span
{
&.token-string
{
color: #555;
}
&.token-not-formatted
{
color: #555;
font-weight: bold;
}
}

72
src/style/_models.scss
View File

@@ -97,8 +97,68 @@
{
margin: 0 0 1em 0;
}
.property
{
color: #999;
font-style: italic;
&.primitive
{
color: #6b6b6b;
}
}
}
table.model
{
tr
{
&.description
{
color: #666;
font-weight: normal;
td:first-child
{
font-weight: bold;
}
}
&.property-row
{
&.required td:first-child
{
font-weight: bold;
}
td
{
vertical-align: top;
&:first-child
{
padding-right: 0.2em;
}
}
.star
{
color: red;
}
}
&.extension
{
color: #777;
td:last-child
{
vertical-align: top;
}
}
}
}
section.models
{
@@ -107,6 +167,11 @@ section.models
border: 1px solid rgba($section-models-border-color, .3);
border-radius: 4px;
.pointer
{
cursor: pointer;
}
&.is-open
{
padding: 0 0 20px;
@@ -229,6 +294,13 @@ section.models
font-size: 16px;
@include text_headline($section-models-model-title-font-color);
img
{
margin-left: 1em;
position: relative;
bottom: 0px;
}
}
.model-deprecated-warning

11
src/style/_table.scss
View File

@@ -38,6 +38,12 @@ table
@include text_code();
}
.header-example
{
color: #999;
font-style: italic;
}
}
tbody
@@ -112,6 +118,11 @@ table
{
font-weight: bold;
span
{
color: red;
}
&:after
{
font-size: 10px;