Improved dialogs in Speed Dial + fixed issue with saving page screen.

- closes #319
- closes #318

src/lib/data/html/speeddial.html

@@ -24,19 +24,18 @@ span.edit:hover {border-color: grey; border-radius: 3px;}
 span.reload {width: 16px;height: 16px;position: absolute;left: 92%;top: 0px;background: url(%IMG_RELOAD%) no-repeat;background-position: center;border: 1px solid transparent;display: none;}
 span.reload:hover {border-color: grey; border-radius: 4px;}
 
-#overlay-edit {width: 380px;max-height: 265px;border-width: 20px;margin-left: auto;margin-right: auto;margin-top: 100px;
--webkit-border-image: url(%BOX-BORDER%) 25;}
+#overlay-edit {width: 380px;max-height: 265px;border-width: 20px;margin-left:auto;margin-right: auto;margin-top: 100px;-webkit-border-image: url(%BOX-BORDER%) 25;-webkit-box-shadow: 0px 5px 80px #505050;border-radius:10px;}
 #overlay-edit img {display: block;margin-left: auto;margin-right: auto;}
-#overlay-edit input[type="submit"] {margin-left: auto;margin-right: auto;margin-top: 10px;display: block;width: 200px;}
+#overlay-edit .buttonbox input {margin-right:0px;margin-left:3px;}
 
 .formTable {width: 350px;margin-left: auto;margin-right: auto;margin-top: 15px;}
 .formTable input[type="text"] {width: 100%;-webkit-user-select: auto;}
 
 .sett {position: absolute;right:36px;top:10px;width: 24px;height: 24px;background: url(%IMG_SETTINGS%); cursor: pointer;}
-#settingsBox {position: absolute;right: 58px;top: 25px;width: auto;height: auto;background: #eeeeee;margin: 5px;border-radius: 15px;padding: 8px 15px;border: 1px solid transparent;opacity: 1;z-index: 200;}
-#settingsBox .content {float: right;margin-left: 115px;}
-#settingsBox .thumbhold {margin: 2px;padding: 1px;border-radius: 10px;text-align: center;width: 100px; height: 100px;background: #AAA;}
-#settingsBox .thumbhold p {margin: 0;padding: 0;background: #eeeeee url(%IMG_BACKGROUND%) no-repeat center center;background-size: %B_SIZE%;width: 98px;height:98px;border-radius: 10px;position: relative;left: 1px;top: 1px;}
+#settingsBox {margin-left:auto;margin-right: auto;margin-top: 100px;width: 350px;height: auto;padding:0 8px;-webkit-border-image: url(%BOX-BORDER%) 25;-webkit-box-shadow: 0px 5px 80px #505050;border-radius:10px;border-width: 20px;}
+#settingsBox .content {margin-left:auto;margin-right:auto;padding-bottom:2px;border-bottom: 1px solid #888;}
+#settingsBox .thumbhold {margin-left:auto;margin-right:auto;margin-bottom: 5px;padding: 1px;border-radius: 10px;text-align:center;width:180px;height:100px;background: #AAA;}
+#settingsBox .thumbhold p {padding: 0;background: #eeeeee url(%IMG_BACKGROUND%) no-repeat center center;background-size: %B_SIZE%;width: 178px;height:98px;border-radius: 10px;position: relative;left: 1px;top: 1px;line-height:98px;cursor:default;}
 #settingsBox p label {margin: 2px;padding: 1px;text-align: center;}
 #settingsBox p select {margin: 2px;padding: 1px;text-align: center;width: auto;}
 #settingsBox p select option {text-align: center;}
@@ -45,6 +44,10 @@ span.reload:hover {border-color: grey; border-radius: 4px;}
 #settingsBox .rowsel {margin: 2px;padding: 3px 0;border-bottom: 1px solid #888;}
 #settingsBox .rowsel input {text-align: center;width: 80%;height: 12px;margin: 0px;padding-bottom: 0;}
 #settingsBox .rowsel span {font-weight: bold;text-align: center;margin: 2px;margin-right: 7px;display: inline-block;width: 25px;}
+
+.buttonbox {margin-top: 5px;margin-bottom:-5px;text-align:right;}
+/*.buttonbox input {margin-left:3px; margin-right:0;padding:0;}*/
+.overlay { background:-webkit-radial-gradient(rgba(127, 127, 127, 0.5),rgba(127, 127, 127, 0.5) 35%,rgba(0, 0, 0, 0.7));bottom:0;left: 0;padding: 20px;padding-bottom: 130px;position: fixed;right:0;top:0;}
 </style>
 <script type="text/javascript" src="%JQUERY%"></script>
 <script type="text/javascript" src="%JQUERY-UI%"></script>
@@ -85,6 +88,10 @@ function onFetchTitleClick(checkbox) {
     $('#titleLine').css({'visibility' : displayStyle });
 }
 
