From ac87fc0ed5057edfcc11af0dde0824b44cba6091 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Mon, 13 Mar 2017 10:04:44 -0400 Subject: [PATCH] rewrite map instructions --- app/assets/stylesheets/clean.css.erb | 1 - frontend/src/Metamaps/Control.js | 2 +- frontend/src/Metamaps/Create.js | 5 ++- frontend/src/Metamaps/GlobalUI/ReactApp.js | 1 + frontend/src/Metamaps/Import.js | 2 +- frontend/src/Metamaps/JIT.js | 11 +---- frontend/src/Metamaps/Map/index.js | 8 ++++ frontend/src/Metamaps/Topic.js | 6 +-- .../src/components/MapView/Instructions.js | 23 +++++++++++ frontend/src/components/MapView/index.js | 40 +++---------------- 10 files changed, 47 insertions(+), 52 deletions(-) create mode 100644 frontend/src/components/MapView/Instructions.js diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 088ebe0d..14a8b178 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -792,7 +792,6 @@ height: 80px; font-family: 'din-regular', helvetica, sans-serif; font-size: 32px; - display: none; text-align: center; color: #999999; z-index: 0; diff --git a/frontend/src/Metamaps/Control.js b/frontend/src/Metamaps/Control.js index 3bd17e52..208a04f2 100644 --- a/frontend/src/Metamaps/Control.js +++ b/frontend/src/Metamaps/Control.js @@ -61,7 +61,7 @@ const Control = { } if (DataModel.Topics.length === 0) { - GlobalUI.showDiv('#instructions') + Map.setHasLearnedTopicCreation(false) } }, deleteSelectedNodes: function() { // refers to deleting topics permanently diff --git a/frontend/src/Metamaps/Create.js b/frontend/src/Metamaps/Create.js index b01642c5..454ab331 100644 --- a/frontend/src/Metamaps/Create.js +++ b/frontend/src/Metamaps/Create.js @@ -1,6 +1,7 @@ /* global $, Hogan, Bloodhound */ import DataModel from './DataModel' +import Map from './Map' import Mouse from './Mouse' import Selected from './Selected' import Synapse from './Synapse' @@ -270,7 +271,7 @@ const Create = { }) Create.newTopic.beingCreated = true Create.newTopic.name = '' - GlobalUI.hideDiv('#instructions') + Map.setHasLearnedTopicCreation(true) }, hide: function(force) { if (force || !Create.newTopic.pinned) { @@ -281,7 +282,7 @@ const Create = { Create.newTopic.pinned = false } if (DataModel.Topics.length === 0) { - GlobalUI.showDiv('#instructions') + Map.setHasLearnedTopicCreation(false) } Create.newTopic.beingCreated = false }, diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index bd479458..66035c6c 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js @@ -109,6 +109,7 @@ const ReactApp = { return { mapId: self.mapId, map: Active.Map, + hasLearnedTopicCreation: Map.hasLearnedTopicCreation, userRequested: Map.userRequested, requestAnswered: Map.requestAnswered, requestApproved: Map.requestApproved, diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js index 9830eace..9b90b993 100644 --- a/frontend/src/Metamaps/Import.js +++ b/frontend/src/Metamaps/Import.js @@ -316,7 +316,7 @@ const Import = { success: opts.success }) - GlobalUI.hideDiv('#instructions') + Map.setHasLearnedTopicCreation(true) }, createSynapseWithParameters: function(desc, category, permission, diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js index cc1ff467..7e0708de 100644 --- a/frontend/src/Metamaps/JIT.js +++ b/frontend/src/Metamaps/JIT.js @@ -130,18 +130,11 @@ const JIT = { if (DataModel.Mappings) DataModel.Mappings.remove(mapping) }) - // set up addTopic instructions in case they delete all the topics - // i.e. if there are 0 topics at any time, it should have instructions again - $('#instructions div').hide() - if (Active.Map && Active.Map.authorizeToEdit(Active.Mapper)) { - $('#instructions div.addTopic').show() - } - if (self.vizData.length === 0) { - GlobalUI.showDiv('#instructions') + Map.setHasLearnedTopicCreation(false) Visualize.loadLater = true } else { - GlobalUI.hideDiv('#instructions') + Map.setHasLearnedTopicCreation(true) } Visualize.render() diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js index b9096827..8d6c5aec 100644 --- a/frontend/src/Metamaps/Map/index.js +++ b/frontend/src/Metamaps/Map/index.js @@ -31,6 +31,7 @@ const Map = { userRequested: false, requestAnswered: false, requestApproved: false, + hasLearnedTopicCreation: true, init: function(serverData) { var self = Map self.mapIsStarred = serverData.mapIsStarred @@ -46,6 +47,11 @@ const Map = { CheatSheet.init(serverData) $(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper) }, + setHasLearnedTopicCreation: function(value) { + const self = Map + self.hasLearnedTopicCreation = value + ReactApp.render() + }, requestAccess: function() { const self = Map self.requests.push({ @@ -140,6 +146,8 @@ const Map = { Filter.close() InfoBox.close() Realtime.endActiveMap() + self.requests = [] + self.hasLearnedTopicCreation = true } }, star: function() { diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index 1d3d28de..55b6c934 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/frontend/src/Metamaps/Topic.js @@ -291,8 +291,7 @@ const Topic = { return } - // hide the 'double-click to add a topic' message - GlobalUI.hideDiv('#instructions') + Map.setHasLearnedTopicCreation(true) $(document).trigger(Map.events.editedByActiveMapper) @@ -325,8 +324,7 @@ const Topic = { getTopicFromAutocomplete: function(id) { var self = Topic - // hide the 'double-click to add a topic' message - GlobalUI.hideDiv('#instructions') + Map.setHasLearnedTopicCreation(true) $(document).trigger(Map.events.editedByActiveMapper) diff --git a/frontend/src/components/MapView/Instructions.js b/frontend/src/components/MapView/Instructions.js new file mode 100644 index 00000000..66331fa1 --- /dev/null +++ b/frontend/src/components/MapView/Instructions.js @@ -0,0 +1,23 @@ +import React, { Component, PropTypes } from 'react' + +class Instructions extends Component { + + static propTypes = { + mobile: PropTypes.bool, + hasLearnedTopicCreation: PropTypes.bool + } + + render() { + const { hasLearnedTopicCreation, mobile } = this.props + return hasLearnedTopicCreation ? null :
+ {!mobile &&
+ Double-click to
add a topic +
} + {mobile &&
+ Double-tap to
add a topic +
} +
+ } +} + +export default Instructions diff --git a/frontend/src/components/MapView/index.js b/frontend/src/components/MapView/index.js index 689f8eeb..24c61b2b 100644 --- a/frontend/src/components/MapView/index.js +++ b/frontend/src/components/MapView/index.js @@ -3,6 +3,7 @@ import React, { Component, PropTypes } from 'react' import DataVis from './DataVis' import MapButtons from './MapButtons' import InfoAndHelp from './InfoAndHelp' +import Instructions from './Instructions' import MapControls from './MapControls' import MapChat from './MapChat' import TopicCard from '../TopicCard' @@ -28,7 +29,8 @@ class MapView extends Component { openHelpLightbox: PropTypes.func, onZoomExtents: PropTypes.func, onZoomIn: PropTypes.func, - onZoomOut: PropTypes.func + onZoomOut: PropTypes.func, + hasLearnedTopicCreation: PropTypes.bool } constructor(props) { @@ -58,11 +60,11 @@ class MapView extends Component { } render = () => { - const { map, currentUser, onOpen, onClose, + const { mobile, map, currentUser, onOpen, onClose, toggleMapInfoBox, toggleFilterBox, infoBoxHtml, filterBoxHtml, openImportLightbox, forkMap, openHelpLightbox, mapIsStarred, onMapStar, onMapUnstar, - onZoomExtents, onZoomIn, onZoomOut } = this.props + onZoomExtents, onZoomIn, onZoomOut, hasLearnedTopicCreation } = this.props const { chatOpen } = this.state const onChatOpen = () => { this.setState({chatOpen: true}) @@ -83,6 +85,7 @@ class MapView extends Component { filterBoxHtml={filterBoxHtml} /> + {currentUser && } {currentUser && this.mapChat = x} />} - <% # for creating and pulling in topics and synapses %> - <% if controller_name == 'maps' && action_name == "conversation" %> - <%= render :partial => 'maps/newtopicsecret' %> - <% else %> - <%= render :partial => 'maps/newtopic' %> - <% end %> - <%= render :partial => 'maps/newsynapse' %> - <% # for populating the change metacode list on the topic card %> - <%= render :partial => 'shared/metacodeoptions' %> -<% end %> -<%= render :partial => 'layouts/lowermapelements' %> - -
- -
-
- Double-click to
add a topic -
-
- Use Tab & Shift+Tab to select a metacode -
-
- Press Enter to add the topic -
-
- -*/