Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor post editor (and footer) #2902

Merged
merged 3 commits into from Apr 5, 2018
Merged

Refactor post editor (and footer) #2902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0923817
Synchronize the fancy toggle its related form on load
nanaya Apr 4, 2018
889d2db
Unify post editor as much as possible
nanaya Apr 4, 2018
4f124e1
Merge branch 'master' into forum_topic_create_fixes
peppy Apr 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 16 additions & 4 deletions resources/assets/coffee/_classes/form-toggle.coffee
View file
Open in desktop
Expand Up @@ -18,12 +18,24 @@

class @FormToggle
constructor: ->
$(document).on 'change', '.js-form-toggle--input', @togglePollForm
addEventListener 'turbolinks:load', @sync
$(document).on 'change', '.js-form-toggle--input', @onChange


togglePollForm: (e) =>
show = e.currentTarget.checked
id = e.currentTarget.dataset.formToggleId
onChange: (e) =>
@toggle e.currentTarget


sync: =>
inputs = document.getElementsByClassName('js-form-toggle--input')

@toggle(input) for input in inputs


toggle: (input) ->
id = input.dataset.formToggleId
show = input.checked

$form = $(".js-form-toggle--form[data-form-toggle-id='#{id}']")

direction = if show then 'Down' else 'Up'
Expand Down
207 changes: 71 additions & 136 deletions resources/assets/coffee/react/_components/bbcode-editor.coffee
View file
Open in desktop
Expand Up @@ -17,18 +17,83 @@
###

{button, div, em, form, i, label, option, select, span, strong, textarea} = ReactDOMFactories
el = React.createElement

class @BBCodeEditor extends React.Component
componentDidMount: =>
if @props.selection?.range
@body.selectionStart = @props.selection.range[0]
@body.selectionEnd = @props.selection.range[1]

@body.focus()


componentWillUnmount: =>
@props.onSelectionUpdate?(range: [@body.selectionStart, @body.selectionEnd])
render: =>
blockClass = 'post-editor'
blockClass += " post-editor--#{modifier}" for modifier in @props.modifiers ? []

form className: blockClass,
textarea
className: 'post-editor__textarea'
name: 'body'
placeholder: @props.placeholder
defaultValue: @props.rawValue
disabled: @props.disabled
onKeyDown: @onKeyDown
ref: @setBody

div className: 'post-editor__footer',
div className: 'post-editor-footer',
div className: 'post-editor-footer__col post-editor-footer__col--toolbar',
div className: 'post-box-toolbar',
@toolbarButton 'bold', strong(null, 'B')
@toolbarButton 'italic', em(null, 'I')
@toolbarButton 'strikethrough', el(Icon, name: 'strikethrough')
@toolbarButton 'heading', span(null, 'H')
@toolbarButton 'link', el(Icon, name: 'link')
@toolbarButton 'spoilerbox', el(Icon, name: 'barcode')
@toolbarButton 'list-numbered', el(Icon, name: 'list-ol')
@toolbarButton 'list', el(Icon, name: 'list')
@toolbarButton 'image', el(Icon, name: 'image')

label
className: 'bbcode-size-select'
title: osu.trans('bbcode.size._')

span className: "bbcode-size-select__label", osu.trans('bbcode.size._')
i className: "fa fa-chevron-down"
select
className: 'bbcode-size-select__select js-bbcode-btn--size'
disabled: @props.disabled
defaultValue: '100'
option value: '50', osu.trans('bbcode.size.tiny')
option value: '85', osu.trans('bbcode.size.small')
option value: '100', osu.trans('bbcode.size.normal')
option value: '150', osu.trans('bbcode.size.large')

div className: 'post-editor-footer__col post-editor-footer__col--actions',
@actionButton @_cancel, osu.trans('common.buttons.cancel')
@actionButton @_reset, osu.trans('common.buttons.reset')
@actionButton @_save, osu.trans('common.buttons.save')


