mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
set design create team modal
This commit is contained in:
Rokt33r
@@ -1,53 +0,0 @@
|
||||
var React = require('react')
|
||||
var _ = require('lodash')
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes: {
|
||||
createNewArticle: React.PropTypes.func,
|
||||
search: React.PropTypes.string,
|
||||
user: React.PropTypes.object
|
||||
},
|
||||
render: function () {
|
||||
var user = this.props.user
|
||||
|
||||
var folders = _.isArray(user.Folders) ? user.Folders.map(function (folder) {
|
||||
var isActive = this.props.search.match(new RegExp('in:' + folder.name))
|
||||
return (
|
||||
<button className={'folderButton' + (isActive ? ' active' : '')}><i className='fa fa-fw fa-square'/> {folder.name}</button>
|
||||
)
|
||||
}.bind(this)) : null
|
||||
|
||||
var members = _.isArray(user.Members) ? user.Members.map(function (member) {
|
||||
return <button className='memberButton'>{member.profileName}</button>
|
||||
}) : null
|
||||
|
||||
return (
|
||||
<div className='UserNavigator'>
|
||||
<div className='profile'>
|
||||
<div className='profileName'>{user.profileName}</div>
|
||||
<div className='name'>{user.name}</div>
|
||||
<div className='dropdownIcon'><i className='fa fa-chevron-down'/></div>
|
||||
</div>
|
||||
|
||||
<div className='control'>
|
||||
<button onClick={this.props.createNewArticle} className='newPostButton'>New Post</button>
|
||||
</div>
|
||||
|
||||
<div className='menu'>
|
||||
<div className='menuGruop folders'>
|
||||
<div className='label'>
|
||||
Folders
|
||||
<button className='plusButton'><i className='fa fa-plus'/></button>
|
||||
</div>
|
||||
<button className={'folderButton' + (this.props.search.match(/in:[a-z0-9-_]/) ? '' : ' active')}>All Folders</button>
|
||||
{folders}
|
||||
</div>
|
||||
|
||||
{user.userType === 'team' ? (
|
||||
<div className='members'>{members}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -39,13 +39,11 @@ export default class LoginPage extends React.Component {
|
||||
console.error(err)
|
||||
if (err.response == null) {
|
||||
return this.setState({
|
||||
error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
|
||||
error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
|
||||
isSending: false
|
||||
})
|
||||
}
|
||||
|
||||
var res = err.response
|
||||
|
||||
// Connection Failed or Whatever
|
||||
this.setState({
|
||||
error: err.response.body,
|
||||
|
||||
@@ -37,7 +37,7 @@ export default class SignupContainer extends React.Component {
|
||||
console.error(err)
|
||||
if (err.response == null) {
|
||||
return this.setState({
|
||||
error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
|
||||
error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
|
||||
isSending: false
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,8 +1,18 @@
|
||||
import React, { Component, PropTypes } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import ProfileImage from '../../components/ProfileImage'
|
||||
import { openModal } from '../lib/modal'
|
||||
import CreateNewTeam from '../lib/modal/CreateNewTeam'
|
||||
|
||||
export default class UserNavigator extends Component {
|
||||
handleClick (e) {
|
||||
openModal(CreateNewTeam)
|
||||
}
|
||||
|
||||
// for dev
|
||||
componentDidMount () {
|
||||
openModal(CreateNewTeam)
|
||||
}
|
||||
|
||||
renderUserList () {
|
||||
var users = this.props.users.map((user, index) => (
|
||||
@@ -26,7 +36,7 @@ export default class UserNavigator extends Component {
|
||||
return (
|
||||
<div className='UserNavigator'>
|
||||
{this.renderUserList()}
|
||||
<button className='createTeamBtn'>
|
||||
<button className='createTeamBtn' onClick={e => this.handleClick(e)}>
|
||||
+
|
||||
<div className='tooltip'>Create a new team</div>
|
||||
</button>
|
||||
|
||||
11
browser/main/HomeContainer/lib/api.js
Normal file
11
browser/main/HomeContainer/lib/api.js
Normal file
@@ -0,0 +1,11 @@
|
||||
var request = require('superagent-promise')(require('superagent'), Promise)
|
||||
var apiUrl = require('../../../../config').apiUrl
|
||||
|
||||
export function createTeam (input) {
|
||||
return request
|
||||
.post(apiUrl + 'teams')
|
||||
.set({
|
||||
Authorization: 'Bearer ' + localStorage.getItem('token')
|
||||
})
|
||||
.send(input)
|
||||
}
|
||||
154
browser/main/HomeContainer/lib/modal/CreateNewTeam.js
Normal file
154
browser/main/HomeContainer/lib/modal/CreateNewTeam.js
Normal file
@@ -0,0 +1,154 @@
|
||||
import React, { PropTypes } from 'react'
|
||||
import ProfileImage from '../../../components/ProfileImage'
|
||||
import { createTeam } from '../api'
|
||||
import linkState from '../../../helpers/linkState'
|
||||
|
||||
export default class CreateNewTeam extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
create: {
|
||||
name: '',
|
||||
alert: null
|
||||
},
|
||||
select: {
|
||||
team: {"name":"test123",
|
||||
"profileName":"test123",
|
||||
"userType":"team",
|
||||
"updatedAt":"2015-10-11T09:01:01.277Z",
|
||||
"createdAt":"2015-10-11T09:01:01.277Z",
|
||||
"id":220,"Members":[{"id":213,"email":"fluke8259@gmail.com","name":"rokt33r","profileName":"Rokt33r","userType":"person","createdAt":"2015-10-05T09:01:30.000Z","updatedAt":"2015-10-05T09:01:30.000Z","_pivot_TeamId":220,"_pivot_MemberId":213,"_pivot_role":"owner"}]
|
||||
},
|
||||
alert: null
|
||||
},
|
||||
currentTab: 'select'
|
||||
}
|
||||
}
|
||||
|
||||
handleCloseClick (e) {
|
||||
this.props.close()
|
||||
}
|
||||
|
||||
handleContinueClick (e) {
|
||||
let createState = this.state.create
|
||||
createState.isSending = true
|
||||
createState.alert = {
|
||||
type: 'info',
|
||||
message: 'sending...'
|
||||
}
|
||||
this.setState({create: createState})
|
||||
|
||||
function onTeamCreate (res) {
|
||||
let createState = this.state.create
|
||||
createState.isSending = false
|
||||
createState.alert = null
|
||||
|
||||
let selectState = this.state.select
|
||||
selectState.team = res.body
|
||||
|
||||
this.setState({
|
||||
currentTab: 'select',
|
||||
create: createState,
|
||||
select: {
|
||||
team: res.body
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onError (err) {
|
||||
let errorMessage = err.response != null ? err.response.body.message : err.message
|
||||
|
||||
let createState = this.state.create
|
||||
createState.isSending = false
|
||||
createState.alert = {
|
||||
type: 'error',
|
||||
message: 'Can\'t connect to API server.'
|
||||
}
|
||||
|
||||
this.setState({
|
||||
create: createState
|
||||
})
|
||||
}
|
||||
|
||||
createTeam({name: this.state.create.name})
|
||||
.then(onTeamCreate.bind(this))
|
||||
.catch(onError.bind(this))
|
||||
}
|
||||
|
||||
renderCreateTab () {
|
||||
let createState = this.state.create
|
||||
let alertEl = createState.alert != null ? (
|
||||
<p className={['alert'].concat([createState.alert.type]).join(' ')}>{createState.alert.message}</p>
|
||||
) : null
|
||||
|
||||
return (
|
||||
<div className='createTab'>
|
||||
<div className='title'>Create new team</div>
|
||||
|
||||
<input valueLink={linkState(this, 'create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
|
||||
{alertEl}
|
||||
<button onClick={e => this.handleContinueClick(e)} disabled={createState.isSending} className='confirmBtn'>Continue <i className='fa fa-arrow-right fa-fw'/></button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderSelectTab () {
|
||||
let selectState = this.state.select
|
||||
console.log(selectState)
|
||||
let membersEl = selectState.team.Members.map(member => {
|
||||
return (
|
||||
<li key={'user-' + member.id}>
|
||||
<ProfileImage className='userPhoto' email={member.email} size='30'/>
|
||||
<div className='userInfo'>
|
||||
<div className='userName'>{`${member.profileName} (${member.name})`}</div>
|
||||
<div className='userEmail'>{member.email}</div>
|
||||
</div>
|
||||
<div className='userControl'>
|
||||
<select value={member._pivot_role} className='userRole'>
|
||||
<option value='owner'>Owner</option>
|
||||
<option value='member'>Member</option>
|
||||
</select>
|
||||
<button><i className='fa fa-times fa-fw'/></button>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='selectTab'>
|
||||
<div className='title'>Select member</div>
|
||||
<div className='ipt'>
|
||||
<input type='text' placeholder='Enter user name or e-mail'/>
|
||||
<button>add</button>
|
||||
</div>
|
||||
<ul className='memberList'>
|
||||
{membersEl}
|
||||
</ul>
|
||||
<button onClick={e => this.props.close(e)}className='confirmBtn'>Done</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
let currentTab = this.state.currentTab === 'create'
|
||||
? this.renderCreateTab()
|
||||
: this.renderSelectTab()
|
||||
|
||||
return (
|
||||
<div className='CreateNewTeam modal'>
|
||||
<button onClick={e => this.handleCloseClick(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
|
||||
|
||||
{currentTab}
|
||||
|
||||
<div className='tabNav'>
|
||||
<i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'create' ? ' active' : '')}/>
|
||||
<i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'select' ? ' active' : '')}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
CreateNewTeam.propTypes = {
|
||||
close: PropTypes.func
|
||||
}
|
||||
41
browser/main/HomeContainer/lib/modal/index.js
Normal file
41
browser/main/HomeContainer/lib/modal/index.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
|
||||
class ModalBase extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
component: null,
|
||||
componentProps: {},
|
||||
isHidden: true
|
||||
}
|
||||
}
|
||||
|
||||
close () {
|
||||
if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
|
||||
<div onClick={e => this.close(e)} className='modalBack'/>
|
||||
{this.state.component == null ? null : (
|
||||
<this.state.component {...this.state.componentProps} close={this.close}/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
let el = document.createElement('div')
|
||||
document.body.appendChild(el)
|
||||
let modalBase = React.render(<ModalBase/>, el)
|
||||
|
||||
export function openModal (component, props) {
|
||||
if (modalBase == null) { return }
|
||||
modalBase.setState({component: component, componentProps: props, isHidden: false})
|
||||
}
|
||||
|
||||
export function closeModal () {
|
||||
if (modalBase == null) { return }
|
||||
modalBase.setState({isHidden: true})
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
/* global localStorage */
|
||||
|
||||
var request = require('superagent-promise')(require('superagent'), Promise)
|
||||
var apiUrl = require('../../../config').apiUrl
|
||||
|
||||
|
||||
@@ -21,9 +21,9 @@ function setPartialState (component, path, value) {
|
||||
updateIn(component.state, path, value))
|
||||
}
|
||||
|
||||
export default function linkState (path) {
|
||||
export default function linkState (el, path) {
|
||||
return {
|
||||
value: getIn(this.state, path),
|
||||
requestChange: setPartialState.bind(null, this, path)
|
||||
value: getIn(el.state, path),
|
||||
requestChange: setPartialState.bind(null, el, path)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
@import './UserNavigator'
|
||||
@import './ArticleTopBar'
|
||||
@import './ArticleNavigator'
|
||||
@import './ArticleList'
|
||||
@import './ArticleDetail'
|
||||
@require './components/UserNavigator'
|
||||
@require './components/ArticleNavigator'
|
||||
@require './components/ArticleTopBar'
|
||||
@require './components/ArticleList'
|
||||
@require './components/ArticleDetail'
|
||||
|
||||
@require './lib/modal'
|
||||
@require './lib/CreateNewTeam'
|
||||
|
||||
172
browser/styles/main/HomeContainer/lib/CreateNewTeam.styl
Normal file
172
browser/styles/main/HomeContainer/lib/CreateNewTeam.styl
Normal file
@@ -0,0 +1,172 @@
|
||||
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
|
||||
&.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
|
||||
.ipt
|
||||
margin 25px auto 15px
|
||||
clearfix()
|
||||
padding 0
|
||||
input
|
||||
display block
|
||||
margin 0
|
||||
float left
|
||||
width 280px
|
||||
height 42px
|
||||
padding 0 0 0 15px
|
||||
font-size 14px
|
||||
border none
|
||||
line-height 44px
|
||||
background-color transparent
|
||||
outline none
|
||||
&:hover
|
||||
border-color iptFocusBorderColor
|
||||
button
|
||||
font-weight 400
|
||||
height 42px
|
||||
cursor pointer
|
||||
margin 0
|
||||
padding 0
|
||||
width 48px
|
||||
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
|
||||
21
browser/styles/main/HomeContainer/lib/modal.styl
Normal file
21
browser/styles/main/HomeContainer/lib/modal.styl
Normal file
@@ -0,0 +1,21 @@
|
||||
modalZIndex= 1000
|
||||
modalBackColor = transparentify(black, 65%)
|
||||
|
||||
.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
|
||||
background-color white
|
||||
padding 15px
|
||||
color #666666
|
||||
border-radius 5px
|
||||
@@ -122,6 +122,6 @@ textarea.block-input
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-top -22px
|
||||
margin-left -97px
|
||||
margin-left -107px
|
||||
&:hover .tooltip
|
||||
opacity 1
|
||||
|
||||
@@ -1,390 +1,390 @@
|
||||
.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()
|
||||
// .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()
|
||||
|
||||
@@ -25,7 +25,7 @@ btnHighlightenColor = #000
|
||||
brandColor = #2BAC8F
|
||||
|
||||
popupShadow = 0 0 5px 0 #888
|
||||
modalBackColor = transparentify(white, 65%)
|
||||
|
||||
|
||||
tableHeadBgColor = white
|
||||
tableOddBgColor = #F9F9F9
|
||||
@@ -41,5 +41,4 @@ errorTextColor= #A64444
|
||||
infoBackgroundColor= #D9EDF7
|
||||
infoTextColor= #34708E
|
||||
|
||||
modalZIndex= 1000
|
||||
popupZIndex= 500
|
||||
|
||||
Reference in New Issue
Block a user