Skip to content
This repository has been archived by the owner on Dec 16, 2021. It is now read-only.

Revert "Merge pull request #40 from kubeless/design-system" #45

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Revert "Merge pull request #40 from kubeless/design-system" #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 10 additions & 11 deletions src/components/Cluster/Cluster.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ limitations under the License.
import React, { Component } from 'react'
import keycode from 'keycode'
import type { Cluster } from 'utils/Types'
import TextField from 'material-ui/TextField'
import FontIcon from 'material-ui/FontIcon'
import './Cluster.scss'

Expand Down Expand Up @@ -46,17 +47,15 @@ export default class ClusterComponent extends Component {
render() {
const { cluster } = this.props
return (
<div className='cluster padding-big'>
<FontIcon className='fa fa-cube margin-r-normal' />
<div className='clusterUrl text-l'>
<label className='margin-reset'>Cluster url</label>
<input
className='type-big margin-reset padding-reset'
placeholder='http://localhost:8080'
defaultValue={cluster.url}
onKeyDown={this.onKeyDown}
/>
</div>
<div className='cluster'>
<FontIcon className='clusterIcon fa fa-cube' />
<TextField
className='clusterField'
floatingLabelText='Cluster url'
defaultValue={cluster.url}
underlineShow={false}
onKeyDown={this.onKeyDown}
/>
</div>
)
}
Expand Down
14 changes: 5 additions & 9 deletions src/components/Cluster/Cluster.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,11 @@ limitations under the License.
display: flex;
width: 100%;
align-items: center;
.fa {
color: $kubeapps-text !important;
padding: 1em 2em;
.clusterIcon {
margin-right: 10px;
}
.clusterUrl {
input {
margin-top: -6px;
background: none;
border-color: transparent;
box-shadow: none;
}
.clusterField {
font-size: 1.4em !important;
}
}
52 changes: 21 additions & 31 deletions src/components/Editor/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ import brace from 'brace' // eslint-disable-line
import 'brace/mode/python'
import 'brace/mode/ruby'
import 'brace/mode/javascript'
import 'brace/theme/chrome'
import 'brace/theme/tomorrow_night_bright'
import './Editor.scss'
import type { Func, Cluster } from 'utils/Types'
import RuntimeHelper from 'utils/RuntimeHelper'
import FuncDetail from 'components/Func/FuncDetailContainer'
import FuncCreateContainer from 'components/Func/FuncCreateContainer'
import Logs from 'components/Logs'
import FlatButton from 'material-ui/FlatButton'
import IconButton from 'material-ui/IconButton'
import FontIcon from 'material-ui/FontIcon'

Expand Down Expand Up @@ -70,7 +71,6 @@ export default class Editor extends Component {
content: props.func ? props.func.spec['function'] : '',
logsHeight: 0
}
this.isMac = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)
}