actionButton: (action, title) =>
button
className: 'btn-osu btn-osu--post-editor btn-osu-default'
disabled: @props.disabled
type: 'button'
onClick: action
title


toolbarButton: (name, content) =>
button
className: "btn-circle btn-circle--bbcode js-bbcode-btn--#{name}"
disabled: @props.disabled
title: osu.trans("bbcode.#{_.snakeCase name}")
type: 'button'

span className: 'btn-circle__content', content


setBody: (element) =>
@body = element


onKeyDown: (e) =>
Expand All @@ -52,133 +117,3 @@ class @BBCodeEditor extends React.Component
value: @body.value
hasChanged: @body.value != @props.rawValue
)


render: ->
form className: 'post-editor',
textarea
className: 'post-editor__textarea'
name: 'body'
defaultValue: @props.rawValue
disabled: @props.disabled
onKeyDown: @onKeyDown
ref: (element) => @body = element

div className: 'post-editor__footer',
div className: 'post-editor__toolbar',
button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--bold'
disabled: @props.disabled
title: osu.trans('bbcode.bold')
type: 'button',

span className: 'btn-circle__content',
strong null, 'B'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--italic'
disabled: @props.disabled
title: osu.trans('bbcode.italic')
type: 'button',

span className: 'btn-circle__content',
em null, 'I'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--strikethrough'
disabled: @props.disabled
title: osu.trans('bbcode.strikethrough')
type: 'button',

span className: 'btn-circle__content',
i className: 'fa fa-strikethrough'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--heading'
disabled: @props.disabled
title: osu.trans('bbcode.heading')
type: 'button',

span className: 'btn-circle__content',
span null, 'H'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--link'
disabled: @props.disabled
title: osu.trans('bbcode.link')
type: 'button',

span className: 'btn-circle__content',
i className: 'fa fa-link'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--spoilerbox'
disabled: @props.disabled
title: osu.trans('bbcode.spoilerbox')
type: 'button',

i className: 'fa fa-barcode'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--list-numbered'
disabled: @props.disabled
title: osu.trans('bbcode.list_numbered')
type: 'button',

span className: 'btn-circle__content',
i className: 'fa fa-list-ol'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--list'
disabled: @props.disabled
title: osu.trans('bbcode.list')
type: 'button',

span className: 'btn-circle__content',
i className: 'fa fa-list'

button
className: 'btn-circle btn-circle--bbcode js-bbcode-btn--image'
disabled: @props.disabled
title: osu.trans('bbcode.image')
type: 'button',

span className: 'btn-circle__content',
i className: 'fa fa-image'

label
className: 'bbcode-size-select'
title: osu.trans('bbcode.size._'),

span className: "bbcode-size-select__label", osu.trans('bbcode.size._')
i className: "fa fa-chevron-down"
select
className: 'bbcode-size-select__select js-bbcode-btn--size'
disabled: @props.disabled
defaultValue: '100',
option value: '50', osu.trans('bbcode.size.tiny')
option value: '85', osu.trans('bbcode.size.small')
option value: '100', osu.trans('bbcode.size.normal')
option value: '150', osu.trans('bbcode.size.large')

div className: 'post-editor__actions',
button
className: 'btn-osu btn-osu--small btn-osu-default post-editor__action'
disabled: @props.disabled
type: 'button'
onClick: @_cancel
osu.trans('common.buttons.cancel')

button
className: 'btn-osu btn-osu--small btn-osu-default post-editor__action'
disabled: @props.disabled
type: 'button'
onClick: @_reset
osu.trans('common.buttons.reset')

button
className: 'btn-osu btn-osu--small btn-osu-default post-editor__action'
disabled: @props.disabled
type: 'button'
onClick: @_save
osu.trans('common.buttons.save')
1 change: 1 addition & 0 deletions resources/assets/coffee/react/beatmapset-page/info.coffee
View file
Open in desktop
Expand Up @@ -133,6 +133,7 @@ class BeatmapsetPage.Info extends React.Component

