Merge branch 'release-1.11.0'

README.md

@@ -139,6 +139,7 @@ The configuration dictionary must be defined inside your settings:
         'SHOW_MULTIPART_UPLOADING': True,
         'ENABLE_IMAGES_PREVIEW': True,
         'CHANGELIST_FILTERS_IN_MODAL': True,
+        'CHANGELIST_FILTERS_ALWAYS_OPEN': False,
         'MENU_ALWAYS_COLLAPSED': False,
         'MENU_TITLE': 'Menu',
         'GRAVATAR_DEFAULT_IMG': 'retro',
@@ -182,6 +183,8 @@ Default value is `True`.
 - `SHOW_MULTIPART_UPLOADING`: if set to `True` an overlay with a spinner appears when submitting a `multipart/form-data` form.
 - `ENABLE_IMAGES_PREVIEW`: if set to `True` a preview is displayed above all input file fields which contain images. You can control how the preview is displayed by overriding the class `.baton-image-preview`. By default, previews have 100px height and with a box shadow (on "hover").
 - `CHANGELIST_FILTERS_IN_MODAL`: if set to `True` the changelist filters are opened in a centered modal above the document, useful when you set many filters. By default, its value is `False` and the changelist filters appears from the right side of the changelist table.
+- `CHANGELIST_FILTERS_ALWAYS_OPEN`: if set to `True` the changelist filters are opened by default. By default, its value is `False` and the changelist filters can be expanded clicking a toggler button. This option is considered only if `CHANGELIST_FILTERS_IN_MODAL` is `False`.
+- `COLLAPSABLE_USER_AREA`: if set to `True` the sidebar user area is collapsed and can be expanded to show links.
 - `MENU_ALWAYS_COLLAPSED`: if set to `True` the menu is hidden at page load, and the navbar toggler is always visible, just click it to show the sidebar menu.
 - `MENU_TITLE`: the menu title shown in the sidebar. If an empty string, the menu title is hidden and takes no space on larger screens, the default menu voice will still be visible in the mobile menu.
 - `GRAVATAR_DEFAULT_IMG`: the default gravatar image displayed if the user email is not associated to any gravatar image. Possible values: 404, mp, identicon, monsterid, wavatar, retro, robohash, blank (see [http://en.gravatar.com/site/implement/images/](http://en.gravatar.com/site/implement/images/)).
@@ -262,6 +265,7 @@ To use these, just override the baton `admin/base_site.html` template and regist
         {% baton_config 'SHOW_MULTIPART_UPLOADING' as show_multipart_uploading %}
         {% baton_config 'ENABLE_IMAGES_PREVIEW' as enable_images_preview %}
         {% baton_config 'CHANGELIST_FILTERS_IN_MODAL' as changelist_filters_in_modal %}
+        {% baton_config 'COLLAPSABLE_USER_AREA' as collapsable_user_area %}
         {% baton_config 'MENU_ALWAYS_COLLAPSED' as menu_always_collapsed %}
         {% baton_config 'MENU_TITLE' as menu_title %}
         {% baton_config 'GRAVATAR_DEFAULT_IMG' as gravatar_default_img %}
@@ -281,6 +285,7 @@ To use these, just override the baton `admin/base_site.html` template and regist
                     showMultipartUploading: {{ show_multipart_uploading|yesno:"true,false" }},
                     enableImagesPreview: {{ enable_images_preview|yesno:"true,false" }},
                     changelistFiltersInModal: {{ changelist_filters_in_modal|yesno:"true,false" }},
+                    collapsableUserArea: {{ collapsable_user_area|yesno:"true,false" }},
                     menuAlwaysCollapsed: {{ menu_always_collapsed|yesno:"true,false" }},
                     menuTitle: '{{ menu_title|escapejs }}',
                     gravatarDefaultImg: '{{ gravatar_default_img }}'
@@ -382,6 +387,7 @@ As you can see these are the rules:
 - For every fieldset you want to put in a separate tab, add a class `baton-tab-fs-CUSTOMNAME`, and add a class `tab-fs-CUSTOMNAME` on the fieldset
 - For every group you want to put in a separate tab, add a class `baton-tab-group-ITEMS`, where items can be inlines (`inline-RELATEDNAME`) and/or fieldsets (`fs-CUSTOMNAME`) separated by a double hypen `--`. Also add a class `tab-fs-CUSTOMNAME` on the fieldset items.
 - Tabs order respects the defined classes order
+- Fieldsets without a specified tab will be added to the main tab. If you want the fieldset to instead display outside of any tabs, add a class `tab-fs-none` to the fieldset. The fieldset will then always be visible regardless of the current tab.
 
 Other features:
 

baton/config.py

@@ -14,7 +14,9 @@
     'CONFIRM_UNSAVED_CHANGES': True,
     'SHOW_MULTIPART_UPLOADING': True,
     'ENABLE_IMAGES_PREVIEW': True,
+    'COLLAPSABLE_USER_AREA': False,
     'CHANGELIST_FILTERS_IN_MODAL': False,
+    'CHANGELIST_FILTERS_ALWAYS_OPEN': False,
     'MENU_ALWAYS_COLLAPSED': False,
     'GRAVATAR_DEFAULT_IMG': 'retro',
 }

baton/static/baton/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baton",
-  "version": "1.10.12",
+  "version": "1.11.0",
   "description": "Django Baton App",
   "main": "index.js",
   "scripts": {

baton/static/baton/app/src/core/ChangeForm.js

@@ -32,6 +32,7 @@ let ChangeForm = {
       this.lazyLoadImages()
     }
     this.activateEntryCollapsing()
+    this.fixExpandFirstErrorCollapsing()
     this.initTemplates()
   },
   activate: function () {
@@ -89,7 +90,7 @@ let ChangeForm = {
     this.form.find('.form-row').each(function (index, row) {
       $(row).children('.fieldBox').wrapAll('<div class="wrapped-fields-container" />')
     })
-    this.form.find('.wrapped-fields-container > .fieldBox').children().unwrap()
+    this.form.find('.wrapped-fields-container > .fieldBox:first-child').children().unwrap()
   },
   fixNewlines: function () {
     $('.form-row br').replaceWith('<span class="newline"></span>')
@@ -136,6 +137,14 @@ let ChangeForm = {
       }
     })
   },
