diff --git a/themes/baggy/_head.twig b/themes/baggy/_head.twig index 1ea59ab..144bcaa 100755 --- a/themes/baggy/_head.twig +++ b/themes/baggy/_head.twig @@ -8,6 +8,7 @@ + diff --git a/themes/baggy/_menu.twig b/themes/baggy/_menu.twig index 7dd799f..5226728 100644 --- a/themes/baggy/_menu.twig +++ b/themes/baggy/_menu.twig @@ -4,9 +4,10 @@
  • {% trans "favorites" %}
  • {% trans "archive" %}
  • {% trans "tags" %}
  • -
  • {% trans "save a link" %}
  • +
  • {% trans "save a link" %} + {% include '_pocheit-form.twig' %} +
  • {% trans "config" %}
  • {% trans "logout" %}
  • - {% include '_pocheit-form.twig' %} diff --git a/themes/baggy/_pocheit-form.twig b/themes/baggy/_pocheit-form.twig index 3c4a4d6..ff91151 100755 --- a/themes/baggy/_pocheit-form.twig +++ b/themes/baggy/_pocheit-form.twig @@ -1,7 +1,8 @@
    - -
    -

    {% trans "Save a link" %}

    + +

    X + {% trans "Save a link" %}

    +
    diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css index 586501b..ba4b7c7 100755 --- a/themes/baggy/css/main.css +++ b/themes/baggy/css/main.css @@ -534,32 +534,78 @@ footer a { display: none; } +/* ========================================================================== + 2.1 = "save a link" popup div related styles + ========================================================================== */ + #bagit-form { - background: rgba(0,0,0,0.8); - position: fixed; + background: rgba(0,0,0,0.5); + position: absolute; top: 0; left: 10em; z-index: 20; height: 100%; width: 100%; margin: 0; + margin-top: -30%; padding: 2em; display: none; + border-left: 1px #EEE solid; } #bagit-form form { background: #FFF; position: absolute; - top: 50%; - left: 50%; + top: 0; + left: 0; z-index: 20; border: 10px solid #000; - width: 600px; - height: 300px; - margin: -150px 0 0 -300px; + width: 400px; + height: 200px; + /* margin: -150px 0 0 -300px; */ padding: 2em; } +a#bagit-form-close { + background: #000; + color: #FFF; + padding: 0.2em 0.5em; + text-decoration: none; + display: inline-block; + float: right; + font-size: 0.6em; +} +a#bagit-form-close:hover { + background: #999; + color: #000; +} + +.active-current { + background-color: #999; +} + +.active-current:after { + content: ""; + width: 0; + height: 0; + position: absolute; + border-style: solid; + border-width: 10px; + border-color: transparent #EEE transparent transparent; + right: 0; + top: 50%; + margin-top: -10px; +} + +.opacity03 { + opacity: 0.3; +} + +.add-to-wallabag-link-after { + background-color: #000; + color: #fff; + padding: 0 3px 2px 3px; +} /* ========================================================================== 3 = Pictos @@ -920,4 +966,8 @@ blockquote { #display-mode { display: none; } + + #bagit-form { + left: 0; + } } diff --git a/themes/baggy/js/init.js b/themes/baggy/js/init.js index 4e85bea..4830bd2 100755 --- a/themes/baggy/js/init.js +++ b/themes/baggy/js/init.js @@ -48,31 +48,58 @@ $.fn.ready(function() { } /* ========================================================================== - bag it link - ========================================================================== */ + bag it link and close button + ========================================================================== */ + + function toggleSaveLinkForm(url) { + $bagit.toggleClass("active-current"); + $bagitForm.toggle(); + $('#content').toggleClass("opacity03"); + if (url !== 'undefined' && url) { + $('#plainurl').val(url); + } + $('#plainurl').focus(); + } $bagit.click(function(){ - $bagitForm.toggle(); + toggleSaveLinkForm(); + }); + + $("#bagit-form-close").click(function(){ + toggleSaveLinkForm(); + }); + + $('#bagit-form form').submit(function(){ + toggleSaveLinkForm(); + return true; }); /* ========================================================================== - Keyboard gestion - ========================================================================== */ + Keyboard gestion + ========================================================================== */ $(window).keydown(function(e){ - if ( e.target.tagName.toLowerCase() !== 'input' ) { - switch (e.keyCode) { - // s letter - case 83: - $bagitForm.toggle(); - return false; - break; - case 27: - $bagitForm.hide(); - break; - } + if ( ( e.target.tagName.toLowerCase() !== 'input' && e.keyCode == 83 ) || e.keyCode == 27 ) { + toggleSaveLinkForm(); + return false; } - }) + }); + + /* ========================================================================== + Process all links inside an article + ========================================================================== */ + + $("article a[href^='http']").after(function() { + return " w "; + }); + + $(".add-to-wallabag-link-after").click(function(event){ + event.preventDefault(); + toggleSaveLinkForm($(this).attr('href')); + return false; + }); + + });