mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
clean old codes
This commit is contained in:
Rokt33r
@@ -88,58 +88,27 @@ export default class AppSettingTab extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
handleNameSaveButtonClick (e) {
|
||||
let { dispatch } = this.props
|
||||
|
||||
dispatch(updateUser({name: this.state.user.name}))
|
||||
this.setState({
|
||||
userAlert: {
|
||||
type: 'success',
|
||||
message: 'Successfully done!'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
let keymapAlert = this.state.keymapAlert
|
||||
let keymapAlertElement = keymapAlert != null
|
||||
? (
|
||||
<p className={`alert ${keymapAlert.type}`}>
|
||||
{keymapAlert.message}
|
||||
</p>
|
||||
) : null
|
||||
let userAlert = this.state.userAlert
|
||||
let userAlertElement = userAlert != null
|
||||
? (
|
||||
<p className={`alert ${userAlert.type}`}>
|
||||
{userAlert.message}
|
||||
</p>
|
||||
) : null
|
||||
let aceThemeList = ace.require("ace/ext/themelist")
|
||||
? <p className={`alert ${keymapAlert.type}`}>
|
||||
{keymapAlert.message}
|
||||
</p>
|
||||
: null
|
||||
let aceThemeList = ace.require('ace/ext/themelist')
|
||||
let hljsThemeList = hljsTheme()
|
||||
|
||||
return (
|
||||
<div className='AppSettingTab content'>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>User's info</div>
|
||||
<div className='sectionInput'>
|
||||
<label>User name</label>
|
||||
<input valueLink={this.linkState('user.name')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button onClick={e => this.handleNameSaveButtonClick(e)}>Save</button>
|
||||
{userAlertElement}
|
||||
</div>
|
||||
</div>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Editor</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Editor Font Size</label>
|
||||
<input valueLink={this.linkState('config.editor-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
|
||||
<input valueLink={this.linkState('config.editor-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
|
||||
</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Editor Font Family</label>
|
||||
<input valueLink={this.linkState('config.editor-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
|
||||
<input valueLink={this.linkState('config.editor-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
|
||||
</div>
|
||||
<div className='sectionMultiSelect'>
|
||||
<label>Editor Indent Style</label>
|
||||
@@ -160,11 +129,11 @@ export default class AppSettingTab extends React.Component {
|
||||
<div className='sectionTitle'>Preview</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Preview Font Size</label>
|
||||
<input valueLink={this.linkState('config.preview-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
|
||||
<input valueLink={this.linkState('config.preview-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
|
||||
</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Preview Font Family</label>
|
||||
<input valueLink={this.linkState('config.preview-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
|
||||
<input valueLink={this.linkState('config.preview-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
|
||||
</div>
|
||||
<div className='sectionSelect'>
|
||||
<label>Switching Preview</label>
|
||||
@@ -194,8 +163,8 @@ export default class AppSettingTab extends React.Component {
|
||||
<label>Code block Theme</label>
|
||||
<select valueLink={this.linkState('config.theme-code')}>
|
||||
{
|
||||
hljsThemeList.map(function(v, i){
|
||||
return (<option value={v.name} key={v.name}>{v.caption}</option>)
|
||||
hljsThemeList.map((theme) => {
|
||||
return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
|
||||
})
|
||||
}
|
||||
</select>
|
||||
@@ -204,28 +173,28 @@ export default class AppSettingTab extends React.Component {
|
||||
<label>Editor Theme</label>
|
||||
<select valueLink={this.linkState('config.theme-syntax')}>
|
||||
{
|
||||
aceThemeList.themes.map(function(v, i){
|
||||
return (<option value={v.name} key={v.name}>{v.caption}</option>)
|
||||
aceThemeList.themes.map((theme) => {
|
||||
return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
|
||||
})
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button onClick={e => this.handleConfigSaveButtonClick(e)}>Save</button>
|
||||
<button onClick={(e) => this.handleConfigSaveButtonClick(e)}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Hotkey</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Toggle Main</label>
|
||||
<input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
|
||||
<input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionInput'>
|
||||
<label>Toggle Finder(popup)</label>
|
||||
<input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
|
||||
<input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
|
||||
</div>
|
||||
<div className='sectionConfirm'>
|
||||
<button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
|
||||
<button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
|
||||
{keymapAlertElement}
|
||||
</div>
|
||||
<div className='description'>
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import FolderRow from './FolderRow'
|
||||
import linkState from 'browser/lib/linkState'
|
||||
|
||||
export default class FolderSettingTab extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
handleNewFolderNameKeyDown (e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSaveButtonClick()
|
||||
}
|
||||
}
|
||||
|
||||
handleSaveButtonClick (e) {
|
||||
this.setState({alert: null}, () => {
|
||||
let { dispatch } = this.props
|
||||
|
||||
try {
|
||||
// dispatch(createFolder({
|
||||
// name: this.state.name
|
||||
// }))
|
||||
} catch (e) {
|
||||
this.setState({alert: {
|
||||
type: 'error',
|
||||
message: e.message
|
||||
}})
|
||||
return
|
||||
}
|
||||
|
||||
this.setState({name: ''})
|
||||
})
|
||||
}
|
||||
|
||||
setAlert (alert, cb) {
|
||||
this.setState({alert: alert}, cb)
|
||||
}
|
||||
|
||||
render () {
|
||||
let { folders } = this.props
|
||||
let folderElements = folders.map((folder, index) => {
|
||||
return (
|
||||
<FolderRow
|
||||
key={'folder-' + folder.key}
|
||||
folder={folder}
|
||||
index={index}
|
||||
count={folders.length}
|
||||
setAlert={(alert, cb) => this.setAlert(alert, cb)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
let alert = this.state.alert
|
||||
let alertElement = alert != null ? (
|
||||
<p className={`alert ${alert.type}`}>
|
||||
{alert.message}
|
||||
</p>
|
||||
) : null
|
||||
|
||||
return (
|
||||
<div className='FolderSettingTab content'>
|
||||
<div className='section'>
|
||||
<div className='sectionTitle'>Manage folder</div>
|
||||
<div className='folderTable'>
|
||||
<div className='folderHeader'>
|
||||
<div className='folderName'>Folder</div>
|
||||
<div className='folderControl'>Edit/Delete</div>
|
||||
</div>
|
||||
{folderElements}
|
||||
<div className='newFolder'>
|
||||
<div className='folderName'>
|
||||
<input onKeyDown={(e) => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
|
||||
</div>
|
||||
<div className='folderControl'>
|
||||
<button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
{alertElement}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
FolderSettingTab.propTypes = {
|
||||
folders: PropTypes.array,
|
||||
dispatch: PropTypes.func
|
||||
}
|
||||
|
||||
FolderSettingTab.prototype.linkState = linkState
|
||||
@@ -3,12 +3,10 @@ import { connect, Provider } from 'react-redux'
|
||||
import linkState from 'browser/lib/linkState'
|
||||
import store from '../store'
|
||||
import AppSettingTab from './Preference/AppSettingTab'
|
||||
import FolderSettingTab from './Preference/FolderSettingTab'
|
||||
import ContactTab from './Preference/ContactTab'
|
||||
import { closeModal } from 'browser/lib/modal'
|
||||
|
||||
const APP = 'APP'
|
||||
const FOLDER = 'FOLDER'
|
||||
const CONTACT = 'CONTACT'
|
||||
|
||||
class Preferences extends React.Component {
|
||||
@@ -25,7 +23,7 @@ class Preferences extends React.Component {
|
||||
}
|
||||
|
||||
handleNavButtonClick (tab) {
|
||||
return e => {
|
||||
return (e) => {
|
||||
this.setState({currentTab: tab})
|
||||
}
|
||||
}
|
||||
@@ -35,19 +33,18 @@ class Preferences extends React.Component {
|
||||
|
||||
let tabs = [
|
||||
{target: APP, label: 'Preferences'},
|
||||
{target: FOLDER, label: 'Manage folder'},
|
||||
{target: CONTACT, label: 'Contact form'}
|
||||
{target: CONTACT, label: 'Contact'}
|
||||
]
|
||||
|
||||
let navButtons = tabs.map(tab => (
|
||||
<button key={tab.target} onClick={e => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
|
||||
let navButtons = tabs.map((tab) => (
|
||||
<button key={tab.target} onClick={(e) => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
|
||||
))
|
||||
|
||||
return (
|
||||
<div className='Preferences modal'>
|
||||
<div className='header'>
|
||||
<div className='title'>Setting</div>
|
||||
<button onClick={e => closeModal()} className='closeBtn'>Done</button>
|
||||
<button onClick={(e) => closeModal()} className='closeBtn'>Done</button>
|
||||
</div>
|
||||
|
||||
<div className='nav'>
|
||||
@@ -60,16 +57,9 @@ class Preferences extends React.Component {
|
||||
}
|
||||
|
||||
renderContent () {
|
||||
let { user, folders, dispatch } = this.props
|
||||
let { user, dispatch } = this.props
|
||||
|
||||
switch (this.state.currentTab) {
|
||||
case FOLDER:
|
||||
return (
|
||||
<FolderSettingTab
|
||||
dispatch={dispatch}
|
||||
folders={folders}
|
||||
/>
|
||||
)
|
||||
case CONTACT:
|
||||
return (
|
||||
<ContactTab/>
|
||||
@@ -90,23 +80,12 @@ Preferences.propTypes = {
|
||||
user: PropTypes.shape({
|
||||
name: PropTypes.string
|
||||
}),
|
||||
folders: PropTypes.array,
|
||||
dispatch: PropTypes.func
|
||||
}
|
||||
|
||||
Preferences.prototype.linkState = linkState
|
||||
|
||||
function remap (state) {
|
||||
let { user, folders, status } = state
|
||||
|
||||
return {
|
||||
user,
|
||||
folders,
|
||||
status
|
||||
}
|
||||
}
|
||||
|
||||
let RootComponent = connect(remap)(Preferences)
|
||||
let RootComponent = connect((x) => x)(Preferences)
|
||||
export default class PreferencesModal extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import MarkdownPreview from 'browser/components/MarkdownPreview'
|
||||
import CodeEditor from 'browser/components/CodeEditor'
|
||||
|
||||
export default class Tutorial extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
slideIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
handlePriorSlideClick () {
|
||||
if (this.state.slideIndex > 0) this.setState({slideIndex: this.state.slideIndex - 1})
|
||||
}
|
||||
|
||||
handleNextSlideClick () {
|
||||
if (this.state.slideIndex < 4) this.setState({slideIndex: this.state.slideIndex + 1})
|
||||
}
|
||||
|
||||
startButtonClick (e) {
|
||||
this.props.close()
|
||||
}
|
||||
|
||||
render () {
|
||||
let content = this.renderContent(this.state.slideIndex)
|
||||
|
||||
let dotElements = []
|
||||
for (let i = 0; i < 5; i++) {
|
||||
dotElements.push(<i key={i} className={'fa fa-fw fa-circle' + (i === this.state.slideIndex ? ' active' : '')}/>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='Tutorial modal'>
|
||||
<button onClick={(e) => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
|
||||
<i className='fa fa-fw fa-angle-left'/>
|
||||
</button>
|
||||
<button onClick={(e) => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
|
||||
<i className='fa fa-fw fa-angle-right'/>
|
||||
</button>
|
||||
{content}
|
||||
<div className='dots'>
|
||||
{dotElements}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderContent (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return (<div className='slide slide0'>
|
||||
<div className='title'>Welcome to Boost</div>
|
||||
<div className='content'>
|
||||
Boost is a brand new note app for software<br/>
|
||||
Don't waste time cleaning up your data.<br/>
|
||||
devote that time to more creative work.<br/>
|
||||
Hack your memory.
|
||||
</div>
|
||||
</div>)
|
||||
case 1:
|
||||
let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful'
|
||||
return (<div className='slide slide1'>
|
||||
<div className='title'>Write with Markdown</div>
|
||||
<div className='content'>
|
||||
Markdown is available.<br/>
|
||||
Your notes will be stylized beautifully and quickly.
|
||||
<div className='markdown'>
|
||||
<pre className='left'>{content}</pre>
|
||||
<MarkdownPreview className='right' content={content}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
case 2:
|
||||
let code = 'import shell from \'shell\'\r\nvar React = require(\'react\')\r\nvar { PropTypes } = React\r\nimport markdown from \'boost\/markdown\'\r\nvar ReactDOM = require(\'react-dom\')\r\n\r\nfunction handleAnchorClick (e) {\r\n shell.openExternal(e.target.href)\r\n e.preventDefault()\r\n}\r\n\r\nexport default class MarkdownPreview extends React.Component {\r\n componentDidMount () {\r\n this.addListener()\r\n }\r\n\r\n componentDidUpdate () {\r\n this.addListener()\r\n }\r\n\r\n componentWillUnmount () {\r\n this.removeListener()\r\n }'
|
||||
return (<div className='slide slide2'>
|
||||
<div className='title'>Beautiful code highlighting</div>
|
||||
<div className='content'>
|
||||
Boost supports code syntax highlighting.<br/>
|
||||
There are more than 100 different type of language.
|
||||
<div className='code'>
|
||||
<CodeEditor readOnly article={{content: code, mode: 'jsx'}}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
case 3:
|
||||
return (<div className='slide slide3'>
|
||||
<div className='title'>Easy to access with Finder</div>
|
||||
<div className='content'>
|
||||
The Finder helps you organize all of the files and documents.<br/>
|
||||
There is a short-cut key [⌘ + alt + s] to open the Finder.<br/>
|
||||
It is available to save your articles on the Clipboard<br/>
|
||||
by selecting your file with pressing Enter key,<br/>
|
||||
and to paste the contents of the Clipboard with [{process.platform === 'darwin' ? 'Command' : 'Control'}-V]
|
||||
|
||||
<img width='480' src='../resources/finder.png'/>
|
||||
</div>
|
||||
</div>)
|
||||
case 4:
|
||||
return (<div className='slide slide4'>
|
||||
<div className='title'>Are you ready?</div>
|
||||
<div className='content'>
|
||||
<button onClick={(e) => this.startButtonClick(e)}>Start<br/>Boost</button>
|
||||
</div>
|
||||
</div>)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Tutorial.propTypes = {
|
||||
close: PropTypes.func
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
userNavigatorBgColor = #1B1C1C
|
||||
userNavigatorColor = #DDD
|
||||
userAnchorColor = #979797
|
||||
userAnchorBgColor = #BEBEBE
|
||||
userAnchorActiveColor = textColor
|
||||
userAnchorActiveBgColor = white
|
||||
|
||||
.UserNavigator
|
||||
noSelect()
|
||||
background-color userNavigatorBgColor
|
||||
absolute left top bottom
|
||||
width 60px
|
||||
text-align center
|
||||
box-sizing border-box
|
||||
ul.userList
|
||||
position absolute
|
||||
top 25px
|
||||
left 0
|
||||
right 0
|
||||
bottom 70px
|
||||
// overflow-y auto
|
||||
&>li
|
||||
a
|
||||
display block
|
||||
width 38px
|
||||
height 64px
|
||||
margin 0 auto 10px
|
||||
text-align center
|
||||
text-decoration none
|
||||
color userAnchorColor
|
||||
line-height 44px
|
||||
font-size 1.1em
|
||||
cursor pointer
|
||||
transition 0.1s
|
||||
|
||||
img.ProfileImage
|
||||
width 38px
|
||||
height 38px
|
||||
border-radius 22px
|
||||
opacity 0.7
|
||||
&:hover
|
||||
img.ProfileImage
|
||||
opacity 1
|
||||
.userTooltip
|
||||
opacity 1
|
||||
&.active
|
||||
img.ProfileImage
|
||||
opacity 1
|
||||
.userTooltip
|
||||
tooltip()
|
||||
position absolute
|
||||
margin-top -52px
|
||||
margin-left 44px
|
||||
.keyLabel
|
||||
margin-top -25px
|
||||
font-size 0.8em
|
||||
color userNavigatorColor
|
||||
button.createTeamBtn
|
||||
display block
|
||||
margin 0 auto
|
||||
width 30px
|
||||
height 30px
|
||||
border-radius 15px
|
||||
border 2px solid darken(white, 5%)
|
||||
color darken(white, 5%)
|
||||
text-align center
|
||||
background-image none
|
||||
background-color transparent
|
||||
box-sizing border-box
|
||||
absolute left right
|
||||
bottom 15px
|
||||
font-size 22px
|
||||
line-height 22px
|
||||
transition 0.1s
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-top -26px
|
||||
margin-left 30px
|
||||
&:hover, &.hover, &:focus, &.focus
|
||||
color white
|
||||
border-color white
|
||||
.tooltip
|
||||
opacity 1
|
||||
&:active
|
||||
background-color brandColor
|
||||
border-color brandColor
|
||||
@@ -1,91 +0,0 @@
|
||||
tabNavColor = #999999
|
||||
iptFocusBorderColor = #369DCD
|
||||
|
||||
.CreateNewFolder.modal
|
||||
width 600px
|
||||
height 450px
|
||||
.closeBtn
|
||||
position absolute
|
||||
top 15px
|
||||
right 15px
|
||||
width 33px
|
||||
height 33px
|
||||
font-size 18px
|
||||
line-height 33px
|
||||
padding 0
|
||||
text-align center
|
||||
background-color transparent
|
||||
border none
|
||||
color stripBtnColor
|
||||
&:hover
|
||||
color stripHoverBtnColor
|
||||
.title
|
||||
font-size 32px
|
||||
text-align center
|
||||
font-weight bold
|
||||
margin-top 25px
|
||||
.ipt
|
||||
display block
|
||||
width 330px
|
||||
font-size 14px
|
||||
height 44px
|
||||
line-height 44px
|
||||
padding 0 15px
|
||||
border-radius 5px
|
||||
border solid 1px borderColor
|
||||
outline none
|
||||
margin 75px auto 20px
|
||||
&:focus
|
||||
border-color iptFocusBorderColor
|
||||
.colorSelect
|
||||
text-align center
|
||||
.option
|
||||
cursor pointer
|
||||
font-size 22px
|
||||
height 48px
|
||||
width 48px
|
||||
margin 0 2px
|
||||
border 1px solid transparent
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
line-height 45px
|
||||
text-align center
|
||||
transition 0.1s
|
||||
display inline-block
|
||||
&:hover
|
||||
border-color borderColor
|
||||
font-size 28px
|
||||
&.active
|
||||
font-size 28px
|
||||
border-color iptFocusBorderColor
|
||||
.alert
|
||||
color infoTextColor
|
||||
background-color infoBackgroundColor
|
||||
font-size 14px
|
||||
padding 15px 15px
|
||||
width 330px
|
||||
border-radius 5px
|
||||
margin 15px auto 0
|
||||
&.error
|
||||
color errorTextColor
|
||||
background-color errorBackgroundColor
|
||||
.confirmBtn
|
||||
display block
|
||||
position absolute
|
||||
left 205px
|
||||
bottom 44px
|
||||
width 240px
|
||||
font-size 24px
|
||||
height 44px
|
||||
line-height 24px
|
||||
font-weight bold
|
||||
background-color brandColor
|
||||
color white
|
||||
border none
|
||||
border-radius 5px
|
||||
margin 0 auto
|
||||
transition 0.1s
|
||||
&:hover
|
||||
transform scale(1.1)
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
@@ -1,199 +0,0 @@
|
||||
tabNavColor = #999999
|
||||
iptFocusBorderColor = #369DCD
|
||||
stripHoverBtnColor = #333
|
||||
stripBtnColor = lighten(stripHoverBtnColor, 35%)
|
||||
|
||||
.CreateNewTeam.modal
|
||||
width 600px
|
||||
height 450px
|
||||
.closeBtn
|
||||
position absolute
|
||||
top 15px
|
||||
right 15px
|
||||
width 33px
|
||||
height 33px
|
||||
font-size 18px
|
||||
line-height 33px
|
||||
padding 0
|
||||
text-align center
|
||||
background-color transparent
|
||||
border none
|
||||
color stripBtnColor
|
||||
&:hover
|
||||
color stripHoverBtnColor
|
||||
.title
|
||||
font-size 32px
|
||||
text-align center
|
||||
font-weight bold
|
||||
margin-top 25px
|
||||
.ipt
|
||||
display block
|
||||
width 330px
|
||||
font-size 14px
|
||||
height 44px
|
||||
line-height 44px
|
||||
padding 0 15px
|
||||
border-radius 5px
|
||||
border solid 1px borderColor
|
||||
outline none
|
||||
&:focus
|
||||
border-color iptFocusBorderColor
|
||||
.alert
|
||||
padding 0 15px
|
||||
height 44px
|
||||
line-height 44px
|
||||
width 300px
|
||||
margin 0 auto
|
||||
border-radius 5px
|
||||
color infoTextColor
|
||||
background-color infoBackgroundColor
|
||||
white-space nowrap
|
||||
overflow-x auto
|
||||
&.error
|
||||
color errorTextColor
|
||||
background-color errorBackgroundColor
|
||||
.confirmBtn
|
||||
display block
|
||||
position absolute
|
||||
left 180px
|
||||
bottom 44px
|
||||
width 240px
|
||||
font-size 24px
|
||||
height 44px
|
||||
line-height 24px
|
||||
font-weight bold
|
||||
background-color brandColor
|
||||
color white
|
||||
border none
|
||||
border-radius 5px
|
||||
margin 0 auto
|
||||
transition 0.1s
|
||||
&:hover
|
||||
transform scale(1.1)
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
.tabNav
|
||||
absolute left right
|
||||
bottom 15px
|
||||
height 33px
|
||||
line-height 33px
|
||||
width 150px
|
||||
text-align center
|
||||
font-size 12px
|
||||
color tabNavColor
|
||||
margin 0 auto
|
||||
transition 0.1s
|
||||
i.active
|
||||
color brandColor
|
||||
.createTab
|
||||
.ipt
|
||||
margin 105px auto 15px
|
||||
.selectTab
|
||||
.memberForm
|
||||
display block
|
||||
margin 25px auto 15px
|
||||
width 330px
|
||||
clearfix()
|
||||
padding 0
|
||||
font-size 14px
|
||||
height 44px
|
||||
line-height 44px
|
||||
outline none
|
||||
.Select.memberName
|
||||
display block
|
||||
margin 0
|
||||
float left
|
||||
width 280px
|
||||
height 44px
|
||||
font-size 14px
|
||||
border none
|
||||
line-height 44px
|
||||
background-color transparent
|
||||
outline none
|
||||
&.is-focus
|
||||
.Select-control
|
||||
border-color iptFocusBorderColor
|
||||
.Select-control
|
||||
height 44px
|
||||
line-height 44px
|
||||
padding 0 0 0 15px
|
||||
border-radius 5px 0 0 5px
|
||||
border 1px solid borderColor
|
||||
border-right none
|
||||
.Select-placeholder
|
||||
padding 0 0 0 15px
|
||||
.Seleect-arrow
|
||||
top 21px
|
||||
.Select-clear
|
||||
padding 0 10px
|
||||
.Select-noresults, .Select-option
|
||||
line-height 44px
|
||||
padding 0 0 0 15px
|
||||
|
||||
&:focus, &.focus
|
||||
border-color iptFocusBorderColor
|
||||
button
|
||||
font-weight 400
|
||||
height 44px
|
||||
cursor pointer
|
||||
margin 0
|
||||
padding 0
|
||||
width 50px
|
||||
float right
|
||||
border none
|
||||
background-color brandColor
|
||||
border-top-right-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
color white
|
||||
font-size 14px
|
||||
.memberList
|
||||
width 480px
|
||||
margin 0 auto
|
||||
height 190px
|
||||
overflow scroll
|
||||
border-bottom 1px solid borderColor
|
||||
&>li
|
||||
border-bottom 1px solid borderColor
|
||||
height 44px
|
||||
padding 0 25px
|
||||
clearfix()
|
||||
&:nth-last-child(1)
|
||||
border-bottom-color transparent
|
||||
.userPhoto
|
||||
width 30px
|
||||
height 30px
|
||||
float left
|
||||
margin-top 7px
|
||||
margin-right 15px
|
||||
border-radius 15px
|
||||
.userInfo
|
||||
float left
|
||||
margin-top 7px
|
||||
.userName
|
||||
font-size 16px
|
||||
margin-bottom 2px
|
||||
.userEmail
|
||||
font-size 12px
|
||||
.userControl
|
||||
float right
|
||||
.userRole
|
||||
float left
|
||||
height 30px
|
||||
background-color transparent
|
||||
border 1px solid transparent
|
||||
margin-top 7px
|
||||
margin-right 35px
|
||||
outline none
|
||||
cursor pointer
|
||||
&:hover
|
||||
border-color borderColor
|
||||
&:focus
|
||||
border-color iptFocusBorderColor
|
||||
button
|
||||
border none
|
||||
height 30px
|
||||
margin-top 7px
|
||||
background-color transparent
|
||||
color stripBtnColor
|
||||
&:hover
|
||||
color stripHoverBtnColor
|
||||
@@ -1,132 +0,0 @@
|
||||
|
||||
slideBgColor0 = #2BAC8F
|
||||
slideBgColor1 = #F68F92
|
||||
slideBgColor2 = #D6AD56
|
||||
slideBgColor3 = #26969B
|
||||
slideBgColor4 = #00B493
|
||||
|
||||
.Tutorial.modal
|
||||
background-color slideBgColor0
|
||||
color white !important
|
||||
width 720px
|
||||
height 480px
|
||||
margin-top 75px
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
|
||||
.priorBtn, .nextBtn
|
||||
font-size 72px
|
||||
position absolute
|
||||
background-color transparent
|
||||
color transparentify(white, 50%)
|
||||
transition 0.1s
|
||||
border none
|
||||
line-height 72px
|
||||
padding 0
|
||||
width 93px
|
||||
height 72px
|
||||
z-index 2
|
||||
top 189px
|
||||
&:hover
|
||||
color white
|
||||
&.hide
|
||||
opacity 0
|
||||
.priorBtn
|
||||
left 15px
|
||||
.nextBtn
|
||||
right 15px
|
||||
.title
|
||||
text-align center
|
||||
font-size 54px
|
||||
margin 40px 0
|
||||
.content
|
||||
text-align center
|
||||
font-size 22px
|
||||
line-height 1.8
|
||||
.dots
|
||||
position absolute
|
||||
left 0
|
||||
right 0
|
||||
bottom 25px
|
||||
margin 0 auto
|
||||
color gray
|
||||
text-align center
|
||||
z-index 2
|
||||
&>i
|
||||
transition 0.3s
|
||||
&.active
|
||||
color white
|
||||
.slide
|
||||
absolute top bottom left right
|
||||
z-index 1
|
||||
.slide0
|
||||
background-color slideBgColor0
|
||||
.content
|
||||
margin-top 100px
|
||||
.slide1
|
||||
background-color slideBgColor1
|
||||
.content
|
||||
.markdown
|
||||
background-color white
|
||||
color textColor
|
||||
width 480px
|
||||
height 140px
|
||||
margin 45px auto 0
|
||||
clearfix()
|
||||
text-align left
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
.left
|
||||
float left
|
||||
width 240px
|
||||
height 140px
|
||||
box-sizing border-box
|
||||
font-size 0.5em
|
||||
padding 30px
|
||||
border-right 1px solid borderColor
|
||||
.right
|
||||
width 240px
|
||||
height 140px
|
||||
float right
|
||||
box-sizing border-box
|
||||
padding: 28px 0 0 10px
|
||||
font-size 0.45em
|
||||
marked()
|
||||
ul
|
||||
padding-left 20px
|
||||
.slide2
|
||||
background-color slideBgColor2
|
||||
.code
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
text-align left
|
||||
width 480px
|
||||
heght 140px
|
||||
margin 45px auto 0
|
||||
font-size 14px
|
||||
.ace_editor
|
||||
height 140px
|
||||
.slide3
|
||||
background-color slideBgColor3
|
||||
.title
|
||||
margin-bottom 15px
|
||||
.content
|
||||
font-size 18px
|
||||
&>img
|
||||
margin-top 25px
|
||||
.slide4
|
||||
background-color slideBgColor4
|
||||
.content
|
||||
&>button
|
||||
background-color white
|
||||
color brandColor
|
||||
font-size 60px
|
||||
width 250px
|
||||
height 250px
|
||||
border-radius 125px
|
||||
border none
|
||||
transition 0.1s
|
||||
&:hover
|
||||
transform scale(1.2)
|
||||
|
||||
|
||||
@@ -1,390 +0,0 @@
|
||||
// .ModalBase
|
||||
// fixed top left bottom right
|
||||
// z-index modalZIndex
|
||||
// &.hide
|
||||
// display none
|
||||
// .modalBack
|
||||
// absolute top left bottom right
|
||||
// background-color modalBackColor
|
||||
// z-index modalZIndex + 1
|
||||
// .modal
|
||||
// position relative
|
||||
// width 650px
|
||||
// margin 50px auto 0
|
||||
// z-index modalZIndex + 2
|
||||
// box-shadow popupShadow
|
||||
// background-color white
|
||||
// border-radius 10px
|
||||
// padding 15px
|
||||
// .modal-header
|
||||
// border-bottom solid 1px borderColor
|
||||
// margin-bottom 10px
|
||||
// h1
|
||||
// padding 10px 0 15px
|
||||
// font-size 1.5em
|
||||
// .modal-body
|
||||
// p
|
||||
// margin-bottom 10px
|
||||
// .modal-footer
|
||||
// clearfix()
|
||||
// border-top solid 1px borderColor
|
||||
// padding-top 10px
|
||||
// .modal-control
|
||||
// float right
|
||||
//
|
||||
// .sideNavModal
|
||||
// height 500px
|
||||
// .leftPane
|
||||
// absolute top bottom left
|
||||
// width 175px
|
||||
// padding 20px
|
||||
// border-right solid 1px borderColor
|
||||
// .modalLabel
|
||||
// font-size 1.5em
|
||||
// margin-top 25px
|
||||
// margin-bottom 35px
|
||||
// color brandColor
|
||||
// .tabList button
|
||||
// btnStripDefault()
|
||||
// display block
|
||||
// width 100%
|
||||
// font-size 1.1em
|
||||
// padding 10px 5px
|
||||
// margin-bottom 15px
|
||||
// text-align left
|
||||
// .rightPane
|
||||
// absolute top bottom right
|
||||
// left 175px
|
||||
// padding 15px
|
||||
// overflow-y auto
|
||||
// .tab
|
||||
// padding-top 45px
|
||||
// .formField
|
||||
// position relative
|
||||
// clearfix()
|
||||
// margin-bottom 15px
|
||||
// label
|
||||
// width 30%
|
||||
// display block
|
||||
// line-height 33px
|
||||
// float left
|
||||
// input
|
||||
// width 70%
|
||||
// display block
|
||||
// borderInput()
|
||||
// height 33px
|
||||
// font-size 1em
|
||||
// border-radius 5px
|
||||
// float left
|
||||
// .formRadioField
|
||||
// margin-bottom 15px
|
||||
// input
|
||||
// margin-left 25px
|
||||
// .formConfirm
|
||||
// position relative
|
||||
// clearfix()
|
||||
// margin-bottom 15px
|
||||
// button
|
||||
// float right
|
||||
// btnDefault()
|
||||
// padding 10px 15px
|
||||
// border-radius 5px
|
||||
// font-size 1em
|
||||
// margin-left 5px
|
||||
// .alertInfo, .alertSuccess, .alertError
|
||||
// float right
|
||||
// padding 12px 10px
|
||||
// border-radius 5px
|
||||
// width 320px
|
||||
// font-size 1em
|
||||
// overflow-x hidden
|
||||
// white-space nowrap
|
||||
// transition 0.1s
|
||||
// &.hide
|
||||
// width 0
|
||||
// padding 12px 0
|
||||
// .alertInfo
|
||||
// alertInfo()
|
||||
// .alertSuccess
|
||||
// alertSuccess()
|
||||
// .alertError
|
||||
// alertError()
|
||||
// .PreferencesModal
|
||||
// .settingsTab
|
||||
// .categoryLabel
|
||||
// font-size 1.5em
|
||||
// margin-bottom 25px
|
||||
// .example
|
||||
// marked()
|
||||
// .aboutTab
|
||||
// padding-top 30px
|
||||
// .about1
|
||||
// margin-bottom 25px
|
||||
// .logo
|
||||
// display block
|
||||
// margin 0 auto
|
||||
// .appInfo
|
||||
// font-size 1.5em
|
||||
// text-align center
|
||||
// .about2
|
||||
// width 200px
|
||||
// margin 0 auto
|
||||
// .externalLabel
|
||||
// font-size 1.2em
|
||||
// margin-bottom 15px
|
||||
// .externalList
|
||||
// li
|
||||
// margin-bottom 15px
|
||||
// .PlanetSettingModal
|
||||
// .planetDeleteTab
|
||||
// padding-top 65px
|
||||
// p
|
||||
// margin-bottom 25px
|
||||
// strong
|
||||
// color brandColor
|
||||
// font-size 1.1em
|
||||
// input
|
||||
// borderInput()
|
||||
// margin-right 5px
|
||||
// height 33px
|
||||
// font-size 1em
|
||||
// border-radius 10px
|
||||
// .formConfirm
|
||||
// position relative
|
||||
// clearfix()
|
||||
// margin-bottom 15px
|
||||
// button
|
||||
// float right
|
||||
// btnDefault()
|
||||
// padding 10px 15px
|
||||
// border-radius 5px
|
||||
// font-size 1em
|
||||
// margin-left 5px
|
||||
// .alertInfo, .alertSuccess, .alertError
|
||||
// float right
|
||||
// padding 12px 10px
|
||||
// border-radius 5px
|
||||
// width 320px
|
||||
// font-size 1em
|
||||
// overflow-x hidden
|
||||
// white-space nowrap
|
||||
// transition 0.1s
|
||||
// &.hide
|
||||
// width 0
|
||||
// padding 12px 0
|
||||
// .alertInfo
|
||||
// alertInfo()
|
||||
// .alertSuccess
|
||||
// alertSuccess()
|
||||
// .alertError
|
||||
// alertError()
|
||||
// .TeamSettingsModal
|
||||
// .membersTab
|
||||
// .memberTable
|
||||
// width 100%
|
||||
// margin-bottom 25px
|
||||
// th
|
||||
// border-bottom solid 2px borderColor
|
||||
// td
|
||||
// border-bottom solid 1px borderColor
|
||||
// height 38px
|
||||
// button
|
||||
// btnDefault()
|
||||
// padding 5px
|
||||
// border-radius 5px
|
||||
// .roleSelect
|
||||
// height 33px
|
||||
// border solid 1px borderColor
|
||||
// background-color backgroundColor
|
||||
// th, td
|
||||
// padding 5px 0
|
||||
// .addMemberForm
|
||||
// .formLabel
|
||||
// margin-bottom 5px
|
||||
// .formGroup
|
||||
// clearfix()
|
||||
// .userNameSelect
|
||||
// display block
|
||||
// width 200px
|
||||
// margin-right 5px
|
||||
// float left
|
||||
// .roleSelect
|
||||
// display block
|
||||
// height 33px
|
||||
// border solid 1px borderColor
|
||||
// background-color backgroundColor
|
||||
// float left
|
||||
// margin-right 5px
|
||||
// .confirmButton
|
||||
// display block
|
||||
// height 33px
|
||||
// btnDefault()
|
||||
// border-radius 5px
|
||||
// float left
|
||||
//
|
||||
// .LaunchModal
|
||||
// .modal-tab
|
||||
// text-align center
|
||||
// margin-bottom 10px
|
||||
// .btn-primary, .btn-default
|
||||
// margin 0
|
||||
// border-radius 0
|
||||
// border-width 1px
|
||||
// width 150px
|
||||
// border-radius 0
|
||||
// &:nth-child(1)
|
||||
// border-right solid 1px borderColor
|
||||
// border-top-left-radius 5px
|
||||
// border-bottom-left-radius 5px
|
||||
// &:nth-child(2)
|
||||
// border-left none
|
||||
// border-top-right-radius 5px
|
||||
// border-bottom-right-radius 5px
|
||||
// .Select
|
||||
// .Select-control
|
||||
// border-color borderColor
|
||||
// &.is-focused
|
||||
// .Select-control
|
||||
// border-color brandBorderColor
|
||||
// .Select-menu-outer
|
||||
// border-color borderColor
|
||||
// .ace_editor
|
||||
// border-radius 5px
|
||||
// border solid 1px borderColor
|
||||
// .CodeForm, .NoteForm
|
||||
// .form-group
|
||||
// margin-bottom 10px
|
||||
// .CodeForm
|
||||
// textarea.codeDescription
|
||||
// height 75px
|
||||
// font-size 0.9em
|
||||
// margin-bottom 10px
|
||||
// .modeSelect.Select
|
||||
// display inline-block
|
||||
// width 200px
|
||||
// height 37px
|
||||
// .Select-control
|
||||
// height 37px
|
||||
// .ace_editor
|
||||
// height 258px
|
||||
// .NoteForm
|
||||
// .ace_editor
|
||||
// height 358px
|
||||
// .previewMode
|
||||
// absolute top right
|
||||
// font-size 0.8em
|
||||
// line-height 24px
|
||||
// padding 5 15px
|
||||
// background-color transparentify(invBackgroundColor, 0.2)
|
||||
// color invTextColor
|
||||
// border-top-right-radius 5px
|
||||
// .marked
|
||||
// height 360px
|
||||
// overflow-x hidden
|
||||
// overflow-y auto
|
||||
// box-sizing border-box
|
||||
// padding 5px
|
||||
// border solid 1px borderColor
|
||||
// border-radius 5px
|
||||
// marked()
|
||||
//
|
||||
//
|
||||
// .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
|
||||
// padding 60px 0
|
||||
// .nameInput
|
||||
// width 80%
|
||||
// font-size 1.3em
|
||||
// margin 25px auto 15px
|
||||
// text-align center
|
||||
// .userNameSelect
|
||||
// width 80%
|
||||
// font-size 1.3em
|
||||
// margin 35px auto
|
||||
// text-align center
|
||||
// .formField
|
||||
// text-align center
|
||||
// margin 0 auto 25px
|
||||
// select
|
||||
// display inline-block
|
||||
// width 150px
|
||||
// height 33px
|
||||
// border solid 1px borderColor
|
||||
// background-color white
|
||||
// padding 0 10px
|
||||
// margin 0 15px
|
||||
// .submitButton
|
||||
// display block
|
||||
// margin 0 auto
|
||||
// box-sizing border-box
|
||||
// width 55px
|
||||
// height 55px
|
||||
// circle()
|
||||
// btnPrimary()
|
||||
// .errorAlert
|
||||
// alertError()
|
||||
// padding 12px 10px
|
||||
// border-radius 5px
|
||||
// text-align center
|
||||
// display block
|
||||
// width 360px
|
||||
// margin 0 auto 15px
|
||||
//
|
||||
// .ContactModal
|
||||
// padding 15px
|
||||
// .contactForm
|
||||
// .formField
|
||||
// width 100%
|
||||
// margin-bottom 10px
|
||||
// input, textarea
|
||||
// display block
|
||||
// width 100%
|
||||
// borderInput()
|
||||
// border-radius 5px
|
||||
// input
|
||||
// height 33px
|
||||
// font-size 1em
|
||||
// textarea
|
||||
// height 175px
|
||||
// font-size 1em
|
||||
// .formControl
|
||||
// clearfix()
|
||||
// button
|
||||
// float right
|
||||
// btnDefault()
|
||||
// height 44px
|
||||
// padding 0 15px
|
||||
// border-radius 5px
|
||||
// margin-left 5px
|
||||
// font-size 1em
|
||||
// button.sendButton
|
||||
// btnPrimary()
|
||||
// .confirmation
|
||||
// .confirmationMessage
|
||||
// padding 35px 0
|
||||
// text-align center
|
||||
// font-size 1.1em
|
||||
// .doneButton
|
||||
// btnDefault()
|
||||
// height 44px
|
||||
// padding 0 35px
|
||||
// border-radius 5px
|
||||
// display block
|
||||
// margin 0 auto 25px
|
||||
//
|
||||
// .LogoutModal
|
||||
// padding 65px 0 45px
|
||||
// width 350px
|
||||
// .messageLabel
|
||||
// text-align center
|
||||
// font-size 1.1em
|
||||
// margin-bottom 35px
|
||||
// .formControl
|
||||
// text-align center
|
||||
// button
|
||||
// btnDefault()
|
||||
// border-radius 5px
|
||||
// height 44px
|
||||
// margin 15px 5px
|
||||
// padding 0 15px
|
||||
// button.logoutButton
|
||||
// btnPrimary()
|
||||
Reference in New Issue
Block a user