div className: 'beatmapset-description-editor__container osu-page',
el BBCodeEditor,
modifiers: ['beatmapset-description-editor']
disabled: @state.isBusy
onChange: @onEditorChange
onSelectionUpdate: @onSelectionUpdate
Expand Down
92 changes: 19 additions & 73 deletions resources/assets/coffee/react/profile-page/user-page-editor.coffee
View file
Open in desktop
Expand Up @@ -16,99 +16,45 @@
# along with osu!web. If not, see <http://www.gnu.org/licenses/>.
###

{div} = ReactDOMFactories
el = React.createElement

class ProfilePage.UserPageEditor extends React.Component
componentDidMount: =>
$(@body)
.off 'bbcode:inserted'
.on 'bbcode:inserted', @_change

@body.selectionStart = @props.userPage.selection[0]
@body.selectionEnd = @props.userPage.selection[1]
@body.focus()


componentWillUnmount: =>
# FIXME: Doesn't work on page nagivation.
# Looks like the listener has gone when this is triggered.
$.publish 'user:page:update',
selection: [@body.selectionStart, @body.selectionEnd]


class ProfilePage.UserPageEditor extends React.PureComponent
render: =>
el 'form', null,
el 'textarea',
className: 'profile-extra-user-page-editor'
name: 'body'
value: @props.userPage.raw
onChange: @_change
placeholder: osu.trans('users.show.page.placeholder')
ref: @setBody

el 'div', className: 'post-editor__footer post-editor__footer--profile-page',
div
className: 'post-editor__toolbar'
dangerouslySetInnerHTML:
__html: postEditorToolbar.html

el 'div', className: 'post-editor__actions',
el 'button',
className: 'btn-osu btn-osu--small btn-osu-default post-editor__action'
type: 'button'
onClick: @_cancel
osu.trans('common.buttons.cancel')

el 'button',
className: 'btn-osu btn-osu--small btn-osu-default post-editor__action'
type: 'button'
onClick: @_reset
osu.trans('common.buttons.reset')
el BBCodeEditor,
modifiers: ['profile-page']
rawValue: @props.userPage.raw
placeholder: osu.trans('users.show.page.placeholder')
onChange: @onChange

el 'button',
className: 'btn-osu btn-osu--small btn-osu-default post-editor__action'
type: 'button'
onClick: @_save
osu.trans('common.buttons.save')


_change: (e) =>
$.publish 'user:page:update',
raw: e.currentTarget.value
onChange: ({type, value}) =>
switch type
when 'cancel'
@cancel()
when 'save'
@save(value)


_reset: =>
$.publish 'user:page:update',
raw: @props.userPage.initialRaw

@body.focus()


_cancel: =>
cancel: =>
$.publish 'user:page:update',
editing: false
raw: @props.userPage.initialRaw


_save: (e) =>
body = @props.userPage.raw
save: (value) =>
return @cancel() if value == @props.userPage.raw

LoadingOverlay.show()

$.ajax laroute.route('account.page'),
method: 'PUT'
dataType: 'json'
data:
body: body
body: value
.done (data) ->
$.publish 'user:page:update',
html: data.html
editing: false
raw: body
initialRaw: body
raw: value
initialRaw: value
.fail osu.emitAjaxError(e.target)
.always LoadingOverlay.hide


setBody: (el) =>
@body = el
10 changes: 10 additions & 0 deletions resources/assets/less/base.less
View file
Open in desktop
Expand Up @@ -159,6 +159,16 @@ select.form-control {
margin-top: 20px;
}

&--post-editor {
min-width: 120px;
font-size: @font-size--normal;
padding: 10px 20px;

& + & {
margin-left: 10px;
}
}

&--profile-page-edit {
width: 140px;
}
Expand Down