+function hideEditBox() {
+    $('#fadeOverlay').fadeOut("slow", function() {$("#fadeOverlay").remove();});
+}
+
 function onEditClick(box) {
     editingId = $(box).index();
     var boxUrl = $(box).children('a').first().attr('href');
@@ -92,21 +99,21 @@ function onEditClick(box) {
     if (boxUrl === '')
         boxUrl = 'http://';
 
-    $('body').append('<div id="fadeOverlay" style="opacity:0.95;display:none;position:fixed;left:0;' +
-                     'top:0;width:100%;height:100%;z-index:9999;background:grey;">' +
-                     '<div id="overlay-edit" onkeypress="return onEditKeyPress(event)">' +
-                     '<img src="' + $(box).children('img').first().attr('src') + '"> ' +
-                     '<table class="formTable"><tr><td>' + URL + ': </td><td>' +
-                     '<input type="text" id="formUrl" value="' + boxUrl + '"></td></tr>' +
-                     '<tr id="titleLine"><td>' + TITLE + ': </td><td>' +
-                     '<input type="text" id="formTitle" value="' + boxTitle + '"></td></tr>' +
-                     '<tr><td></td><td><input type="checkbox" id="fetchTitle" onclick="onFetchTitleClick(this)">' +
-                     '<label for="fetchTitle">  ' + TITLE_FETCHTITLE + ' </label></td></tr>' +
-                     '</table><input type="submit" value="' + EDIT + '" onClick="boxEdited()">' +
-                     '</div></div>');
+    $('body').append('<div id="fadeOverlay" class="overlay" style="display:none;">' +
+        '<div id="overlay-edit" onkeypress="return onEditKeyPress(event)">' +
+        '<img src="' + $(box).children('img').first().attr('src') + '"> ' +
+        '<table class="formTable"><tr><td>' + URL + ': </td><td>' +
+        '<input type="text" id="formUrl" value="' + boxUrl + '"></td></tr>' +
+        '<tr id="titleLine"><td>' + TITLE + ': </td><td>' +
+        '<input type="text" id="formTitle" value="' + boxTitle + '"></td></tr>' +
+        '<tr><td></td><td><input type="checkbox" id="fetchTitle" onclick="onFetchTitleClick(this)">' +
+        '<label for="fetchTitle">  ' + TITLE_FETCHTITLE + ' </label></td></tr>' +
+        '</table><p class="buttonbox"><input type="button" value=" %CLOSE% " onClick="hideEditBox();">' + 
+        '<input type="button" value="   ' + EDIT + '   " onClick="boxEdited()"></p>' +
+        '</div></div>');
 
-    $('#fadeOverlay').css({'filter' : 'alpha(opacity=95)'}).fadeIn();
-    $('#fadeOverlay').click(function() { $(this).fadeOut("slow", function() {$("#fadeOverlay").remove();}); });
+    $('#fadeOverlay').css({'filter' : 'alpha(opacity=100)'}).fadeIn();
+    $('#fadeOverlay').click(function() {hideEditBox()});
     $('#overlay-edit').click(function(event) { event.stopPropagation(); });
     $('#formUrl').focus();
 }
@@ -144,7 +151,7 @@ function boxEdited() {
             speeddial.removeImageForUrl(a.getAttribute('href'));
         });
     } else {
-        $('#fadeOverlay').fadeOut("slow", function() {$("#fadeOverlay").remove();});
+        hideEditBox();
     }
     speeddial.changed(allPages());
 }