+  fixExpandFirstErrorCollapsing: function () {
+    $('.expand-first').each(function (index, el) {
+      if ($(el).find('.inline-related[id$=0] .form-row.errors').length) {
+        // inverse logic
+        $(el).find('.inline-related[id$=0] .form-row.errors').parent('fieldset').prev('h3').addClass('entry-collapsed')
+      }
+    })
+  },
   initTemplates: function () {
     const positionMap = {
       above: 'before',

baton/static/baton/app/src/core/ChangeList.js

@@ -11,40 +11,45 @@ let ChangeList = {
     this._filtersDiv = $('#changelist-filter')
     this.t = new Translator($('html').attr('lang'))
     this.filtersInModal = opts.changelistFiltersInModal
+    this.filtersAlwaysOpen = opts.changelistFiltersAlwaysOpen
     if (this._filtersDiv.length) {
       this.activate()
     }
   },
   activate: function () {
-    // filters active?
-    let _activeFilters = /__[^=]+=/.test(location.search)
-    // actions ?
-    let _activeActions = $('#changelist-form > .actions').length !== 0
-    let _changelistForm = $('#changelist-form')
-    let _filtersToggler = $('<a />', {
-      class:
-        'btn btn-info changelist-filter-toggler' +
-        (_activeFilters ? ' active' : '') + (_activeActions ? ' with-actions' : '')
-    })
-      .html('<i class="fa fa-filter"></i> <span>' + this.t.get('filter') + '</span>')
-
-    if (this.filtersInModal) {
-      $('#changelist-filter').prop('id', 'changelist-filter-modal')
-      this.modal = this.createModal()
-      _filtersToggler
-        .click(() => {
-          this.modal.modal('toggle')
-        })
+    if (this.filtersAlwaysOpen) {
+      $(document.body).addClass('changelist-filter-active changelist-filter-always-open')
     } else {
-      _filtersToggler
-        .click(() => {
-          $(document.body).toggleClass('changelist-filter-active')
-          if (parseInt(this._filtersDiv.css('max-width')) === 100) {
-            $('html,body').animate({ scrollTop: this._filtersDiv.offset().top })
-          }
-        })
+      // filters active?
+      let _activeFilters = /__[^=]+=/.test(location.search)
+      // actions ?
+      let _activeActions = $('#changelist-form > .actions').length !== 0
+      let _changelistForm = $('#changelist-form')
+      let _filtersToggler = $('<a />', {
+        class:
+          'btn btn-info changelist-filter-toggler' +
+          (_activeFilters ? ' active' : '') + (_activeActions ? ' with-actions' : '')
+      })
+        .html('<i class="fa fa-filter"></i> <span>' + this.t.get('filter') + '</span>')
+
+      if (this.filtersInModal) {
+        $('#changelist-filter').prop('id', 'changelist-filter-modal')
+        this.modal = this.createModal()
+        _filtersToggler
+          .click(() => {
+            this.modal.modal('toggle')
+          })
+      } else {
+        _filtersToggler
+          .click(() => {
+            $(document.body).toggleClass('changelist-filter-active')
+            if (parseInt(this._filtersDiv.css('max-width')) === 100) {
+              $('html,body').animate({ scrollTop: this._filtersDiv.offset().top })
+            }
+          })
+      }
+      _changelistForm.prepend(_filtersToggler)
     }
-    _changelistForm.prepend(_filtersToggler)
     if (/_popup=1/.test(location.href)) {
       $('#changelist-form .results').css('padding-top', '78px')
     }

baton/static/baton/app/src/core/Menu.js

@@ -8,6 +8,7 @@ let Menu = {
    */
   init: function (config, Dispatcher) {
     this.Dispatcher = Dispatcher
+    this.collapsableUserArea = config.collapsableUserArea
     this.menuTitle = config.menuTitle
     this.appListUrl = config.api.app_list
     this.gravatarUrl = config.api.gravatar
@@ -83,6 +84,13 @@ let Menu = {
   renderUserTools: function () {
     let self = this
     let container = $('<div />', { id: 'user-tools-sidebar' })
+    let expandUserArea = $('<i />', {'class': 'fa fa-angle-down user-area-toggler'}).on('click', function () {
+      $(this).toggleClass('fa-angle-up')
+      container.toggleClass('collapsed')
+    })
+    if (this.collapsableUserArea) {
+      container.addClass('collapsed')
+    }
     container.insertAfter('#user-tools')
     let userInfo = $('<div />', { class: 'user-info' })
       .html(
@@ -93,24 +101,28 @@ let Menu = {
       .appendTo(container)
     // gravatar
     $.getJSON(this.gravatarUrl, function (data) {
-      userInfo.find('.spinner-border').replaceWith(
-        $('<img />', {
-          class: 'gravatar-icon',
-          src: 'https://www.gravatar.com/avatar/{hash}?s=50&d={default}'
-            .replace('{hash}', data.hash)
-            .replace('{default}', self.gravatarDefaultImg)
-        })
-      )
+      let img = $('<img />', {
+        class: 'gravatar-icon',
+        src: 'https://www.gravatar.com/avatar/{hash}?s=50&d={default}'
+          .replace('{hash}', data.hash)
+          .replace('{default}', self.gravatarDefaultImg)
+      })
+      userInfo.find('.spinner-border').replaceWith(img)
+      if (self.collapsableUserArea) {
+        img.after(expandUserArea)
+      }
     }).fail(function (err) {
       console.error(err.responseText)
-      userInfo.find('.spinner-border').replaceWith(
-        $('<img />', {
-          class: 'gravatar-icon',
-          src: 'https://www.gravatar.com/avatar/{hash}?s=50&d={default}'
-            .replace('{hash}', '')
-            .replace('{default}', self.gravatarDefaultImg)
-        })
-      )
+      let img = $('<img />', {
+        class: 'gravatar-icon',
+        src: 'https://www.gravatar.com/avatar/{hash}?s=50&d={default}'
+          .replace('{hash}', '')
+          .replace('{default}', self.gravatarDefaultImg)
+      })
+      userInfo.find('.spinner-border').replaceWith(img)
+      if (self.collapsableUserArea) {
+        img.after(expandUserArea)
+      }
     })
     let linksContainer = $('<div />', { class: 'user-links' }).appendTo(
       container

baton/static/baton/app/src/core/Tabs.js

@@ -117,9 +117,10 @@ let Tabs = {
       'class': 'tab-pane' + (this.mainOrder === 0 ? ' active' : ''),
       'id': 'main-tab'
     }).appendTo(this.tabContent)
-    this.main.parent().children(':not(.nav-tabs):not(.submit-row):not(.errornote)').each((index, el) => {
-      $(el).appendTo(self.tabMain)
-    })
+    this.main.parent().children(':not(.nav-tabs):not(.submit-row):not(.errornote):not(.tab-fs-none)')
+      .each((index, el) => {
+        $(el).appendTo(self.tabMain)
+      })
     this.nav.after(this.tabContent)
 
     let currentOrder = this.mainOrder ? 0 : this.mainOrder + 1

baton/static/baton/app/src/styles/_changeform.scss

@@ -37,8 +37,10 @@
 
   .collapse-entry {
     h3 {
+      cursor: pointer;
+
       .entry-collapse-toggler {
-        margin-left: 0 !important;
+        margin-left: 1rem !important;
         order: 1;
 
         &::before {

baton/static/baton/app/src/styles/_changelist.scss

@@ -199,6 +199,13 @@
     }
   }
 
+  &.changelist-filter-always-open {
+    #changelist-filter,
+    #changelist-form {
+      transition: none !important;
+    }
+  }
+
   // show filters
   &.changelist-filter-active {
     #changelist-filter {

baton/static/baton/app/src/styles/_menu.scss

@@ -62,8 +62,25 @@ body:not(.menu-mobile) {
 
   #user-tools-sidebar {
     padding: 1rem;
+    position: relative;
     text-align: center;
 
+    .user-links {
+      height: 38px;
+      transition: height .2s linear;
+    }
+
+    .user-area-toggler {
+      cursor: pointer;
+    }
+
+    &.collapsed {
+      .user-links,
+      .user-info div {
+        display: none;
+      }
+    }
+
     .gravatar-icon {
       border: 2px solid $gravatar-border-color;
       border-radius: 50%;

baton/static/baton/app/src/styles/_placeholders.scss

@@ -743,7 +743,51 @@
     }
   }
 
+  .wrapped-fields-container {
+    flex-direction: column !important;
+
+    .datetimeshortcuts {
+      align-self: top;
+    }
+
+    label {
+      flex-basis: auto !important;
+    }
+
+    @include media-breakpoint-up(md) {
+      flex-direction: row !important;
+
+      label {
+        flex-basis: 20% !important;
+        vertical-align: top;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      label {
+        flex-basis: 10% !important;
+      }
+    }
+  }
+
   .wrapped-fields-container > * {
       flex-grow: 0 !important;
   }
+
+  .wrapped-fields-container .fieldBox {
+    margin-top: 1rem;
+
+    label + *:not(.datetime) {
+      display: inline-block;
+    }
+
+    .help {
+      margin-left: 0 !important;
+    }
+
+    @include media-breakpoint-up(md) {
+      margin-left: 1rem;
+      margin-top: 0;
+    }
+  }
 }

baton/templates/admin/base_site.html

@@ -12,6 +12,8 @@
         {% baton_config 'SHOW_MULTIPART_UPLOADING' as show_multipart_uploading %}
         {% baton_config 'ENABLE_IMAGES_PREVIEW' as enable_images_preview %}
         {% baton_config 'CHANGELIST_FILTERS_IN_MODAL' as changelist_filters_in_modal %}
+        {% baton_config 'CHANGELIST_FILTERS_ALWAYS_OPEN' as changelist_filters_always_open %}
+        {% baton_config 'COLLAPSABLE_USER_AREA' as collapsable_user_area %}
         {% baton_config 'MENU_ALWAYS_COLLAPSED' as menu_always_collapsed %}
         {% baton_config 'MENU_TITLE' as menu_title %}
         {% baton_config 'GRAVATAR_DEFAULT_IMG' as gravatar_default_img %}
@@ -26,6 +28,8 @@
                     showMultipartUploading: {{ show_multipart_uploading|yesno:"true,false" }},
                     enableImagesPreview: {{ enable_images_preview|yesno:"true,false" }},
                     changelistFiltersInModal: {{ changelist_filters_in_modal|yesno:"true,false" }},
+                    changelistFiltersAlwaysOpen: {{ changelist_filters_always_open|yesno:"true,false" }},
+                    collapsableUserArea: {{ collapsable_user_area|yesno:"true,false" }},
                     menuAlwaysCollapsed: {{ menu_always_collapsed|yesno:"true,false" }},
                     menuTitle: '{{ menu_title|escapejs }}',
                     gravatarDefaultImg: '{{ gravatar_default_img }}'

docs/conf.py

@@ -54,9 +54,9 @@
 # built documents.
 #
 # The short X.Y version.
-version = u'1.10.12'
+version = u'1.11.0'
 # The full version, including alpha/beta/rc tags.
-release = u'1.10.12'
+release = u'1.11.0'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.