mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +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)
|
console.error(err)
|
||||||
if (err.response == null) {
|
if (err.response == null) {
|
||||||
return this.setState({
|
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
|
isSending: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
var res = err.response
|
|
||||||
|
|
||||||
// Connection Failed or Whatever
|
// Connection Failed or Whatever
|
||||||
this.setState({
|
this.setState({
|
||||||
error: err.response.body,
|
error: err.response.body,
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ export default class SignupContainer extends React.Component {
|
|||||||
console.error(err)
|
console.error(err)
|
||||||
if (err.response == null) {
|
if (err.response == null) {
|
||||||
return this.setState({
|
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
|
isSending: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,18 @@
|
|||||||
import React, { Component, PropTypes } from 'react'
|
import React, { Component, PropTypes } from 'react'
|
||||||
import { Link } from 'react-router'
|
import { Link } from 'react-router'
|
||||||
import ProfileImage from '../../components/ProfileImage'
|
import ProfileImage from '../../components/ProfileImage'
|
||||||
|
import { openModal } from '../lib/modal'
|
||||||
|
import CreateNewTeam from '../lib/modal/CreateNewTeam'
|
||||||
|
|
||||||
export default class UserNavigator extends Component {
|
export default class UserNavigator extends Component {
|
||||||
|
handleClick (e) {
|
||||||
|
openModal(CreateNewTeam)
|
||||||
|
}
|
||||||
|
|
||||||
|
// for dev
|
||||||
|
componentDidMount () {
|
||||||
|
openModal(CreateNewTeam)
|
||||||
|
}
|
||||||
|
|
||||||
renderUserList () {
|
renderUserList () {
|
||||||
var users = this.props.users.map((user, index) => (
|
var users = this.props.users.map((user, index) => (
|
||||||
@@ -26,7 +36,7 @@ export default class UserNavigator extends Component {
|
|||||||
return (
|
return (
|
||||||
<div className='UserNavigator'>
|
<div className='UserNavigator'>
|
||||||
{this.renderUserList()}
|
{this.renderUserList()}
|
||||||
<button className='createTeamBtn'>
|
<button className='createTeamBtn' onClick={e => this.handleClick(e)}>
|
||||||
+
|
+
|
||||||
<div className='tooltip'>Create a new team</div>
|
<div className='tooltip'>Create a new team</div>
|
||||||
</button>
|
</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 request = require('superagent-promise')(require('superagent'), Promise)
|
||||||
var apiUrl = require('../../../config').apiUrl
|
var apiUrl = require('../../../config').apiUrl
|
||||||
|
|
||||||
|
|||||||
@@ -21,9 +21,9 @@ function setPartialState (component, path, value) {
|
|||||||
updateIn(component.state, path, value))
|
updateIn(component.state, path, value))
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function linkState (path) {
|
export default function linkState (el, path) {
|
||||||
return {
|
return {
|
||||||
value: getIn(this.state, path),
|
value: getIn(el.state, path),
|
||||||
requestChange: setPartialState.bind(null, this, path)
|
requestChange: setPartialState.bind(null, el, path)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
@import './UserNavigator'
|
@require './components/UserNavigator'
|
||||||
@import './ArticleTopBar'
|
@require './components/ArticleNavigator'
|
||||||
@import './ArticleNavigator'
|
@require './components/ArticleTopBar'
|
||||||
@import './ArticleList'
|
@require './components/ArticleList'
|
||||||
@import './ArticleDetail'
|
@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
|
||||||
tooltip()
|
tooltip()
|
||||||
margin-top -22px
|
margin-top -22px
|
||||||
margin-left -97px
|
margin-left -107px
|
||||||
&:hover .tooltip
|
&:hover .tooltip
|
||||||
opacity 1
|
opacity 1
|
||||||
|
|||||||
@@ -1,390 +1,390 @@
|
|||||||
.ModalBase
|
// .ModalBase
|
||||||
fixed top left bottom right
|
// fixed top left bottom right
|
||||||
z-index modalZIndex
|
// z-index modalZIndex
|
||||||
&.hide
|
// &.hide
|
||||||
display none
|
// display none
|
||||||
.modalBack
|
// .modalBack
|
||||||
absolute top left bottom right
|
// absolute top left bottom right
|
||||||
background-color modalBackColor
|
// background-color modalBackColor
|
||||||
z-index modalZIndex + 1
|
// z-index modalZIndex + 1
|
||||||
.modal
|
// .modal
|
||||||
position relative
|
// position relative
|
||||||
width 650px
|
// width 650px
|
||||||
margin 50px auto 0
|
// margin 50px auto 0
|
||||||
z-index modalZIndex + 2
|
// z-index modalZIndex + 2
|
||||||
box-shadow popupShadow
|
// box-shadow popupShadow
|
||||||
background-color white
|
// background-color white
|
||||||
border-radius 10px
|
// border-radius 10px
|
||||||
padding 15px
|
// padding 15px
|
||||||
.modal-header
|
// .modal-header
|
||||||
border-bottom solid 1px borderColor
|
// border-bottom solid 1px borderColor
|
||||||
margin-bottom 10px
|
// margin-bottom 10px
|
||||||
h1
|
// h1
|
||||||
padding 10px 0 15px
|
// padding 10px 0 15px
|
||||||
font-size 1.5em
|
// font-size 1.5em
|
||||||
.modal-body
|
// .modal-body
|
||||||
p
|
// p
|
||||||
margin-bottom 10px
|
// margin-bottom 10px
|
||||||
.modal-footer
|
// .modal-footer
|
||||||
clearfix()
|
// clearfix()
|
||||||
border-top solid 1px borderColor
|
// border-top solid 1px borderColor
|
||||||
padding-top 10px
|
// padding-top 10px
|
||||||
.modal-control
|
// .modal-control
|
||||||
float right
|
// float right
|
||||||
|
//
|
||||||
.sideNavModal
|
// .sideNavModal
|
||||||
height 500px
|
// height 500px
|
||||||
.leftPane
|
// .leftPane
|
||||||
absolute top bottom left
|
// absolute top bottom left
|
||||||
width 175px
|
// width 175px
|
||||||
padding 20px
|
// padding 20px
|
||||||
border-right solid 1px borderColor
|
// border-right solid 1px borderColor
|
||||||
.modalLabel
|
// .modalLabel
|
||||||
font-size 1.5em
|
// font-size 1.5em
|
||||||
margin-top 25px
|
// margin-top 25px
|
||||||
margin-bottom 35px
|
// margin-bottom 35px
|
||||||
color brandColor
|
// color brandColor
|
||||||
.tabList button
|
// .tabList button
|
||||||
btnStripDefault()
|
// btnStripDefault()
|
||||||
display block
|
// display block
|
||||||
width 100%
|
// width 100%
|
||||||
font-size 1.1em
|
// font-size 1.1em
|
||||||
padding 10px 5px
|
// padding 10px 5px
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
text-align left
|
// text-align left
|
||||||
.rightPane
|
// .rightPane
|
||||||
absolute top bottom right
|
// absolute top bottom right
|
||||||
left 175px
|
// left 175px
|
||||||
padding 15px
|
// padding 15px
|
||||||
overflow-y auto
|
// overflow-y auto
|
||||||
.tab
|
// .tab
|
||||||
padding-top 45px
|
// padding-top 45px
|
||||||
.formField
|
// .formField
|
||||||
position relative
|
// position relative
|
||||||
clearfix()
|
// clearfix()
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
label
|
// label
|
||||||
width 30%
|
// width 30%
|
||||||
display block
|
// display block
|
||||||
line-height 33px
|
// line-height 33px
|
||||||
float left
|
// float left
|
||||||
input
|
// input
|
||||||
width 70%
|
// width 70%
|
||||||
display block
|
// display block
|
||||||
borderInput()
|
// borderInput()
|
||||||
height 33px
|
// height 33px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
float left
|
// float left
|
||||||
.formRadioField
|
// .formRadioField
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
input
|
// input
|
||||||
margin-left 25px
|
// margin-left 25px
|
||||||
.formConfirm
|
// .formConfirm
|
||||||
position relative
|
// position relative
|
||||||
clearfix()
|
// clearfix()
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
button
|
// button
|
||||||
float right
|
// float right
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
padding 10px 15px
|
// padding 10px 15px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
margin-left 5px
|
// margin-left 5px
|
||||||
.alertInfo, .alertSuccess, .alertError
|
// .alertInfo, .alertSuccess, .alertError
|
||||||
float right
|
// float right
|
||||||
padding 12px 10px
|
// padding 12px 10px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
width 320px
|
// width 320px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
overflow-x hidden
|
// overflow-x hidden
|
||||||
white-space nowrap
|
// white-space nowrap
|
||||||
transition 0.1s
|
// transition 0.1s
|
||||||
&.hide
|
// &.hide
|
||||||
width 0
|
// width 0
|
||||||
padding 12px 0
|
// padding 12px 0
|
||||||
.alertInfo
|
// .alertInfo
|
||||||
alertInfo()
|
// alertInfo()
|
||||||
.alertSuccess
|
// .alertSuccess
|
||||||
alertSuccess()
|
// alertSuccess()
|
||||||
.alertError
|
// .alertError
|
||||||
alertError()
|
// alertError()
|
||||||
.PreferencesModal
|
// .PreferencesModal
|
||||||
.settingsTab
|
// .settingsTab
|
||||||
.categoryLabel
|
// .categoryLabel
|
||||||
font-size 1.5em
|
// font-size 1.5em
|
||||||
margin-bottom 25px
|
// margin-bottom 25px
|
||||||
.example
|
// .example
|
||||||
marked()
|
// marked()
|
||||||
.aboutTab
|
// .aboutTab
|
||||||
padding-top 30px
|
// padding-top 30px
|
||||||
.about1
|
// .about1
|
||||||
margin-bottom 25px
|
// margin-bottom 25px
|
||||||
.logo
|
// .logo
|
||||||
display block
|
// display block
|
||||||
margin 0 auto
|
// margin 0 auto
|
||||||
.appInfo
|
// .appInfo
|
||||||
font-size 1.5em
|
// font-size 1.5em
|
||||||
text-align center
|
// text-align center
|
||||||
.about2
|
// .about2
|
||||||
width 200px
|
// width 200px
|
||||||
margin 0 auto
|
// margin 0 auto
|
||||||
.externalLabel
|
// .externalLabel
|
||||||
font-size 1.2em
|
// font-size 1.2em
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
.externalList
|
// .externalList
|
||||||
li
|
// li
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
.PlanetSettingModal
|
// .PlanetSettingModal
|
||||||
.planetDeleteTab
|
// .planetDeleteTab
|
||||||
padding-top 65px
|
// padding-top 65px
|
||||||
p
|
// p
|
||||||
margin-bottom 25px
|
// margin-bottom 25px
|
||||||
strong
|
// strong
|
||||||
color brandColor
|
// color brandColor
|
||||||
font-size 1.1em
|
// font-size 1.1em
|
||||||
input
|
// input
|
||||||
borderInput()
|
// borderInput()
|
||||||
margin-right 5px
|
// margin-right 5px
|
||||||
height 33px
|
// height 33px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
border-radius 10px
|
// border-radius 10px
|
||||||
.formConfirm
|
// .formConfirm
|
||||||
position relative
|
// position relative
|
||||||
clearfix()
|
// clearfix()
|
||||||
margin-bottom 15px
|
// margin-bottom 15px
|
||||||
button
|
// button
|
||||||
float right
|
// float right
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
padding 10px 15px
|
// padding 10px 15px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
margin-left 5px
|
// margin-left 5px
|
||||||
.alertInfo, .alertSuccess, .alertError
|
// .alertInfo, .alertSuccess, .alertError
|
||||||
float right
|
// float right
|
||||||
padding 12px 10px
|
// padding 12px 10px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
width 320px
|
// width 320px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
overflow-x hidden
|
// overflow-x hidden
|
||||||
white-space nowrap
|
// white-space nowrap
|
||||||
transition 0.1s
|
// transition 0.1s
|
||||||
&.hide
|
// &.hide
|
||||||
width 0
|
// width 0
|
||||||
padding 12px 0
|
// padding 12px 0
|
||||||
.alertInfo
|
// .alertInfo
|
||||||
alertInfo()
|
// alertInfo()
|
||||||
.alertSuccess
|
// .alertSuccess
|
||||||
alertSuccess()
|
// alertSuccess()
|
||||||
.alertError
|
// .alertError
|
||||||
alertError()
|
// alertError()
|
||||||
.TeamSettingsModal
|
// .TeamSettingsModal
|
||||||
.membersTab
|
// .membersTab
|
||||||
.memberTable
|
// .memberTable
|
||||||
width 100%
|
// width 100%
|
||||||
margin-bottom 25px
|
// margin-bottom 25px
|
||||||
th
|
// th
|
||||||
border-bottom solid 2px borderColor
|
// border-bottom solid 2px borderColor
|
||||||
td
|
// td
|
||||||
border-bottom solid 1px borderColor
|
// border-bottom solid 1px borderColor
|
||||||
height 38px
|
// height 38px
|
||||||
button
|
// button
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
padding 5px
|
// padding 5px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
.roleSelect
|
// .roleSelect
|
||||||
height 33px
|
// height 33px
|
||||||
border solid 1px borderColor
|
// border solid 1px borderColor
|
||||||
background-color backgroundColor
|
// background-color backgroundColor
|
||||||
th, td
|
// th, td
|
||||||
padding 5px 0
|
// padding 5px 0
|
||||||
.addMemberForm
|
// .addMemberForm
|
||||||
.formLabel
|
// .formLabel
|
||||||
margin-bottom 5px
|
// margin-bottom 5px
|
||||||
.formGroup
|
// .formGroup
|
||||||
clearfix()
|
// clearfix()
|
||||||
.userNameSelect
|
// .userNameSelect
|
||||||
display block
|
// display block
|
||||||
width 200px
|
// width 200px
|
||||||
margin-right 5px
|
// margin-right 5px
|
||||||
float left
|
// float left
|
||||||
.roleSelect
|
// .roleSelect
|
||||||
display block
|
// display block
|
||||||
height 33px
|
// height 33px
|
||||||
border solid 1px borderColor
|
// border solid 1px borderColor
|
||||||
background-color backgroundColor
|
// background-color backgroundColor
|
||||||
float left
|
// float left
|
||||||
margin-right 5px
|
// margin-right 5px
|
||||||
.confirmButton
|
// .confirmButton
|
||||||
display block
|
// display block
|
||||||
height 33px
|
// height 33px
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
float left
|
// float left
|
||||||
|
//
|
||||||
.LaunchModal
|
// .LaunchModal
|
||||||
.modal-tab
|
// .modal-tab
|
||||||
text-align center
|
// text-align center
|
||||||
margin-bottom 10px
|
// margin-bottom 10px
|
||||||
.btn-primary, .btn-default
|
// .btn-primary, .btn-default
|
||||||
margin 0
|
// margin 0
|
||||||
border-radius 0
|
// border-radius 0
|
||||||
border-width 1px
|
// border-width 1px
|
||||||
width 150px
|
// width 150px
|
||||||
border-radius 0
|
// border-radius 0
|
||||||
&:nth-child(1)
|
// &:nth-child(1)
|
||||||
border-right solid 1px borderColor
|
// border-right solid 1px borderColor
|
||||||
border-top-left-radius 5px
|
// border-top-left-radius 5px
|
||||||
border-bottom-left-radius 5px
|
// border-bottom-left-radius 5px
|
||||||
&:nth-child(2)
|
// &:nth-child(2)
|
||||||
border-left none
|
// border-left none
|
||||||
border-top-right-radius 5px
|
// border-top-right-radius 5px
|
||||||
border-bottom-right-radius 5px
|
// border-bottom-right-radius 5px
|
||||||
.Select
|
// .Select
|
||||||
.Select-control
|
// .Select-control
|
||||||
border-color borderColor
|
// border-color borderColor
|
||||||
&.is-focused
|
// &.is-focused
|
||||||
.Select-control
|
// .Select-control
|
||||||
border-color brandBorderColor
|
// border-color brandBorderColor
|
||||||
.Select-menu-outer
|
// .Select-menu-outer
|
||||||
border-color borderColor
|
// border-color borderColor
|
||||||
.ace_editor
|
// .ace_editor
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
border solid 1px borderColor
|
// border solid 1px borderColor
|
||||||
.CodeForm, .NoteForm
|
// .CodeForm, .NoteForm
|
||||||
.form-group
|
// .form-group
|
||||||
margin-bottom 10px
|
// margin-bottom 10px
|
||||||
.CodeForm
|
// .CodeForm
|
||||||
textarea.codeDescription
|
// textarea.codeDescription
|
||||||
height 75px
|
// height 75px
|
||||||
font-size 0.9em
|
// font-size 0.9em
|
||||||
margin-bottom 10px
|
// margin-bottom 10px
|
||||||
.modeSelect.Select
|
// .modeSelect.Select
|
||||||
display inline-block
|
// display inline-block
|
||||||
width 200px
|
// width 200px
|
||||||
height 37px
|
// height 37px
|
||||||
.Select-control
|
// .Select-control
|
||||||
height 37px
|
// height 37px
|
||||||
.ace_editor
|
// .ace_editor
|
||||||
height 258px
|
// height 258px
|
||||||
.NoteForm
|
// .NoteForm
|
||||||
.ace_editor
|
// .ace_editor
|
||||||
height 358px
|
// height 358px
|
||||||
.previewMode
|
// .previewMode
|
||||||
absolute top right
|
// absolute top right
|
||||||
font-size 0.8em
|
// font-size 0.8em
|
||||||
line-height 24px
|
// line-height 24px
|
||||||
padding 5 15px
|
// padding 5 15px
|
||||||
background-color transparentify(invBackgroundColor, 0.2)
|
// background-color transparentify(invBackgroundColor, 0.2)
|
||||||
color invTextColor
|
// color invTextColor
|
||||||
border-top-right-radius 5px
|
// border-top-right-radius 5px
|
||||||
.marked
|
// .marked
|
||||||
height 360px
|
// height 360px
|
||||||
overflow-x hidden
|
// overflow-x hidden
|
||||||
overflow-y auto
|
// overflow-y auto
|
||||||
box-sizing border-box
|
// box-sizing border-box
|
||||||
padding 5px
|
// padding 5px
|
||||||
border solid 1px borderColor
|
// border solid 1px borderColor
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
marked()
|
// marked()
|
||||||
|
//
|
||||||
|
//
|
||||||
.PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
|
// .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
|
||||||
padding 60px 0
|
// padding 60px 0
|
||||||
.nameInput
|
// .nameInput
|
||||||
width 80%
|
// width 80%
|
||||||
font-size 1.3em
|
// font-size 1.3em
|
||||||
margin 25px auto 15px
|
// margin 25px auto 15px
|
||||||
text-align center
|
// text-align center
|
||||||
.userNameSelect
|
// .userNameSelect
|
||||||
width 80%
|
// width 80%
|
||||||
font-size 1.3em
|
// font-size 1.3em
|
||||||
margin 35px auto
|
// margin 35px auto
|
||||||
text-align center
|
// text-align center
|
||||||
.formField
|
// .formField
|
||||||
text-align center
|
// text-align center
|
||||||
margin 0 auto 25px
|
// margin 0 auto 25px
|
||||||
select
|
// select
|
||||||
display inline-block
|
// display inline-block
|
||||||
width 150px
|
// width 150px
|
||||||
height 33px
|
// height 33px
|
||||||
border solid 1px borderColor
|
// border solid 1px borderColor
|
||||||
background-color white
|
// background-color white
|
||||||
padding 0 10px
|
// padding 0 10px
|
||||||
margin 0 15px
|
// margin 0 15px
|
||||||
.submitButton
|
// .submitButton
|
||||||
display block
|
// display block
|
||||||
margin 0 auto
|
// margin 0 auto
|
||||||
box-sizing border-box
|
// box-sizing border-box
|
||||||
width 55px
|
// width 55px
|
||||||
height 55px
|
// height 55px
|
||||||
circle()
|
// circle()
|
||||||
btnPrimary()
|
// btnPrimary()
|
||||||
.errorAlert
|
// .errorAlert
|
||||||
alertError()
|
// alertError()
|
||||||
padding 12px 10px
|
// padding 12px 10px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
text-align center
|
// text-align center
|
||||||
display block
|
// display block
|
||||||
width 360px
|
// width 360px
|
||||||
margin 0 auto 15px
|
// margin 0 auto 15px
|
||||||
|
//
|
||||||
.ContactModal
|
// .ContactModal
|
||||||
padding 15px
|
// padding 15px
|
||||||
.contactForm
|
// .contactForm
|
||||||
.formField
|
// .formField
|
||||||
width 100%
|
// width 100%
|
||||||
margin-bottom 10px
|
// margin-bottom 10px
|
||||||
input, textarea
|
// input, textarea
|
||||||
display block
|
// display block
|
||||||
width 100%
|
// width 100%
|
||||||
borderInput()
|
// borderInput()
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
input
|
// input
|
||||||
height 33px
|
// height 33px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
textarea
|
// textarea
|
||||||
height 175px
|
// height 175px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
.formControl
|
// .formControl
|
||||||
clearfix()
|
// clearfix()
|
||||||
button
|
// button
|
||||||
float right
|
// float right
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
height 44px
|
// height 44px
|
||||||
padding 0 15px
|
// padding 0 15px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
margin-left 5px
|
// margin-left 5px
|
||||||
font-size 1em
|
// font-size 1em
|
||||||
button.sendButton
|
// button.sendButton
|
||||||
btnPrimary()
|
// btnPrimary()
|
||||||
.confirmation
|
// .confirmation
|
||||||
.confirmationMessage
|
// .confirmationMessage
|
||||||
padding 35px 0
|
// padding 35px 0
|
||||||
text-align center
|
// text-align center
|
||||||
font-size 1.1em
|
// font-size 1.1em
|
||||||
.doneButton
|
// .doneButton
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
height 44px
|
// height 44px
|
||||||
padding 0 35px
|
// padding 0 35px
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
display block
|
// display block
|
||||||
margin 0 auto 25px
|
// margin 0 auto 25px
|
||||||
|
//
|
||||||
.LogoutModal
|
// .LogoutModal
|
||||||
padding 65px 0 45px
|
// padding 65px 0 45px
|
||||||
width 350px
|
// width 350px
|
||||||
.messageLabel
|
// .messageLabel
|
||||||
text-align center
|
// text-align center
|
||||||
font-size 1.1em
|
// font-size 1.1em
|
||||||
margin-bottom 35px
|
// margin-bottom 35px
|
||||||
.formControl
|
// .formControl
|
||||||
text-align center
|
// text-align center
|
||||||
button
|
// button
|
||||||
btnDefault()
|
// btnDefault()
|
||||||
border-radius 5px
|
// border-radius 5px
|
||||||
height 44px
|
// height 44px
|
||||||
margin 15px 5px
|
// margin 15px 5px
|
||||||
padding 0 15px
|
// padding 0 15px
|
||||||
button.logoutButton
|
// button.logoutButton
|
||||||
btnPrimary()
|
// btnPrimary()
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ btnHighlightenColor = #000
|
|||||||
brandColor = #2BAC8F
|
brandColor = #2BAC8F
|
||||||
|
|
||||||
popupShadow = 0 0 5px 0 #888
|
popupShadow = 0 0 5px 0 #888
|
||||||
modalBackColor = transparentify(white, 65%)
|
|
||||||
|
|
||||||
tableHeadBgColor = white
|
tableHeadBgColor = white
|
||||||
tableOddBgColor = #F9F9F9
|
tableOddBgColor = #F9F9F9
|
||||||
@@ -41,5 +41,4 @@ errorTextColor= #A64444
|
|||||||
infoBackgroundColor= #D9EDF7
|
infoBackgroundColor= #D9EDF7
|
||||||
infoTextColor= #34708E
|
infoTextColor= #34708E
|
||||||
|
|
||||||
modalZIndex= 1000
|
|
||||||
popupZIndex= 500
|
popupZIndex= 500
|
||||||
|
|||||||
Reference in New Issue
Block a user