@@ -364,7 +371,7 @@ $(document).ready(function () {
 
 <body>
 <div id="quickdial"></div>
-<a onClick="$('#fadeOverlay2').css({'filter' : 'alpha(opacity=95)'}).fadeIn();$('#fadeOverlay2').click(function() { $(this).fadeOut('slow'); });$('#settingsBox').click(function(event) { event.stopPropagation(); });" title="%SETTINGS-TITLE%" class="sett"></a>
+<a onClick="$('#fadeOverlay2').css({'filter' : 'alpha(opacity=100)'}).fadeIn();$('#fadeOverlay2').click(function() { $(this).fadeOut('slow'); });$('#settingsBox').click(function(event) { event.stopPropagation(); });" title="%SETTINGS-TITLE%" class="sett"></a>
 <a onClick="onEditClick(addBox('', NEW_PAGE, '')); alignPage();" title="%ADD-TITLE%" class="add"></a>
 
 <script type="text/javascript">
@@ -384,7 +391,7 @@ $("#quickdial").sortable({
     }
 });
 </script>
-<div id="fadeOverlay2" style="opacity:0.95;display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;background:grey;">
+<div id="fadeOverlay2" class="overlay" style="display:none;">
   <div id="settingsBox">
     <div class="togop">
       <label for="PgInRow">%TXT_NRROWS%</label>
@@ -403,13 +410,13 @@ $("#quickdial").sortable({
     <div class="togop">
       <input type="checkbox" name="sdbackimg" id="BgImgToggle" onchange="bgImgToggle();bgImgUpdate()" />&nbsp;<label for="BgImgToggle">%TXT_NOTE%</label>
     </div>
+    <div id="BgImgSel" class="thumbhold" onclick="if($('#BgImgSelSiz').attr('disabled')!='disabled') {bgImageSel();bgImgUpdate();}" disabled="disabled"><p id="thumb">%TXT_SELECTIMAGE%</p></div>
     <div class="content">
       <p>
-        <input id="BgImgSel" type="button" class="button" value="%TXT_SELECTIMAGE%" onclick="bgImageSel();bgImgUpdate()" />
         <input id="BgImgHold" type="hidden" value="%IMG_BACKGROUND%" />
       </p>
-      <p>
-        <label for="BgImgSelSiz">%TXT_PLACEMENT%</label><br />
+      <center><p>
+        <label for="BgImgSelSiz">%TXT_PLACEMENT%</label>
         <select id="BgImgSelSiz" name="imgselsize" onchange="bgImgUpdate()">
           <option value="auto">%TXT_AUTO%</option>
           <option value="cover">%TXT_COVER%</option>
@@ -417,12 +424,12 @@ $("#quickdial").sortable({
           <option value="100% auto">%TXT_FWIDTH%</option>
           <option value="auto 100%">%TXT_FHEIGHT%</option>
         </select>
-      </p>
-      <p>
-        <input class="button" type="button" value="%APPLY%" onClick="saveSettings();$('#fadeOverlay2').fadeOut('slow');" />
-      </p>
+      </p></center>
     </div>
-    <div class="thumbhold"><p id="thumb"></p></div>
+    <p class="buttonbox">
+    <input type="button" value=" %CLOSE% " onClick="$('#fadeOverlay2').fadeOut('slow');" />
+    <input type="button" value="   %APPLY%   " onClick="saveSettings();$('#fadeOverlay2').fadeOut('slow');"/>
+      </p>
   </div>
 </div>
 </body>

src/lib/network/qupzillaschemehandler.cpp

@@ -263,6 +263,7 @@ QString QupZillaSchemeReply::speeddialPage()
         dPage.replace("%URL%", tr("Url"));
         dPage.replace("%TITLE%", tr("Title"));
         dPage.replace("%APPLY%", tr("Apply"));
+        dPage.replace("%CLOSE%", tr("Close"));
         dPage.replace("%NEW-PAGE%", tr("New Page"));
         dPage.replace("%IMG_SETTINGS%", "qrc:html/setting.png");
         dPage.replace("%SETTINGS-TITLE%", tr("Speed Dial settings"));

src/lib/other/pagescreen.cpp

@@ -52,12 +52,16 @@ PageScreen::PageScreen(WebView* view, QWidget* parent)
 
 void PageScreen::dialogAccepted()
 {
-    const QString &path = QFileDialog::getSaveFileName(this, tr("Save Page Screen..."),
-                          QDir::homePath() + "/" + QString("%1.png").arg(qz_filterCharsFromFilename(m_pageTitle)));
+    const QString &suggestedPath = QDir::homePath() + "/" + QString("%1.png").arg(qz_filterCharsFromFilename(m_pageTitle));
+    QString path = QFileDialog::getSaveFileName(this, tr("Save Page Screen..."),
+                          suggestedPath);
 
     if (!path.isEmpty()) {
-        m_pageImage.save(path);
+        if (!path.endsWith(".png", Qt::CaseInsensitive)) {
+            path.append(".png");
+        }
 
+        m_pageImage.save(path, "PNG");
         QTimer::singleShot(0, this, SLOT(close()));
     }
 }

src/lib/other/pagescreen.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>562</width>
-    <height>421</height>
+    <height>332</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -37,7 +37,7 @@
         <x>0</x>
         <y>0</y>
         <width>562</width>
-        <height>366</height>
+        <height>277</height>
        </rect>
       </property>
       <layout class="QVBoxLayout" name="verticalLayout_2">

src/lib/other/statusbarmessage.cpp

@@ -30,7 +30,6 @@
 
 TipLabel::TipLabel(QWidget* parent)
     : SqueezeLabelV1(parent)
-    , m_connected(false)
 {
     setWindowFlags(Qt::ToolTip);
     setForegroundRole(QPalette::ToolTipText);

src/lib/other/statusbarmessage.h

@@ -35,9 +35,6 @@ public:
 
 private:
     void paintEvent(QPaintEvent* ev);
-
-    QupZilla* p_QupZilla;
-    bool m_connected;
 };
 
 class QT_QUPZILLA_EXPORT StatusBarMessage

src/lib/tools/animatedwidget.cpp

@@ -43,6 +43,10 @@ AnimatedWidget::AnimatedWidget(const Direction &direction, int duration, QWidget
 
 void AnimatedWidget::startAnimation()
 {
+    if (m_aniGroup->state() == QAnimationGroup::Running) {
+        return;
+    }
+
     if (m_direction == Down) {
         Y_SHOWN = 0;
         Y_HIDDEN = -m_widget->height();
@@ -62,6 +66,10 @@ void AnimatedWidget::startAnimation()
 
 void AnimatedWidget::hide()
 {
+    if (m_aniGroup->state() == QAnimationGroup::Running) {
+        return;
+    }
+
     m_positionAni->setEndValue(QPoint(m_widget->pos().x(), Y_HIDDEN));
     m_heightAni->setEndValue(0);