Dotclear

Changeset 3839:783854ebd4ce


Ignore:
Timestamp:
08/31/18 11:42:03 (7 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

Some refinements for sortable area on dashboard, and some code refactoring

Location:
admin
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • admin/js/_index.js

    r3833 r3839  
    220220    $.post('services.php', params, function() {}); 
    221221  }; 
    222   // Wait 5 seconds before activating ordering capabilities on dashboard 
    223   setTimeout(function() { 
    224     $('#dashboard-main').sortable({ 
     222  var init_positions = function(sel, id) { 
     223    $(sel).sortable({ 
    225224      cursor: 'move', 
    226225      opacity: 0.5, 
    227226      tolerance: "pointer", 
    228227      update: function() { 
    229         set_positions(this, 'main_order'); 
    230       } 
    231     }); 
    232     $('#dashboard-boxes').sortable({ 
    233       cursor: 'move', 
    234       opacity: 0.5, 
    235       tolerance: "pointer", 
    236       update: function() { 
    237         set_positions(this, 'boxes_order'); 
    238       } 
    239     }); 
    240     $('#db-items').sortable({ 
    241       cursor: 'move', 
    242       opacity: 0.5, 
    243       tolerance: "pointer", 
    244       update: function() { 
    245         set_positions(this, 'boxes_items_order'); 
    246       } 
    247     }); 
    248     $('#db-contents').sortable({ 
    249       cursor: 'move', 
    250       opacity: 0.5, 
    251       tolerance: "pointer", 
    252       update: function() { 
    253         set_positions(this, 'boxes_contents_order'); 
    254       } 
    255     }); 
     228        set_positions(sel, id); 
     229      }, 
     230      start: function() { 
     231        $(sel).addClass('sortable-area'); 
     232      }, 
     233      stop: function() { 
     234        $(sel).removeClass('sortable-area'); 
     235      } 
     236    }); 
     237  }; 
     238  // Wait 5 seconds before activating ordering capabilities on dashboard 
     239  setTimeout(function() { 
     240    init_positions('#dashboard-main', 'main_order'); 
     241    init_positions('#dashboard-boxes', 'boxes_order'); 
     242    init_positions('#db-items', 'boxes_items_order'); 
     243    init_positions('#db-contents', 'boxes_contents_order'); 
    256244  }, 5000); 
    257245 

  • admin/js/common.js

    r3820 r3839  
    135135    $(ctarget).click(function(e) { 
    136136      if (p.user_pref && set_user_pref) { 
    137         if (p.hide ^ p.reverse_user_pref) { 
    138           jQuery.post('services.php', { 
    139             'f': 'setSectionFold', 
    140             'section': p.user_pref, 
    141             'value': 1, 
    142             xd_check: dotclear.nonce 
    143           }, function() {}); 
    144         } else { 
    145           jQuery.post('services.php', { 
    146             'f': 'setSectionFold', 
    147             'section': p.user_pref, 
    148             'value': 0, 
    149             xd_check: dotclear.nonce 
    150           }, function() {}); 
    151         } 
     137        jQuery.post('services.php', { 
     138          'f': 'setSectionFold', 
     139          'section': p.user_pref, 
     140          'value': (p.hide ^ p.reverse_user_pref ? 1 : 0), 
     141          xd_check: dotclear.nonce 
     142        }, function() {}); 
    152143        jQuery.cookie(p.user_pref, '', { 
    153144          expires: -1 

  • admin/style/default-dark.css

    r3838 r3839  
    21172117#dashboard-main { 
    21182118  text-align: center; } 
     2119  #dashboard-main > *:last-child { 
     2120    margin-bottom: 1em; } 
    21192121 
    21202122/* raccourcis */ 
    … …  
    21722174    padding: .2em 1em .1em 24px; 
    21732175    color: #323334; } 
    2174   #quick #new_cat, 
    2175   #quick .q-cat, 
    2176   #quick .q-cat label { 
     2176  #quick #new_cat, #quick .q-cat, #quick .q-cat label { 
    21772177    display: inline-block; 
    21782178    vertical-align: top; 
    … …  
    21982198    text-align: left; } 
    21992199 
    2200 .db-items, 
    2201 .db-contents { 
     2200.db-items, .db-contents { 
    22022201  display: flex; 
    22032202  flex-wrap: wrap; 
    22042203  justify-content: center; 
    22052204  flex: 1 1 auto; } 
    2206   .db-items img, 
    2207   .db-contents img { 
     2205  .db-items img, .db-contents img { 
    22082206    vertical-align: middle; } 
    2209   .db-items ul, 
    2210   .db-contents ul { 
     2207  .db-items ul, .db-contents ul { 
    22112208    display: block; 
    22122209    padding-left: 1.5em; 
    22132210    list-style: square; } 
    2214   .db-items li, 
    2215   .db-contents li { 
     2211  .db-items li, .db-contents li { 
    22162212    margin: 0.25em 0 0 0; } 
    22172213 
    … …  
    31993195 
    32003196/* ---------------------------------------------- Couleurs ajoutées via javascript 
     3197 
     3198/* Sortable (jQuery UI) */ 
     3199.sortable-area { 
     3200  border: 1px dashed currentColor; 
     3201  background-color: #4c4d4f; } 
     3202 
    32013203/* color-picker.js */ 
    32023204.color-color-picker { 

  • admin/style/default.css

    r3838 r3839  
    21172117#dashboard-main { 
    21182118  text-align: center; } 
     2119  #dashboard-main > *:last-child { 
     2120    margin-bottom: 1em; } 
    21192121 
    21202122/* raccourcis */ 
    … …  
    21722174    padding: .2em 1em .1em 24px; 
    21732175    color: #323232; } 
    2174   #quick #new_cat, 
    2175   #quick .q-cat, 
    2176   #quick .q-cat label { 
     2176  #quick #new_cat, #quick .q-cat, #quick .q-cat label { 
    21772177    display: inline-block; 
    21782178    vertical-align: top; 
    … …  
    21982198    text-align: left; } 
    21992199 
    2200 .db-items, 
    2201 .db-contents { 
     2200.db-items, .db-contents { 
    22022201  display: flex; 
    22032202  flex-wrap: wrap; 
    22042203  justify-content: center; 
    22052204  flex: 1 1 auto; } 
    2206   .db-items img, 
    2207   .db-contents img { 
     2205  .db-items img, .db-contents img { 
    22082206    vertical-align: middle; } 
    2209   .db-items ul, 
    2210   .db-contents ul { 
     2207  .db-items ul, .db-contents ul { 
    22112208    display: block; 
    22122209    padding-left: 1.5em; 
    22132210    list-style: square; } 
    2214   .db-items li, 
    2215   .db-contents li { 
     2211  .db-items li, .db-contents li { 
    22162212    margin: 0.25em 0 0 0; } 
    22172213 
    … …  
    31993195 
    32003196/* ---------------------------------------------- Couleurs ajoutées via javascript 
     3197 
     3198/* Sortable (jQuery UI) */ 
     3199.sortable-area { 
     3200  border: 1px dashed currentColor; 
     3201  background-color: #f3f3f3; } 
     3202 
    32013203/* color-picker.js */ 
    32023204.color-color-picker { 

  • admin/style/scss/partials/_index.scss

    r3838 r3839  
    11#dashboard-main { 
    2      text-align: center; 
     2  text-align: center; 
     3  & > *:last-child { 
     4    margin-bottom: 1em; 
     5  } 
    36} 
    4  
    5  
    67/* raccourcis */ 
    78 
    89#icons { 
    910  margin: 1em auto 2em; 
    10      display: flex; 
    11      flex-wrap: wrap; 
    12      justify-content: center; 
    13      p { 
    14           width: 13em; 
    15           margin: 1em 0 2em; 
     11  display: flex; 
     12  flex-wrap: wrap; 
     13  justify-content: center; 
     14  p { 
     15    width: 13em; 
     16    margin: 1em 0 2em; 
    1617    display: flex; 
    1718    flex-direction: column; 
    1819    justify-content: flex-start; 
    1920    align-items: center; 
    20      } 
    21      a { 
    22           &, 
    23           &:link, 
    24           &:visited, 
    25           &:hover, 
    26           &:focus { 
    27                border-bottom-width: 0; 
    28                text-decoration: none; 
    29           } 
    30           span { 
     21  } 
     22  a { 
     23    &, &:link, &:visited, &:hover, &:focus { 
     24      border-bottom-width: 0; 
     25      text-decoration: none; 
     26    } 
     27    span { 
    3128      color: $index-link-color; 
    32                border-bottom: 1px dotted $index-link-border; 
    33           } 
    34           img { 
    35                padding: 1.5em; 
    36                background-color: $index-icon-background; 
    37                border-radius: 8px; 
    38                border: 1px solid $index-icon-border; 
    39                display: inline-block; 
     29      border-bottom: 1px dotted $index-link-border; 
     30    } 
     31    img { 
     32      padding: 1.5em; 
     33      background-color: $index-icon-background; 
     34      border-radius: 8px; 
     35      border: 1px solid $index-icon-border; 
     36      display: inline-block; 
    4037      filter: contrast($index-icon-contrast); 
    41           } 
    42           &:focus { 
    43                outline: 0; 
    44                span { 
    45                     border: 2px solid $index-icon-outline; 
    46                } 
    47           } 
    48           &:focus, 
    49           &:hover { 
    50                img { 
    51                     background: $index-icon-outline; 
    52                     outline: 0; 
    53                     border-color: $index-icon-border; 
    54                } 
    55                span { 
    56                     border-bottom-style: solid; 
    57                } 
    58           } 
    59      } 
     38    } 
     39    &:focus { 
     40      outline: 0; 
     41      span { 
     42        border: 2px solid $index-icon-outline; 
     43      } 
     44    } 
     45    &:focus, &:hover { 
     46      img { 
     47        background: $index-icon-outline; 
     48        outline: 0; 
     49        border-color: $index-icon-border; 
     50      } 
     51      span { 
     52        border-bottom-style: solid; 
     53      } 
     54    } 
     55  } 
    6056} 
    61  
    62  
    6357/* billet rapide */ 
    6458 
    6559#quick { 
    66      max-width: 72em; 
     60  max-width: 72em; 
    6761  margin: 1em auto 2em; 
    6862  padding: 1em; 
    69      background: $quick-background; 
     63  background: $quick-background; 
    7064  border: 1px solid $quick-border; 
    71      text-align: left; 
    72      h3 { 
    73           margin-bottom: 0.2em; 
    74           font-size: 1.2em; 
    75      } 
    76      p.qinfo { 
    77           margin: -.7em -1em 1em; 
    78           background: $quick-info-background url(msg-info.png) no-repeat .2em .2em; 
    79           border: 1px solid $quick-info-border; 
    80           padding: .2em 1em .1em 24px; 
    81           color: $quick-info-color; 
    82      } 
    83      #new_cat, 
    84      .q-cat, 
    85      .q-cat label { 
    86           display: inline-block; 
    87           vertical-align: top; 
    88           margin-right: 1em; 
    89           margin-top: 0; 
    90      } 
    91      .q-cat label { 
    92           margin-right: .3em; 
    93      } 
    94      #new_cat { 
    95           margin-bottom: 2em; 
    96      } 
     65  text-align: left; 
     66  h3 { 
     67    margin-bottom: 0.2em; 
     68    font-size: 1.2em; 
     69  } 
     70  p.qinfo { 
     71    margin: -.7em -1em 1em; 
     72    background: $quick-info-background url(msg-info.png) no-repeat .2em .2em; 
     73    border: 1px solid $quick-info-border; 
     74    padding: .2em 1em .1em 24px; 
     75    color: $quick-info-color; 
     76  } 
     77  #new_cat, .q-cat, .q-cat label { 
     78    display: inline-block; 
     79    vertical-align: top; 
     80    margin-right: 1em; 
     81    margin-top: 0; 
     82  } 
     83  .q-cat label { 
     84    margin-right: .3em; 
     85  } 
     86  #new_cat { 
     87    margin-bottom: 2em; 
     88  } 
    9789} 
    98  
    99  
    10090/* modules additionnels */ 
    10191 
    10292#dashboard-boxes { 
    103      margin: 1em auto 2em; 
    104      display: flex; 
    105      flex-wrap: wrap; 
    106      justify-content: center; 
    107      .box { 
    108           padding: 10px; 
    109           border: 1px solid $index-box-border; 
    110           border-radius: 3px; 
    111           min-height: 200px; 
    112           margin: 10px; 
    113           text-align: left; 
    114      } 
     93  margin: 1em auto 2em; 
     94  display: flex; 
     95  flex-wrap: wrap; 
     96  justify-content: center; 
     97  .box { 
     98    padding: 10px; 
     99    border: 1px solid $index-box-border; 
     100    border-radius: 3px; 
     101    min-height: 200px; 
     102    margin: 10px; 
     103    text-align: left; 
     104  } 
    115105} 
    116  
    117 .db-items, 
    118 .db-contents { 
    119      //   display: inline-block; 
    120      //   text-align: center; 
    121      display: flex; 
    122      flex-wrap: wrap; 
    123      justify-content: center; 
    124      flex: 1 1 auto; 
    125      img { 
    126           vertical-align: middle; 
    127      } 
    128      ul { 
    129           display: block; 
    130           padding-left: 1.5em; 
    131           list-style: square; 
    132      } 
    133      li { 
    134           margin: 0.25em 0 0 0; 
    135      } 
     106.db-items, .db-contents { 
     107  //  display: inline-block; 
     108  //  text-align: center; 
     109  display: flex; 
     110  flex-wrap: wrap; 
     111  justify-content: center; 
     112  flex: 1 1 auto; 
     113  img { 
     114    vertical-align: middle; 
     115  } 
     116  ul { 
     117    display: block; 
     118    padding-left: 1.5em; 
     119    list-style: square; 
     120  } 
     121  li { 
     122    margin: 0.25em 0 0 0; 
     123  } 
    136124} 
    137  
    138125.no-js .outgoing img { 
    139      display: none; 
     126  display: none; 
    140127} 
    141  
    142128.dc-box { 
    143      background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right; 
     129  background: transparent url(dc_logos/sq-logo-32.png) no-repeat top right; 
    144130} 
    145  
    146131#news { 
    147      dt { 
    148           font-weight: bold; 
    149           margin: 0 0 0.4em 0; 
    150      } 
    151      dd { 
    152           margin: 0 0 1em 0; 
    153           p { 
    154                margin: 0.2em 0 0 0; 
    155           } 
    156      } 
     132  dt { 
     133    font-weight: bold; 
     134    margin: 0 0 0.4em 0; 
     135  } 
     136  dd { 
     137    margin: 0 0 1em 0; 
     138    p { 
     139      margin: 0.2em 0 0 0; 
     140    } 
     141  } 
    157142} 

  • admin/style/scss/partials/_utils.scss

    r3763 r3839  
    11/* ---------------------------------------------- Couleurs ajoutées via javascript 
     2 
     3/* Sortable (jQuery UI) */ 
     4 
     5.sortable-area { 
     6  border: 1px dashed currentColor; 
     7  background-color: $main-menu-background; 
     8} 
     9 
    210/* color-picker.js */ 
    311 
Note: See TracChangeset for help on using the changeset viewer.

Sites map