lots of fixes

This commit is contained in:
Connor Turland 2017-03-12 22:14:44 -04:00
parent 743e3371eb
commit 959a6837d8
12 changed files with 107 additions and 109 deletions

View file

@ -169,6 +169,9 @@
.upperRightMapButtons {
right: 134px;
}
.unauthenticated .upperRightMapButtons {
right: 115px;
}
.upperRightIcon {
width: 32px;

View file

@ -1,7 +1,6 @@
.viewOnly {
float: left;
margin-left: 16px;
display: none;
height: 32px;
border: 1px solid #BDBDBD;
border-radius: 2px;
@ -23,7 +22,7 @@
}
.requestNotice {
display: none;
display: inline-block;
padding: 0 8px;
}
@ -42,16 +41,6 @@
.requestNotAccepted {
background-color: #c04f4f;
}
&.sendRequest .requestAccess {
display: inline-block;
}
&.sentRequest .requestPending {
display: inline-block;
}
&.requestDenied .requestNotAccepted {
display: inline-block;
}
}
.request_access {

View file

@ -18,5 +18,6 @@
Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
Metamaps.ServerData.requests = <%= @allrequests.to_json.html_safe %>;
Metamaps.ServerData.VisualizeType = "ForceDirected";
</script>

View file

@ -18,5 +18,6 @@
Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
Metamaps.ServerData.requests = <%= @allrequests.to_json.html_safe %>;
Metamaps.ServerData.VisualizeType = "ForceDirected";
</script>

View file

@ -101,6 +101,10 @@ const ReactApp = {
return {
mapId: self.mapId,
map: Active.Map,
userRequested: Map.userRequested,
requestAnswered: Map.requestAnswered,
requestApproved: Map.requestApproved,
onRequestAccess: Map.requestAccess,
mapIsStarred: Map.mapIsStarred,
endActiveMap: Map.end,
launchNewMap: Map.launch,

View file

@ -26,46 +26,91 @@ const Map = {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
},
mapIsStarred: false,
requests: [],
userRequested: false,
requestAnswered: false,
requestApproved: false,
init: function(serverData) {
var self = Map
self.mapIsStarred = serverData.mapIsStarred
self.requests = serverData.requests
self.setAccessRequest()
$('#wrapper').mousedown(function(e) {
if (e.button === 1) return false
})
GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
InfoBox.init(serverData, function updateThumbnail() {
self.uploadMapScreenshot()
})
CheatSheet.init(serverData)
$('.viewOnly .requestAccess').click(self.requestAccess)
$(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
},
requestAccess: function() {
$('.viewOnly').removeClass('sendRequest').addClass('sentRequest')
const self = Map
self.requests.push({
user_id: Active.Mapper.id,
answered: false,
approved: false
})
self.setAccessRequest()
const mapId = Active.Map.id
$.post({
url: `/maps/${mapId}/access_request`
})
GlobalUI.notifyUser('Map creator will be notified of your request')
},
setAccessRequest: function(requests, activeMapper) {
let className = 'isViewOnly '
if (activeMapper) {
const request = _find(requests, r => r.user_id === activeMapper.id)
if (!request) className += 'sendRequest'
else if (request && !request.answered) className += 'sentRequest'
else if (request && request.answered && !request.approved) className += 'requestDenied'
setAccessRequest: function() {
const self = Map
if (Active.Mapper) {
const request = _find(self.requests, r => r.user_id === Active.Mapper.id)
if (!request) {
self.userRequested = false
self.requestAnswered = false
self.requestApproved = false
}
$('.viewOnly').removeClass('sendRequest sentRequest requestDenied').addClass(className)
else if (request && !request.answered) {
self.userRequested = true
self.requestAnswered = false
self.requestApproved = false
}
else if (request && request.answered && !request.approved) {
self.userRequested = true
self.requestAnswered = true
self.requestApproved = false
}
}
ReactApp.render()
},
launch: function(id) {
var start = function(data) {
const self = Map
var start = function() {
document.title = Active.Map.get('name') + ' | Metamaps'
Map.setAccessRequest()
$('#filter_by_mapper h3').html('MAPPERS') // TODO: rewrite filter box in react
Visualize.type = 'ForceDirected'
JIT.prepareVizData()
Filter.reset()
Selected.reset()
InfoBox.load()
Filter.checkMetacodes()
Filter.checkSynapses()
Filter.checkMappers()
Realtime.startActiveMap()
Loading.hide()
$('#header_content').html(Active.Map.get('name')) // TODO: make this use ReactApp.mobileTitle to set this
}
function isLoaded() {
if (InfoBox.generateBoxHTML) start()
else setTimeout(() => isLoaded(), 50)
}
if (Active.Map && Active.Map.id == id) {
isLoaded()
}
else {
Loading.show()
$.ajax({
url: '/maps/' + id + '/contains.json',
success: function(data) {
Active.Map = new DataModelMap(data.map)
DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
@ -75,61 +120,14 @@ const Map = {
DataModel.Messages = data.messages
DataModel.Stars = data.stars
DataModel.attachCollectionEvents()
var map = Active.Map
var mapper = Active.Mapper
document.title = map.get('name') + ' | Metamaps'
// add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) {
$('.wrapper').addClass('canEditMap')
} else {
Map.setAccessRequest(data.requests, mapper)
self.requests = data.requests
isLoaded()
}
// add class to .wrapper for specifying if the map can
// be collaborated on
if (map.get('permission') === 'commons') {
$('.wrapper').addClass('commonsMap')
}
// set filter mapper H3 text
$('#filter_by_mapper h3').html('MAPPERS')
// build and render the visualization
Visualize.type = 'ForceDirected'
JIT.prepareVizData()
// update filters
Filter.reset()
// reset selected arrays
Selected.reset()
// set the proper mapinfobox content
InfoBox.load()
// these three update the actual filter box with the right list items
Filter.checkMetacodes()
Filter.checkSynapses()
Filter.checkMappers()
Realtime.startActiveMap()
Loading.hide()
// for mobile
$('#header_content').html(map.get('name'))
}
Loading.show()
$.ajax({
url: '/maps/' + id + '/contains.json',
success: start
})
}
},
end: function() {
if (Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap')
AutoLayout.resetSpiral()
$('.rightclickmenu').remove()

View file

@ -1,14 +0,0 @@
import React, { Component, PropTypes } from 'react'
class Toast extends Component {
static propTypes = {
message: PropTypes.string
}
render () {
const html = {__html: this.props.html}
return <p id="toast" className="toast" dangerouslySetInnerHTML={html} />
}
}
export default Toast

View file

@ -3,13 +3,20 @@ import { Link } from 'react-router'
class UpperLeftUI extends Component {
static propTypes = {
currentUser: PropTypes.object
currentUser: PropTypes.object,
map: PropTypes.object,
userRequested: PropTypes.bool,
requestAnswered: PropTypes.bool,
requestApproved: PropTypes.bool,
onRequestClick: PropTypes.func
}
render () {
const { map, currentUser, userRequested, requestAnswered, requestApproved, onRequestClick } = this.props
return <div className="upperLeftUI">
<div className="homeButton">
<Link to="/">METAMAPS</Link>
{currentUser && <Link to="/">METAMAPS</Link>}
{!currentUser && <a href="/">METAMAPS</a>}
</div>
<div className="sidebarSearch">
<input type="text" className="sidebarSearchField" placeholder="Search for topics, maps, and mappers..." />
@ -17,12 +24,12 @@ class UpperLeftUI extends Component {
<div className="sidebarSearchIcon"></div>
<div className="clearfloat"></div>
</div>
<div className="viewOnly">
{map && !map.authorizeToEdit(currentUser) && <div className="viewOnly">
<div className="eyeball">View Only</div>
<div className="requestAccess requestNotice">Request Access</div>
<div className="requestPending requestNotice">Request Pending</div>
<div className="requestNotAccepted requestNotice">Request Not Accepted</div>
</div>
{currentUser && !userRequested && <div className="requestAccess requestNotice" onClick={onRequestClick}>Request Access</div>}
{userRequested && !requestAnswered && <div className="requestPending requestNotice">Request Pending</div>}
{userRequested && requestAnswered && !requestApproved && <div className="requestNotAccepted requestNotice">Request Not Accepted</div>}
</div>}
<div className="clearfloat"></div>
</div>
}

View file

@ -1,7 +1,6 @@
import React, { Component, PropTypes } from 'react'
import MobileHeader from './MobileHeader'
import Toast from './Toast'
import UpperLeftUI from './UpperLeftUI'
import UpperRightUI from './UpperRightUI'
@ -16,7 +15,12 @@ class App extends Component {
mobileTitleWidth: PropTypes.number,
mobileTitleClick: PropTypes.func,
openInviteLightbox: PropTypes.func,
toggleAccountBox: PropTypes.func
toggleAccountBox: PropTypes.func,
map: PropTypes.object,
userRequested: PropTypes.bool,
requestAnswered: PropTypes.bool,
requestApproved: PropTypes.bool,
onRequestAccess: PropTypes.func
}
static childContextTypes = {
@ -32,7 +36,8 @@ class App extends Component {
render () {
const { children, toast, currentUser, unreadNotificationsCount, openInviteLightbox,
mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
toggleAccountBox } = this.props
toggleAccountBox, map, userRequested, requestAnswered, requestApproved,
onRequestAccess } = this.props
const { pathname } = location || {}
const unauthedHome = pathname === '/' && !currentUser
return <div className="wrapper" id="wrapper">
@ -41,13 +46,17 @@ class App extends Component {
mobileTitle={mobileTitle}
mobileTitleWidth={mobileTitleWidth}
onTitleClick={mobileTitleClick} />}
{!unauthedHome && <UpperLeftUI currentUser={currentUser} />}
{!unauthedHome && <UpperLeftUI currentUser={currentUser}
map={map}
userRequested={userRequested}
requestAnswered={requestAnswered}
requestApproved={requestApproved}
onRequestClick={onRequestAccess} />}
{!mobile && <UpperRightUI currentUser={currentUser}
unreadNotificationsCount={unreadNotificationsCount}
openInviteLightbox={openInviteLightbox}
signInPage={pathname === '/login'}
onClickAccount={toggleAccountBox} />}
<Toast message={toast} />
{!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>}
{children}
</div>

View file

@ -10,7 +10,6 @@ class InfoAndHelp extends Component {
onHelpClick: PropTypes.func,
onMapStar: PropTypes.func,
onMapUnstar: PropTypes.func,
onInfoClick: PropTypes.func,
infoBoxhtml: PropTypes.string
}
@ -22,9 +21,9 @@ class InfoAndHelp extends Component {
const onStarClick = mapIsStarred ? onMapUnstar : onMapStar
return <div className="infoAndHelp">
<MapInfoBox map={map} currentUser={currentUser} infoBoxHtml={infoBoxHtml} />
<div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
{currentUser && <div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
<div className="tooltipsAbove">{tooltip}</div>
</div>
</div>}
<div className="mapInfoIcon infoElement mapElement" onClick={onInfoClick}>
<div className="tooltipsAbove">Map Info</div>
</div>

View file

@ -82,7 +82,7 @@ class MapView extends Component {
filterBoxHtml={filterBoxHtml} />
<DataVis />
<TopicCard {...this.props} />
<MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />
{currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />}
<MapControls onClickZoomExtents={onZoomExtents}
onClickZoomIn={onZoomIn}
onClickZoomOut={onZoomOut} />

View file

@ -23,6 +23,7 @@ export default function makeRoutes (currentUser) {
<Route path="maps/:id">
<IndexRoute component={MapView} />
<Route path="conversation" component={MapView} />
<Route path="request_access" component={nullComponent} />
</Route>
<Route path="login" component={nullComponent} />
<Route path="join" component={nullComponent} />