componentWillReceiveProps(nextProps: { [string]: any }) {
Expand Down Expand Up @@ -107,10 +107,6 @@ export default class Editor extends Component {
return RuntimeHelper.runtimeToLanguage(runtime)
}

toggleNewFuncModal = () => {
this.setState({ newFuncOpen: !this.state.newFuncOpen })
}

toggleLogs = () => {
const newHeight = this.state.logsHeight === 0 ? LOGS_DEFAULT_HEIGHT : 0
this.setState({ logsHeight: newHeight })
Expand Down Expand Up @@ -153,7 +149,7 @@ export default class Editor extends Component {
{func && (
<AceEditor
mode={mode}
theme='chrome'
theme='monokai'
onChange={this.onTextChange}
value={this.state.content}
name='ACE_EDITOR_01'
Expand All @@ -171,26 +167,18 @@ export default class Editor extends Component {
renderHeader() {
const { func, editing } = this.props
return (
<div className='editorHeader padding-h-big padding-v-small'>
<h4 className='title margin-reset'>{func.metadata.name}</h4>
{editing && (
<IconButton
className='editingIconContainer'
onClick={this.save}
tooltip={`Save (${this.isMac ? 'Cmd-S' : 'Ctrl-S'})`}
tooltipPosition='top-right'
>
<div className='editingIcon' />
</IconButton>
)}
<div className='editorHeader'>
<h5 className='title'>{func.metadata.name}</h5>
{editing && <div className='editingFlag' />}
</div>
)
}

renderFooter() {
const isMac = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)
const saveButton = (
<IconButton onClick={this.save} tooltip={`Save (${this.isMac ? 'Cmd-S' : 'Ctrl-S'})`} tooltipPosition='top-right'>
<FontIcon className='fa fa-cloud-upload' />
<IconButton onClick={this.save} tooltip={`Save (${isMac ? 'Cmd-S' : 'Ctrl-S'})`} tooltipPosition='top-center'>
<FontIcon className='fa fa-cloud-upload' color='black' />
</IconButton>
)
return (
Expand All @@ -204,10 +192,10 @@ export default class Editor extends Component {
<IconButton
style={{ marginLeft: 'auto' }}
onClick={this.toggleLogs}
tooltip={`Logs (${this.isMac ? 'Cmd-P' : 'Ctrl-P'})`}
tooltipPosition='top-left'
tooltip={`Logs (${isMac ? 'Cmd-P' : 'Ctrl-P'})`}
tooltipPosition='top-center'
>
<FontIcon className='fa fa-terminal' />
<FontIcon className='fa fa-terminal' color='black' />
</IconButton>
</div>
<div style={{ display: 'flex', height: this.state.logsHeight }}>
Expand All @@ -218,16 +206,18 @@ export default class Editor extends Component {
}
renderEmptyView() {
return (
<div className='editorEmpty type-big'>
<div className='editorEmpty'>
<p>
Choose a function on the list
{'Choose a function on the list'}
<br />
or create a new one
{'or create a new one'}
</p>
<a className='button button-primary' onClick={this.toggleNewFuncModal}>
Create Function
</a>
<FuncCreateContainer open={this.state.newFuncOpen} onDismiss={this.toggleNewFuncModal} />
<FlatButton
label='create'
onClick={() => this.setState({ newFuncOpen: true })}
icon={<FontIcon className='material-icons'>add</FontIcon>}
/>
<FuncCreateContainer open={this.state.newFuncOpen} onDismiss={() => this.setState({ newFuncOpen: false })} />
</div>
)
}
Expand Down
107 changes: 88 additions & 19 deletions src/components/Editor/Editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,38 +38,35 @@ limitations under the License.
flex-direction: column;
align-items: center;
justify-content: center;
color: $kubeapps-text;
text-align: center;
color: $dark-blue;
font-size: 1.2em;
}
.editorHeader {
text-align: left;
border-bottom: 1px solid $kubeapps-light;
padding: 0 1em;
border-bottom: 1px solid $light-gray;
.title {
display: inline-block;
font-size: 1.2em;
opacity: 0.5;
}
.editingIconContainer {
padding: 0 !important;
height: auto !important;
width: auto !important;
margin-left: 5px !important;
.editingIcon {
width: 10px;
height: 10px;
border-radius: 5px;
background: $kubeapps-accent;
}
.editingFlag {
width: 10px;
height: 10px;
border-radius: 5px;
background: $blue;
display: inline-block;
margin-left: 5px;
}
}
.editorFooter {
display: flex;
border-top: 1px solid $kubeapps-light;
border-top: 1px solid $light-gray;
flex-direction: column;
z-index: 10;
a {
color: $kubeapps-text;
}
.fa {
color: $kubeapps-text !important;
font-size: 1.2rem !important;
color: $dark-blue;
}
.editorFooterLinks {
flex: 1;
Expand All @@ -82,3 +79,75 @@ limitations under the License.
}
}
}
.editorPanel {
width: 300px;
color: $dark-blue;
background: $background-gradient;
border-left: 1px solid $light-gray;
text-align: left;
padding: 0 2em 4em 2em;
overflow: auto;

.functionTitle {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
}
.functionRun {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
margin-bottom: 20px;
}
.actionsButtons {
text-align: right;
.button:nth-child(1),
.button:nth-child(1) button {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.button:nth-child(2),
.button:nth-child(2) button {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
.radioButton {
width: auto !important;
display: inline-block !important;
label {
margin-left: -11px;
margin-right: 10px;
}
}
.body {
width: 100%;
border: 0;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 5px;
resize: vertical;
outline: none;
}

.methodContainer {
background: $dark-blue;
width: 75px;
height: 36px;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
vertical-align: bottom;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
button {
// tick
right: -10px !important;
fill: rgba(0, 0, 0, 0.3) !important;
}
}

.runButton,
.runButton button {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
11 changes: 4 additions & 7 deletions src/components/Func/FuncCreate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ limitations under the License.
// @flow
import React, { Component } from 'react'
import Dialog from 'material-ui/Dialog'
import FlatButton from 'material-ui/FlatButton'
import type { Cluster } from 'utils/Types'
import FuncParams from './FuncParams'
import './FuncParams.scss'
Expand All @@ -40,17 +41,13 @@ export default class FuncCreate extends Component {
const { open, onDismiss } = this.props

const dialogActions = [
<a className='button button-secondary' onClick={onDismiss}>
Cancel
</a>,
<a className='button button-primary' onClick={this.donePressed}>
Create
</a>
<FlatButton label='Cancel' primary onClick={onDismiss} />,
<FlatButton label='Create' primary onClick={this.donePressed} />
]

return (
<Dialog
title={<h2>Create Function</h2>}
title='New Function'
modal={false}
actions={dialogActions}
open={!!open}
Expand Down
Loading