Make the mod version selector more clear

This change the single select box into a checkbox which toggles the mod on/off. If the mod is "on" and it has multiple versions, then a selection list will be shown with the various possible versions. If there is only a single available version, then the selector is not shown.
2016-04-26 21:40:52 -07:00
parent 6787063ac7
commit 1d1772e961
3 changed files with 73 additions and 12 deletions
@@ -17,8 +17,11 @@
                .title
                .author
                .description
+                .modpack
+                    span.checkbox
+                    span.label I have this mod in my modpack
                .version
-                    span in my mod pack
+                    span I'm using version:
                    select
                .warning.
                    <b>PLEASE NOTE:</b> By selecting "no", crafting plans, search, and other features will ignore items
@@ -49,9 +49,45 @@
                line-height: $font-size-medium * 1.25;
            }

-            .version {
+            .modpack {
                margin-top : $size-margin-large;

+                cursor      : pointer;
+                font-family : $font-family-control;
+                font-size   : $font-size-medium;
+
+                display : flex;
+
+                .checkbox {
+                    display      : inline-block;
+                    height       : $font-size-medium;
+                    margin-right : $size-margin-small;
+                    position     : relative;
+                    width        : $font-size-medium;
+
+                    background : $color-white;
+                    border     : $size-border-small solid $color-black;
+                }
+
+                .label {
+                    color: $color-gray-medium;
+                }
+
+                &.enabled {
+                    .checkbox:before {
+                        position: absolute; top: 0; left: 1.5px; // adjust for glyph position
+                        content: "✕";
+                    }
+
+                    .label {
+                        color: $color-black;
+                    }
+                }
+            }
+
+            .version {
+                margin-top: $size-margin-medium;
+
                font-family: $font-family-control;
                font-size: $font-size-medium;

@@ -29,6 +29,14 @@ module.exports = class ModPageController extends BaseController

    # Event Methods ################################################################################

+    onToggleEnabled: ->
+        if @model.activeVersion is Mod.Version.None
+            @model.activeVersion = Mod.Version.Latest
+        else
+            @model.activeVersion = Mod.Version.None
+
+        return false
+
    onVersionChanged: ->
        @model.activeVersion = @$versionSelector.val()
        return false
@@ -67,15 +75,18 @@ module.exports = class ModPageController extends BaseController
        @$homePageLink       = @$('.about .homePage')
        @$itemGroups         = @$(".itemGroups")
        @$logo               = @$('.about img')
+        @$modpackSection     = @$('.modpack')
        @$title              = @$('.about .title')
        @$tutorialsContainer = @$('section.tutorials .panel')
        @$tutorialsSection   = @$('section.tutorials')
+        @$versionSection     = @$('.version')
        @$versionSelector    = @$('.version select')
        @$warning            = @$('.warning')
        super

    refresh: ->
        @_refreshAboutBlock()
+        @_refreshEnabled()
        @_refreshItemGroups()
        @_refreshTutorials()
        @_refreshVersionSelector()
@@ -86,6 +97,7 @@ module.exports = class ModPageController extends BaseController
    events: ->
        return _.extend super,
            'change .version select': 'onVersionChanged'
+            'click .modpack': 'onToggleEnabled'

    # Private Methods ##############################################################################

@@ -107,6 +119,19 @@ module.exports = class ModPageController extends BaseController
            @$logo.attr 'src', ''
            @$title.text ''

+    _refreshEnabled: ->
+        if @model.slug in c.requiredMods
+            @hide @$modpackSection
+        else
+            @show @$modpackSection
+
+        if @model.activeVersion is Mod.Version.None
+            @$modpackSection.removeClass 'enabled'
+            @show @$warning
+        else
+            @$modpackSection.addClass 'enabled'
+            @hide @$warning
+
    _refreshItemGroups: ->
        @_groupControllers ?= []
        groupIndex = 0
@@ -164,19 +189,16 @@ module.exports = class ModPageController extends BaseController

    _refreshVersionSelector: ->
        modVersions = @model.modVersions
+
+        if (@model.activeVersion is Mod.Version.None) or modVersions.length < 2
+            @hide @$versionSection
+        else
+            @show @$versionSection
+
        selectedModVersion = @effectiveModVersion

        @$versionSelector.empty()

-        $option = $("<option value=\"none\">no</option>")
-        if not @model.enabled
-            @$warning.css display:''
-            selectedModVersion = null
-            $option.attr 'selected', true
-        else
-            @$warning.css display:'none'
-        @$versionSelector.append $option
-
        for modVersion in @model.modVersions
            $option = $("<option value=\"#{modVersion.version}\">#{modVersion.version}</option>")
            if modVersion is selectedModVersion