Dotclear

Changeset 3908:5faa2f3124a3


Ignore:
Timestamp:
10/24/18 10:23:03 (7 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

Better this way and it works on every modern browsers (I hope) \o/

Location:
admin
Files:
1 added
1 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • admin/index.php

    r3906 r3908  
    152152if (!$core->auth->user_prefs->accessibility->nodragdrop) { 
    153153    $dragndrop = 
    154         '<script type="text/javascript">' . "\n" . 
    155             dcPage::jsVar('dotclear.dragndrop_off', __('Dashboard area\'s drag and drop is disabled')) . "\n" . 
    156             dcPage::jsVar('dotclear.dragndrop_on', __('Dashboard area\'s drag and drop is enabled')) . "\n" . 
    157         "</script>\n". 
    158         '<input type="checkbox" id="dragndrop" title="' . __('Dashboard area\'s drag and drop is disabled') . '" />'; 
     154    '<script type="text/javascript">' . "\n" . 
     155    dcPage::jsVar('dotclear.dragndrop_off', __('Dashboard area\'s drag and drop is disabled')) . "\n" . 
     156    dcPage::jsVar('dotclear.dragndrop_on', __('Dashboard area\'s drag and drop is enabled')) . "\n" . 
     157    "</script>\n" . 
     158    '<input type="checkbox" id="dragndrop" class="sr-only" title="' . 
     159        __('Dashboard area\'s drag and drop is disabled') . '" />' . 
     160    '<label for="dragndrop">' . 
     161    '<svg aria-hidden="true" focusable="false" class="dragndrop-svg">' . 
     162    '<use xlink:href="images/dragndrop.svg#mask"></use>' . 
     163    '</svg>' . 
     164    '<span id="dragndrop-label" class="sr-only">' . __('Dashboard area\'s drag and drop is disabled') . '</span>' . 
     165    '</label>'; 
    159166} 
    160167 

  • admin/js/_index.js

    r3906 r3908  
    253253        areas.forEach(element => init_positions(element[0], element[1])); 
    254254        $(this).prop('title', dotclear.dragndrop_on); 
     255        $('#dragndrop-label').text(dotclear.dragndrop_on); 
    255256      } else { 
    256257        // Deactivate sorting feature 
    257258        areas.forEach(element => reset_positions(element[0])); 
    258259        $(this).prop('title', dotclear.dragndrop_off); 
     260        $('#dragndrop-label').text(dotclear.dragndrop_off); 
    259261      } 
    260262    }); 

  • admin/style/default-dark.css

    r3907 r3908  
    220220    width: auto; 
    221221    white-space: normal; } 
     222 
     223.sr-only { 
     224  border: 0; 
     225  clip: rect(0 0 0 0); 
     226  clip-path: inset(50%); 
     227  height: 1px; 
     228  margin: -1px; 
     229  overflow: hidden; 
     230  padding: 0; 
     231  position: absolute; 
     232  width: 1px; 
     233  white-space: nowrap; } 
    222234 
    223235/** -------------------------------------------------- 
    … …  
    22302242 
    22312243#dragndrop { 
    2232   position: absolute; 
    2233   width: 2em; 
    2234   height: 1.5em; 
    2235   -webkit-mask-image: url(dragndrop.svg); 
    2236   mask-image: url(dragndrop.svg); } 
     2244  position: absolute; } 
    22372245  .no-js #dragndrop { 
    22382246    display: none; } 
    2239   #dragndrop:before { 
    2240     content: ""; 
     2247  #dragndrop + label { 
     2248    position: absolute; 
    22412249    display: inline-block; 
     2250    line-height: 1; } 
     2251  #dragndrop + label .dragndrop-svg { 
    22422252    width: 2em; 
    22432253    height: 1.5em; 
    2244     background: #86888c; } 
    2245   #dragndrop:checked:before { 
    2246     background: #bee74b; } 
     2254    fill: #86888c; } 
     2255  #dragndrop:checked + label .dragndrop-svg { 
     2256    fill: #bee74b; } 
    22472257 
    22482258#media_img_title_pattern { 

  • admin/style/default.css

    r3907 r3908  
    220220    width: auto; 
    221221    white-space: normal; } 
     222 
     223.sr-only { 
     224  border: 0; 
     225  clip: rect(0 0 0 0); 
     226  clip-path: inset(50%); 
     227  height: 1px; 
     228  margin: -1px; 
     229  overflow: hidden; 
     230  padding: 0; 
     231  position: absolute; 
     232  width: 1px; 
     233  white-space: nowrap; } 
    222234 
    223235/** -------------------------------------------------- 
    … …  
    22302242 
    22312243#dragndrop { 
    2232   position: absolute; 
    2233   width: 2em; 
    2234   height: 1.5em; 
    2235   -webkit-mask-image: url(dragndrop.svg); 
    2236   mask-image: url(dragndrop.svg); } 
     2244  position: absolute; } 
    22372245  .no-js #dragndrop { 
    22382246    display: none; } 
    2239   #dragndrop:before { 
    2240     content: ""; 
     2247  #dragndrop + label { 
     2248    position: absolute; 
    22412249    display: inline-block; 
     2250    line-height: 1; } 
     2251  #dragndrop + label .dragndrop-svg { 
    22422252    width: 2em; 
    22432253    height: 1.5em; 
    2244     background: #868686; } 
    2245   #dragndrop:checked:before { 
    2246     background: #137bbb; } 
     2254    fill: #868686; } 
     2255  #dragndrop:checked + label .dragndrop-svg { 
     2256    fill: #137bbb; } 
    22472257 
    22482258#media_img_title_pattern { 

  • admin/style/scss/init/_rebase.scss

    r3439 r3908  
    256256     } 
    257257} 
     258 
     259.sr-only { 
     260  @include visually-hidden; 
     261} 

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

    r3907 r3908  
    147147  } 
    148148  position: absolute; 
    149   width: 2em; 
    150   height: 1.5em; 
    151   -webkit-mask-image: url(dragndrop.svg); 
    152   mask-image: url(dragndrop.svg); 
    153   &:before { 
    154     content: ""; 
     149  &+label { 
     150    position: absolute; 
    155151    display: inline-block; 
     152    line-height: 1; 
     153  } 
     154  &+label .dragndrop-svg { 
    156155    width: 2em; 
    157156    height: 1.5em; 
    158     background: $drag-n-drop-off; 
     157    fill: $drag-n-drop-off; 
    159158  } 
    160   &:checked:before { 
    161     background: $drag-n-drop-on; 
     159  &:checked+label .dragndrop-svg { 
     160    fill: $drag-n-drop-on; 
    162161  } 
    163162} 
Note: See TracChangeset for help on using the changeset viewer.

Sites map