codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 14:03:28 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Courses UI - Consolidate class settings into single modal

Browse source
This commit is contained in:
Matt Lott 2015-08-05 09:35:18 -07:00
parent c90fcada7d
commit ea90b93bd2
3 changed files with 28 additions and 63 deletions
app
styles/courses/mock1
course-details.sass
templates/courses/mock1
course-details.jade
views/courses/mock1
CourseDetailsView.coffee

9
app/styles/courses/mock1/course-details.sass
View file

@ -12,18 +12,15 @@
.concept-completed-foreground
font-size: 12pt
#editDescriptionModal .modal-dialog
#editSettingsModal .modal-dialog
background-color: white
#editNameModal .modal-dialog
background-color: white
max-width: 400px
font-size: 14pt
.edit-description-input
width: 100%
.edit-name-input
width: 100%
width: 50%
.member-header
cursor: pointer

52
app/templates/courses/mock1/course-details.jade
View file

@ -14,56 +14,44 @@ block content
span.spl Student view
div(style='border-bottom: 1px solid black;')
.modal#editNameModal
.modal#editSettingsModal
.modal-dialog
.modal-header
button.close(data-dismiss='modal')
span ×
h3.modal-title Edit Class Name
h3.modal-title Edit Class Settings
.modal-body
p This title will be displayed to everyone enrolled in this class.
input.edit-name-input(type='text', value="#{instance.name}")
p This title will be displayed to everyone in the class.
p
input.edit-name-input(type='text', value="#{instance.name}")
p This description will be displayed to everyone in the class.
p
textarea.edit-description-input(rows=2)= instance.description
p Select programming languages available to the class:
p
select.form-control.select-language
option(value="Python") Python
option(value="JavaScript") JavaScript
option(value="All Languages") All Languages
p
input(type='checkbox', checked)
span.spl Show student progress to everyone in the class
.modal-footer
button.btn.edit-name-save-btn(data-i18n="common.save_changes")
.modal#editDescriptionModal
.modal-dialog
.modal-header
button.close(data-dismiss='modal')
span ×
h3.modal-title Edit Class Description
.modal-body
p This description will be displayed to everyone enrolled in this class.
textarea.edit-description-input(rows=2)= instance.description
.modal-footer
button.btn.edit-description-save-btn(data-i18n="common.save_changes")
button.btn.btn-save-settings(data-i18n="common.save_changes")
h1= course.title
p= course.description
h3= instance.name
if !studentMode
span.spl
button.btn.btn-xs.edit-class-name-btn(data-toggle='modal', data-target='#editNameModal') edit class name
p
if instance.description
each line in instance.description.split('\n')
div= line
if !studentMode
span.spl
button.btn.btn-xs.edit-description-btn(data-toggle='modal', data-target='#editDescriptionModal') edit class description
else if !studentMode
div
button.btn.btn-xs.edit-description-btn add class description
if !studentMode
.form-group
span.spr Select language
select.form-control.select-language
option(value="Python") Python
option(value="JavaScript") JavaScript
option(value="All Languages") All Languages
p
button.btn.btn-xs.btn-edit-settings(data-toggle='modal', data-target='#editSettingsModal') edit class settings
div(role='tabpanel')
ul.nav.nav-tabs(role='tablist')

30
app/views/courses/mock1/CourseDetailsView.coffee
View file

@ -10,11 +10,9 @@ module.exports = class CourseDetailsView extends RootView
events:
'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
'change .select-session': 'onChangeSession'
'change .student-mode-checkbox': 'onChangeStudent'
'click .btn-play-level': 'onClickPlayLevel'
'click .edit-description-save-btn': 'onEditDescriptionSave'
'click .edit-name-save-btn': 'onEditNameSave'
'click .btn-save-settings': 'onClickSaveSettings'
'click .member-header': 'onClickMemberHeader'
'click .progress-header': 'onClickProgressHeader'
'mouseenter .progress-level-cell': 'onMouseEnterPoint'
@ -144,26 +142,12 @@ module.exports = class CourseDetailsView extends RootView
@render?()
$('.student-mode-checkbox').attr('checked', @options.studentMode)
onChangeSession: (e) ->
@showExpandedProgress = false
newSessionValue = $(e.target).val()
for val, index in @instances when val.name is newSessionValue
@currentInstanceIndex = index
@updateLevelMaps()
@onCampaignSync()
onExpandedProgressCheckbox: (e) ->
@showExpandedProgress = $('.expand-progress-checkbox').prop('checked')
# TODO: why does render reset the checkbox to be unchecked?
@render?()
$('.expand-progress-checkbox').attr('checked', @showExpandedProgress)
onClickEditClassName: (e) ->
alert 'TODO: Popup for editing name for this course session'
onClickEditClassDescription: (e) ->
alert 'TODO: Popup for editing description for this course session'
onClickMemberHeader: (e) ->
@memberSort = if @memberSort is 'nameAsc' then 'nameDesc' else 'nameAsc'
@sortMembers()
@ -183,16 +167,12 @@ module.exports = class CourseDetailsView extends RootView
viewArgs: [{}, levelSlug]
}
onEditDescriptionSave: (e) ->
description = $('.edit-description-input').val()
@instances[@currentInstanceIndex].description = description
$('#editDescriptionModal').modal('hide')
@render?()
onEditNameSave: (e) ->
onClickSaveSettings: (e) ->
if name = $('.edit-name-input').val()
@instances[@currentInstanceIndex].name = name
$('#editNameModal').modal('hide')
description = $('.edit-description-input').val()
@instances[@currentInstanceIndex].description = description
$('#editSettingsModal').modal('hide')
@render?()
onMouseEnterPoint: (e) ->