From 9e6410d693e0c67a09e6ae031c81d013da9aa0da Mon Sep 17 00:00:00 2001
From: Bob Mottram <bob@freedombone.net>
Date: Thu, 25 Jun 2020 18:33:26 +0100
Subject: [PATCH] Remove javascript for scope dropdown

---
 epicyon-profile.css | 343 ++++++++++++++++++++++++++++++++++++++++++++
 webinterface.py     | 127 ++++++++--------
 2 files changed, 411 insertions(+), 59 deletions(-)

diff --git a/epicyon-profile.css b/epicyon-profile.css
index 413217be..0374e810 100644
--- a/epicyon-profile.css
+++ b/epicyon-profile.css
@@ -661,6 +661,349 @@ div.gallery img {
     text-decoration: none;
 }
 
+li { list-style:none;}
+.msgscope-collapse { position: relative; }
+.nav { width: 150px; }
+/***********BUTTON CODE ******************************************************/
+
+a, button, input:focus, input[type='button'], input[type='reset'], input[type='submit'], textarea:focus, .button {
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -ms-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+}
+.button-msgScope {
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+    width:100%;
+    min-height:100%;
+}
+.button-msgScope button, .button-msgScope div.lined-thin {
+    align-self:center;
+    background:transparent;
+    padding:1rem 1rem;
+    margin:0 1rem;
+    transition:all .5s ease;
+    color:#41403E;
+    font-size:2rem;
+    letter-spacing:1px;
+    outline:none;
+    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
+    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+    border-top-left-radius: 255px 15px;
+    border-top-right-radius: 15px 225px;
+    border-bottom-right-radius: 225px 15px;
+    border-bottom-left-radius:15px 255px;
+}
+.button-msgScope button:hover {
+    box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
+} 
+.btn {
+    background: #fff;
+    border: 1px solid #BEE7ED;
+    margin: -3px 0 0 0;
+}
+
+aside .toggle-msgScope input[type='checkbox'] {
+  float: right;
+}
+
+aside .toggle-inside li {
+  padding-left: 20px;
+  border-bottom: 1px solid #EEEDEE;
+  border-left: 5px solid rgba(101, 110, 127, 0.34);
+  width: 100%;
+  margin-left: -15px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px #F0F1F3;
+}
+
+.dropdown-menutoggle {
+  -webkit-margin-start: 0px;
+  -webkit-margin-end: 0px;
+  -webkit-padding-start: 40px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  position: absolute;
+  top: 100%;
+  left: 21px;
+  z-index: 1000;
+  display: block;
+  float: left;
+  min-width: 169px;
+  padding: 0 17px !important;
+  margin: 2px 0 0 !important;
+  font-size: 14px;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
+}
+
+.dropdown-menutoggle a {
+  box-shadow: none !important;
+}
+
+/******************TOGGLE ****************/
+.toggle-msgScope {
+    position: relative;
+    overflow: hidden;
+    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
+    line-height: 2rem;
+    font-size: 2.5rem;
+}
+.toggle-msgScope div[class*='toggle-inside'] {
+   /* margin: -22px 0 13px 0;*/
+    overflow: hidden;
+    box-sizing: border-box;
+    display: none;
+}
+aside .toggle-msgScope input[type='checkbox'] {
+    float:right;
+}
+aside .toggle-inside li {
+    padding-left: 20px;
+    border-bottom: 1px solid #EEEDEE;
+    border-left: 5px solid rgba(101, 110, 127, 0.34);
+    width: 100%;
+    margin-left: -15px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px #F0F1F3;
+}
+.nav li {
+    border-top: 0 solid #fff !important;
+}
+.nav .toggle-msgScope {
+    overflow: visible;
+}
+footer .msgscope {
+    height: 6rem;
+}
+#msgscope label div {
+    color: #fff !important;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -ms-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+    /*width: 170px;*/
+    padding: 15px;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    /*border-radius: 33px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    border-radius: 4px;*/
+    font-size: 1.5rem;
+    padding: 10px 10px 10px 10px;
+    text-decoration: none;
+    display: inline-block;
+    font-weight: bold;
+    box-shadow: 0px 3px 2px #CCC;
+    box-shadow: 0px 2px 1px rgba(204, 204, 204, 0.74);
+    background-color: #e85c41;
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    background-image: none;
+    white-space: nowrap;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-top: 10px;
+}
+#msgscope ul .divider {
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+}
+#msgscope label div:active {
+    background-color: #CE1119;
+    outline: 0;
+    background-image: none;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    border-color: #adadad;
+    background-image: none;
+}
+#msgscope label div:active:focus {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+#msgscope label div:focus {
+    background-color: #e6e6e6;
+}
+[id*='toggle'] .container, [class*='toggle'] .container  {
+    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
+}
+[id*='toggle'] {
+    visibility: hidden;
+    appearance:none;
+    cursor:pointer;
+    left:-100%;
+    top:-100%;
+}
+[id*='toggle'] + label {
+    cursor:pointer;
+    text-align: left;
+    -webkit-font-smoothing: antialiased;
+    cursor: pointer;
+    transition:all 500ms ease;
+}
+[id*='toggle'toggle'toggle'] + label div {
+    transition:all 500ms ease;
+}
+[id*='toggle'toggle'toggle'] + label div:after {
+    content:&#39;\002b&#39;; /*OPEN*/
+    text-align: left;
+    float: left;
+}
+[id*='toggle'toggle'toggle']:checked + label div:after {
+    content:&#39;\2212&#39;; /*close*/
+    text-align: left;
+    float: left;
+}
+
+a:visited,  a:link, a {
+    text-decoration: none;
+    color: #2c9ab7;
+}
+a:focus, a:hover {
+    text-decoration: underline;
+    color: #195760 !important;
+}
+
+#msgscope label div {
+    color: #fff !important;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -ms-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+    /*width: 170px;*/
+    padding: 15px;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    /*border-radius: 33px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    border-radius: 4px;*/
+    font-size: 1.5rem;
+    padding: 10px 10px 10px 10px;
+    text-decoration: none;
+    display: inline-block;
+    font-weight: bold;
+    box-shadow: 0px 3px 2px #CCC;
+    box-shadow: 0px 2px 1px rgba(204, 204, 204, 0.74);
+    background-color: #e85c41;
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    background-image: none;
+    white-space: nowrap;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    margin-top: 10px;
+}
+#msgscope ul .divider {
+    height: 1px;
+    margin: 9px 0;
+    overflow: hidden;
+    background-color: #e5e5e5;
+}
+#msgscope label div:active {
+    background-color: #CE1119;
+    outline: 0;
+    background-image: none;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    border-color: #adadad;
+    background-image: none;
+}
+#msgscope label div:active:focus {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+#msgscope label div:focus {
+    background-color: #e6e6e6;
+}
+[id*='toggle'] .container, [class*='toggle'] .container  {
+    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
+}
+[id*='toggle'] {
+    visibility: hidden;
+    appearance:none;
+    cursor:pointer;
+    left:-100%;
+    top:-100%;
+}
+[id*='toggle'] + label {
+    cursor:pointer;
+    text-align: left;
+    -webkit-font-smoothing: antialiased;
+    cursor: pointer;
+    transition:all 500ms ease;
+}
+[id*='toggle'] + label div {
+    transition:all 500ms ease;
+}
+[id*='toggle'] + label div:after {
+    content:'\002b'; /* open */
+    text-align: left;
+    float: left;
+}
+[id*='toggle']:checked + label div:after {
+    content:'\2212'; /* close */
+    text-align: left;
+    float: left;
+}
+
+.nav [id*='toggle'] + label div:after {
+    content:&#39; &#39;; /* open */
+}
+.nav [id*='toggle']:checked + label div:after {
+    content:&#39; &#39;; /* close */
+}
+
+[id*='toggle']:checked ~ .container {
+    display: none;
+}
+
+[id*='toggle']:checked ~ .toggle-inside {
+    display: block;
+}
+.toggle-msgScope div[class*='toggle-inside'] {
+    overflow: hidden;
+    box-sizing: border-box;
+    display: none;
+}
+
 @media screen and (min-width: 400px) {
     body, html {
         font-size: var(--font-size4);
diff --git a/webinterface.py b/webinterface.py
index 8f280511..10ab773f 100644
--- a/webinterface.py
+++ b/webinterface.py
@@ -1910,15 +1910,15 @@ def htmlNewPost(mediaInstance: bool, translate: {},
     questionOptionOnDropdown = ''
     if not replyStr:
         shareOptionOnDropdown = \
-            '<a href="' + pathBase + \
+            '        <li><a href="' + pathBase + \
             '/newshare"><img loading="lazy" alt="" title="" src="/' + \
             iconsDir + '/scope_share.png"/><b>' + translate['Shares'] + \
-            '</b><br>' + translate['Describe a shared item'] + '</a>'
+            '</b><br>' + translate['Describe a shared item'] + '</a></li>\n'
         questionOptionOnDropdown = \
-            '<a href="' + pathBase + \
+            '        <li><a href="' + pathBase + \
             '/newquestion"><img loading="lazy" alt="" title="" src="/' + \
             iconsDir + '/scope_question.png"/><b>' + translate['Question'] + \
-            '</b><br>' + translate['Ask a question'] + '</a>'
+            '</b><br>' + translate['Ask a question'] + '</a></li>\n'
 
     mentionsStr = ''
     for m in mentions:
@@ -1968,54 +1968,80 @@ def htmlNewPost(mediaInstance: bool, translate: {},
         dropdownDMSuffix += '?mention=' + mentionedActor
         dropdownReportSuffix += '?mention=' + mentionedActor
 
-    dropDownContent = ''
+    dropDownContent = \
+        '<img loading="lazy" alt="" title="" src="/' + iconsDir + \
+        '/' + scopeIcon + '"/><b class="scope-desc">' + \
+        scopeDescription + '</b>'
     if not reportUrl:
-        dropDownContent += \
-            '        <div id="myDropdown" class="dropdown-content">'
+        dropDownContent += "<div class='msgscope-collapse collapse "
+        dropDownContent += "right desktoponly' id='msgscope'>\n"
+        dropDownContent += "  <ul class='nav msgscope-nav msgscope-right'>\n"
+        dropDownContent += "  <li class=' ' style='position: relative;'>\n"
+        dropDownContent += "  <div class='toggle-msgScope button-msgScope'>\n"
+        dropDownContent += "    <input id='toggleMsgScope' "
+        dropDownContent += "name='toggleMsgScope' type='checkbox'/>\n"
+        dropDownContent += "    <label for='toggleMsgScope'>\n"
+        dropDownContent += "      <div class='lined-thin'>\n"
+        dropDownContent += '        <img loading="lazy" alt="" title="" src="/'
+        dropDownContent += iconsDir + '/' + scopeIcon
+        dropDownContent += '"/><b class="scope-desc">'
+        dropDownContent += scopeDescription + '</b>\n'
+        dropDownContent += "        <span class='caret'/>\n"
+        dropDownContent += "      </div>\n"
+        dropDownContent += "    </label>\n"
+        dropDownContent += "    <div class='toggle-inside'>\n"
+        dropDownContent += "      <ul aria-labelledby='dropdownMsgScope' "
+        dropDownContent += "class='dropdown-menutoggle'>\n"
+
         if showPublicOnDropdown:
-            dropDownContent += \
-                '          <a href="' + pathBase+dropdownNewPostSuffix + \
+            dropDownContent += "        <li>" \
+                '<a href="' + pathBase + dropdownNewPostSuffix + \
                 '"><img loading="lazy" alt="" title="" src="/' + \
                 iconsDir + '/scope_public.png"/><b>' + \
                 translate['Public'] + '</b><br>' + \
-                translate['Visible to anyone'] + '</a>'
-            dropDownContent += \
-                '          <a href="' + pathBase+dropdownNewBlogSuffix + \
+                translate['Visible to anyone'] + '</a></li>\n'
+            dropDownContent += "        <li>" \
+                '<a href="' + pathBase + dropdownNewBlogSuffix + \
                 '"><img loading="lazy" alt="" title="" src="/' + \
                 iconsDir + '/edit.png"/><b>' + \
                 translate['Blog'] + '</b><br>' + \
-                translate['Publicly visible post'] + '</a>'
-            dropDownContent += \
-                '          <a href="' + pathBase+dropdownUnlistedSuffix + \
+                translate['Publicly visible post'] + '</a></li>\n'
+            dropDownContent += "        <li>" \
+                '<a href="' + pathBase + dropdownUnlistedSuffix + \
                 '"><img loading="lazy" alt="" title="" src="/' + \
                 iconsDir+'/scope_unlisted.png"/><b>' + \
                 translate['Unlisted'] + '</b><br>' + \
-                translate['Not on public timeline'] + '</a>'
-        dropDownContent += \
-            '          <a href="' + pathBase+dropdownFollowersSuffix + \
+                translate['Not on public timeline'] + '</a></li>\n'
+        dropDownContent += "        <li>" \
+            '<a href="' + pathBase + dropdownFollowersSuffix + \
             '"><img loading="lazy" alt="" title="" src="/' + \
             iconsDir + '/scope_followers.png"/><b>' + \
             translate['Followers'] + '</b><br>' + \
-            translate['Only to followers'] + '</a>'
-        dropDownContent += \
-            '          <a href="' + \
-            pathBase + dropdownDMSuffix + \
+            translate['Only to followers'] + '</a></li>\n'
+        dropDownContent += "        <li>" \
+            '<a href="' + pathBase + dropdownDMSuffix + \
             '"><img loading="lazy" alt="" title="" src="/' + \
             iconsDir + '/scope_dm.png"/><b>' + translate['DM'] + \
-            '</b><br>' + translate['Only to mentioned people'] + '</a>'
-        dropDownContent += \
-            '          <a href="' + \
-            pathBase + dropdownReminderSuffix + \
+            '</b><br>' + translate['Only to mentioned people'] + \
+            '</a></li>\n'
+        dropDownContent += "        <li>" \
+            '<a href="' + pathBase + dropdownReminderSuffix + \
             '"><img loading="lazy" alt="" title="" src="/' + \
             iconsDir + '/scope_reminder.png"/><b>' + translate['Reminder'] + \
-            '</b><br>' + translate['Scheduled note to yourself'] + '</a>'
-        dropDownContent += \
-            '          <a href="' + pathBase + dropdownReportSuffix + \
+            '</b><br>' + translate['Scheduled note to yourself'] + \
+            '</a></li>\n'
+        dropDownContent += "        <li>" \
+            '<a href="' + pathBase + dropdownReportSuffix + \
             '"><img loading="lazy" alt="" title="" src="/' + iconsDir + \
             '/scope_report.png"/><b>' + translate['Report'] + \
-            '</b><br>' + translate['Send to moderators'] + '</a>'
+            '</b><br>' + translate['Send to moderators'] + '</a></li>\n'
         dropDownContent += questionOptionOnDropdown + shareOptionOnDropdown
-        dropDownContent += '        </div>'
+        dropDownContent += '      </ul>\n'
+        dropDownContent += '    </div>\n'
+        dropDownContent += '  </div>\n'
+        dropDownContent += '  </li>\n'
+        dropDownContent += '  </ul>\n'
+        dropDownContent += '</div>\n'
     else:
         mentionsStr = 'Re: ' + reportUrl + '\n\n' + mentionsStr
 
@@ -2026,30 +2052,24 @@ def htmlNewPost(mediaInstance: bool, translate: {},
     newPostForm += '  <div class="vertical-center">'
     newPostForm += \
         '    <label for="nickname"><b>' + newPostText + '</b></label>'
-    newPostForm += '    <div class="container">'
-    newPostForm += '      <div class="dropbtn" onclick="dropdown()">'
-    newPostForm += \
-        '        <img loading="lazy" alt="" title="" src="/' + iconsDir + \
-        '/' + scopeIcon + '"/><b class="scope-desc">' + \
-        scopeDescription + '</b>'
+    newPostForm += '    <div class="container">\n'
     newPostForm += dropDownContent
-    newPostForm += '      </div>'
     newPostForm += \
         '      <a href="' + pathBase + \
         '/searchemoji"><img loading="lazy" class="emojisearch" ' + \
         'src="/emoji/1F601.png" title="' + \
         translate['Search for emoji'] + '" alt="' + \
-        translate['Search for emoji'] + '"/></a>'
-    newPostForm += '    </div>'
-    newPostForm += '    <div class="container"><center>'
+        translate['Search for emoji'] + '"/></a>\n'
+    newPostForm += '    </div>\n'
+    newPostForm += '    <div class="container"><center>\n'
     newPostForm += \
         '      <a href="' + pathBase + \
         '/inbox"><button class="cancelbtn">' + \
-        translate['Cancel'] + '</button></a>'
+        translate['Cancel'] + '</button></a>\n'
     newPostForm += \
         '      <input type="submit" name="submitPost" value="' + \
-        translate['Submit'] + '">'
-    newPostForm += '    </center></div>'
+        translate['Submit'] + '">\n'
+    newPostForm += '    </center></div>\n'
     newPostForm += replyStr
     if mediaInstance and not replyStr:
         newPostForm += newPostImageSection
@@ -2070,17 +2090,16 @@ def htmlNewPost(mediaInstance: bool, translate: {},
 
     newPostForm += \
         '    <textarea id="message" name="message" style="height:' + \
-        str(messageBoxHeight) + 'px">' + mentionsStr + '</textarea>'
+        str(messageBoxHeight) + 'px">' + mentionsStr + '</textarea>\n'
     newPostForm += extraFields+dateAndLocation
     if not mediaInstance or replyStr:
         newPostForm += newPostImageSection
-    newPostForm += '  </div>'
-    newPostForm += '</form>'
+    newPostForm += '  </div>\n'
+    newPostForm += '</form>\n'
 
     if not reportUrl:
         newPostForm += \
-            '<script>' + clickToDropDownScript() + \
-            cursorToEndOfMessageScript() + '</script>'
+            '<script>' + cursorToEndOfMessageScript() + '</script>'
         newPostForm = \
             newPostForm.replace('<body>', '<body onload="focusOnMessage()">')
 
@@ -2727,16 +2746,6 @@ def individualFollowAsHtml(translate: {},
     return resultStr
 
 
-def clickToDropDownScript() -> str:
-    """Function run onclick to create a dropdown
-    """
-    script = 'function dropdown() {\n'
-    script += '  document.getElementById("myDropdown")' + \
-        '.classList.toggle("show");\n'
-    script += '}\n'
-    return script
-
-
 def cursorToEndOfMessageScript() -> str:
     """Moves the cursor to the end of the text in a textarea
     This avoids the cursor being in the wrong position when replying