ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactors some improvements into the new files preview 

Test plan:
  - Most of these things are code changes which likely won't
    cause any problems, but affect files as a whole so...
    you should likely follow the same test plan as found on
    https://gerrit.instructure.com/#/c/41451/

Change-Id: Ia7e03fd6936b7ef3efb48f21e0fb18f65d469189
Reviewed-on: https://gerrit.instructure.com/42180
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Clay Diffrient 2014-10-02 11:26:10 -06:00
parent 0e40e7aa3e
commit 263c879720
4 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/coffeescripts/react_files/components/FilePreview.coffee
View File

@ -2,13 +2,15 @@ define [
'underscore',
'react'
'react-router',
'bower/react-modal/dist/react-modal'
'react-modal'
'../modules/customPropTypes'
'i18n!file_preview'
'./FriendlyDatetime'
'compiled/models/Folder',
'compiled/util/friendlyBytes'
'compiled/models/Folder'
'compiled/react/shared/utils/withReactDOM'
'../utils/collectionHandler'
], (_, React, ReactRouter, ReactModal, I18n, FriendlyDatetime, Folder, withReactDOM, collectionHandler) ->
], (_, React, ReactRouter, ReactModal, customPropTypes, I18n, FriendlyDatetime, friendlyBytes, Folder, withReactDOM, collectionHandler) ->
FilePreview = React.createClass
@ -17,8 +19,8 @@ define [
mixins: [React.addons.PureRenderMixin]
propTypes:
initialItem: React.PropTypes.object
otherItems: React.PropTypes.array
initialItem: customPropTypes.filesystemObject
otherItems: React.PropTypes.arrayOf(customPropTypes.filesystemObject).isRequired
otherItemsString: React.PropTypes.string
getInitialState: ->
@ -26,12 +28,8 @@ define [
showFooter: false
showFooterBtn: true
displayedItem: @props.initialItem
user: @props.initialItem.get 'user'
otherItemsIsBackBoneCollection: @props.otherItems instanceof Backbone.Collection
componentWillMount: ->
ReactModal.setAppElement(@props.appElement)
componentDidMount: ->
$('.ReactModal__Overlay').on 'keydown', @handleKeyboardNavigation
@ -41,7 +39,6 @@ define [
componentWillReceiveProps: (newProps) ->
@setState(
displayedItem: newProps.initialItem
user: newProps.initialItem.get 'user'
otherItemPreviewString: @setUpOtherItemsQuery(newProps.otherItems)
)
@ -59,13 +56,13 @@ define [
@setState({showFooter: !@state.showFooter});
handleKeyboardNavigation: (event) ->
return null unless (event.keyCode is 37 or event.keyCode is 39)
return null unless (event.keyCode is $.ui.keyCode.LEFT or event.keyCode is $.ui.keyCode.RIGHT)
# left arrow
if (event.keyCode is 37)
if (event.keyCode is $.ui.keyCode.LEFT)
nextItem = collectionHandler.getPreviousInRelationTo(@props.otherItems, @state.displayedItem)
# right arrow
if (event.keyCode is 39)
if (event.keyCode is $.ui.keyCode.RIGHT)
nextItem = collectionHandler.getNextInRelationTo(@props.otherItems, @state.displayedItem)
if (@props.otherItemsString)
@ -103,17 +100,10 @@ define [
goToItem = if @state.otherItemsIsBackBoneCollection then @props.otherItems.at(goToItemIndex) else @props.otherItems[goToItemIndex]
if (@props.otherItemsString)
@props.params.only_preview = @props.otherItemsString
switch direction
when 'left'
div {className: 'col-xs-1 full-height'},
ReactRouter.Link _.defaults({to: (if @props.params.splat then 'folder' else 'rootFolder'), query: {preview: goToItem.id}, className: 'ef-file-preview-arrow-link'}, @props.params),
div {className: 'ef-file-preview-arrow'},
i {className: 'icon-arrow-open-left'}
when 'right'
div {className: 'col-xs-1 full-height'},
ReactRouter.Link _.defaults({to: (if @props.params.splat then 'folder' else 'rootFolder'), query: {preview: goToItem.id}, className: 'ef-file-preview-arrow-link'}, @props.params),
div {className: 'ef-file-preview-arrow'},
i {className: 'icon-arrow-open-right'}
div {className: 'col-xs-1 full-height'},
ReactRouter.Link _.defaults({to: (if @props.params.splat then 'folder' else 'rootFolder'), query: {preview: goToItem.id}, className: 'ef-file-preview-arrow-link'}, @props.params),
div {className: 'ef-file-preview-arrow'},
i {className: "icon-arrow-open-#{direction}"}
scrollLeft: (event) ->
@ -183,19 +173,20 @@ define [
th {scope: 'row'},
I18n.t('file_preview_infotable_size', 'Size')
td {},
@state.displayedItem.get('size') + ' Kb'
friendlyBytes @state.displayedItem.get('size')
tr {},
th {scope: 'row'},
I18n.t('file_preview_infotable_datemodified', 'Date Modified')
td {},
FriendlyDatetime datetime: @state.displayedItem.get('updated_at')
tr {},
th {scope: 'row'},
I18n.t('file_preview_infotable_modifiedby', 'Modified By')
td {},
img {className: 'avatar', src: @state.user?.avatar_image_url }
a {href: @state.user?.html_url},
@state.user?.display_name
if @state.displayedItem.get('user')
tr {},
th {scope: 'row'},
I18n.t('file_preview_infotable_modifiedby', 'Modified By')
td {},
img {className: 'avatar', src: @state.displayedItem.get('user').avatar_image_url }
a {href: @state.displayedItem.get('user').html_url},
@state.displayedItem.get('user').display_name
tr {},
th {scope: 'row'},
I18n.t('file_preview_infotable_datecreated', 'Date Created')
@ -227,4 +218,4 @@ define [
file.displayName()
div {className: 'col-xs-1', onClick: @scrollRight},
div {className: 'ef-file-preview-footer-arrow'},
i {className: 'icon-arrow-open-right'}
i {className: 'icon-arrow-open-right'}

4
app/coffeescripts/react_files/components/ShowFolder.coffee
View File

@ -124,6 +124,6 @@ define [
# Makes sure other items has something before sending it to the preview.
if otherItems?.length
if @props.query.only_preview
FilePreview {initialItem: initialItem, otherItems: otherItems, params: @props.params, appElement: document.getElementById('content'), otherItemsString: @props.query.only_preview}
FilePreview {initialItem: initialItem, otherItems: otherItems, params: @props.params, otherItemsString: @props.query.only_preview}
else
FilePreview {initialItem: initialItem, otherItems: otherItems, params: @props.params, appElement: document.getElementById('content')}
FilePreview {initialItem: initialItem, otherItems: otherItems, params: @props.params }

12
public/javascripts/react-modal.js vendored Normal file
View File

@ -0,0 +1,12 @@
define(['bower/react-modal/dist/react-modal'], function(ReactModal) {
var appElement = document.getElementById('application');
// In general this will be present, but in the case that it's not present,
// you'll need to set your own which most likely occurs during tests.
if (appElement) {
ReactModal.setAppElement(document.getElementById('application'));
}
return ReactModal;
});

13
spec/coffeescripts/react_files/components/FilePreviewSpec.coffee
View File

@ -1,12 +1,13 @@
define [
'react'
'react-router'
'react-modal'
'compiled/react_files/components/FilePreview'
'compiled/models/Folder'
'compiled/models/File'
'compiled/collections/FilesCollection'
'compiled/react_files/components/FolderChild'
], (React, Router, FilePreview, Folder, File, FilesCollection, FolderChild) ->
], (React, Router, Modal, FilePreview, Folder, File, FilesCollection, FolderChild) ->
Simulate = React.addons.TestUtils.Simulate
@ -44,17 +45,15 @@ define [
@currentFolder.add(@file2)
@currentFolder.add(@file3)
Modal.setAppElement($('#fixtures').get(0))
properties =
initialItem: @file2
otherItems: @currentFolder
params: {splat: "test/test/test/"}
appElement: $('#fixtures').get(0)
# onResolvePath: ->
# currentFolder: @currentFolder
# query: {preview: '2'}
# toggleItemSelected: ->
# selectedItems: []
# areAllItemsSelected: -> false
@filePreview = React.renderComponent(FilePreview(properties), $('#fixtures')[0])