Added quotation button over the selection

boards/static/css/base.css

@@ -1,156 +1,161 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
 }
 
 .mark_btn {
     cursor: pointer;
 }
 
 .img-full {
     position: fixed;
     background-color: #CCC;
     border: 1px solid #000;
     cursor: pointer;
 }
 
 .strikethrough {
     text-decoration: line-through;
 }
 
 .post_preview {
     z-index: 300;
     position:absolute;
 }
 
 .gallery_image {
     display: inline-block;
 }
 
 @media print {
     .post-form-w {
         display: none;
     }
 }
 
 input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      z-index: 1;
 }
 
 .file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
 }
 
 form > .file_wrap {
     float: left;
 }
 
 .file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-position: center;
 }
 
 .compact-form-text {
     margin-left:110px;
 }
 
 textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .compact-form-text > textarea {
     height: 100px;
     width: 100%;
 }
 
 .post-button-form {
     display: inline;
 }
 
 .post-button-form > button, #autoupdate {
     border: none;
     margin: inherit;
     padding: inherit;
     background: none;
     font-size: inherit;
     cursor: pointer;
 }
 
 #form-close-button {
     display: none;
 }
 
 .post-image-full {
     width: 100%;
     height: auto;
 }
 
 #preview-text {
     display: none;
 }
 
 .random-images-table {
     text-align: center;
     width: 100%;
 }
 
 .random-images-table > div {
     margin-left: auto;
     margin-right: auto;
 }
 
 .tag-image, .tag-text-data {
     display: inline-block;
 }
 
 .tag-text-data > h2 {
     margin: 0;
 }
 
 .tag-image {
     margin-right: 5px;
 }
 
 .reply-to-message {
     display: none;
 }
 
 .tripcode {
     padding: 2px;
 }
 
 #fav-panel {
     display: none;
     margin: 1ex;
 }
 
 .hidden_post {
     opacity: 0.2;
 }
 
 .hidden_post:hover {
     opacity: 1;
 }
 
 .monochrome > .image > .thumb > img {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
 }
 
+#quote-button {
+    position: absolute;
+    display: none;
+    cursor: pointer;
+}
  No newline at end of file

boards/static/css/md/base_page.css

@@ -1,568 +1,578 b''
 * {
    text-decoration: none;
    font-weight: inherit;
 }
 
 b, strong {
    font-weight: bold;
 }
 
 html {
     background: #555;
     color: #ffffff;
 }
 
 body {
     margin: 0;
 }
 
 #admin_panel {
     background: #FF0000;
     color: #00FF00
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 .title {
     font-weight: bold;
     color: #ffcc00;
 }
 
 .link, a {
     color: #afdcec;
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .tag {
     color: #FFD37D;
 }
 
 .post_id {
     color: #fff380;
 }
 
 .post, .dead_post, .archive_post, #posts-table {
     background: #333;
     padding: 10px;
     clear: left;
     word-wrap: break-word;
     border-top: 1px solid #777;
     border-bottom: 1px solid #777;
 }
 
 .post + .post {
     border-top: none;
 }
 
 .dead_post + .dead_post {
     border-top: none;
 }
 
 .archive_post + .archive_post {
     border-top: none;
 }
 
 .metadata {
     padding-top: 5px;
     margin-top: 10px;
     border-top: solid 1px #666;
     color: #ddd;
 }
 
 .navigation_panel, .tag_info {
     background: #222;
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 10px;
     border-bottom: solid 1px #888;
     border-top: solid 1px #888;
     color: #eee;
 }
 
 .navigation_panel .link:first-child {
     border-right: 1px solid #fff;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 
 .navigation_panel .right-link {
     border-left: 1px solid #fff;
     border-right: none;
     float: right;
     margin-left: 1ex;
     margin-right: 0;
     padding-left: 1ex;
     padding-right: 0;
 }
 
 .navigation_panel .link {
     font-weight: bold;
 }
 
 .navigation_panel::after, .post::after {
     clear: both;
     content: ".";
     display: block;
     height: 0;
     line-height: 0;
     visibility: hidden;
 }
 
 .tag_info {
     text-align: center;
 }
 
 .tag_info > .tag-text-data {
     text-align: left;
     max-width: 30em;
 }
 
 .header {
     border-bottom: solid 2px #ccc;
     margin-bottom: 5px;
     border-top: none;
     margin-top: 0;
 }
 
 .footer {
     border-top: solid 2px #ccc;
     margin-top: 5px;
     border-bottom: none;
     margin-bottom: 0;
 }
 
 p, .br {
     margin-top: .5em;
     margin-bottom: .5em;
 }
 
 .post-form-w {
     background: #333344;
     border-top: solid 1px #888;
     border-bottom: solid 1px #888;
     color: #fff;
     padding: 10px;
     margin-bottom: 5px;
     margin-top: 5px;
 }
 
 .form-row {
     width: 100%;
     display: table-row;
 }
 
 .form-label {
     padding: .25em 1ex .25em 0;
     vertical-align: top;
     display: table-cell;
 }
 
 .form-input {
     padding: .25em 0;
     width: 100%;
     display: table-cell;
 }
 
 .form-errors {
     font-weight: bolder;
     vertical-align: middle;
     display: table-cell;
 }
 
 .post-form input:not([name="image"]):not([type="checkbox"]):not([type="submit"]), .post-form textarea, .post-form select {
     background: #333;
     color: #fff;
     border: solid 1px;
     padding: 0;
     font: medium sans-serif;
     width: 100%;
 }
 
 .post-form textarea {
     resize: vertical;
 }
 
 .form-submit {
     display: table;
     margin-bottom: 1ex;
     margin-top: 1ex;
 }
 
 .form-title {
     font-weight: bold;
     font-size: 2ex;
     margin-bottom: 0.5ex;
 }
 
 input[type="submit"], button {
     background: #222;
     border: solid 2px #fff;
     color: #fff;
     padding: 0.5ex;
     margin-right: 0.5ex;
 }
 
 input[type="submit"]:hover {
     background: #060;
 }
 
 .form-submit > button:hover {
     background: #006;
 }
 
 blockquote {
     border-left: solid 2px;
     padding-left: 5px;
     color: #B1FB17;
     margin: 0;
 }
 
 .post > .image {
     float: left;
     margin: 0 1ex .5ex 0;
     min-width: 1px;
     text-align: center;
     display: table-row;
 }
 
 .post > .metadata {
     clear: left;
 }
 
 .get {
     font-weight: bold;
     color: #d55;
 }
 
 * {
     text-decoration: none;
 }
 
 .dead_post > .post-info {
     font-style: italic;
 }
 
 .archive_post > .post-info {
     text-decoration: line-through;
 }
 
 .mark_btn {
     border: 1px solid;
     padding: 2px 2ex;
     display: inline-block;
     margin: 0 5px 4px 0;
 }
 
 .mark_btn:hover {
     background: #555;
 }
 
 .quote {
     color: #92cf38;
     font-style: italic;
 }
 
 .multiquote {
     padding: 3px;
     display: inline-block;
     background: #222;
     border-style: solid;
     border-width: 1px 1px 1px 4px;
     font-size: 0.9em;
 }
 
 .spoiler {
     background: black;
     color: black;
 }
 
 .spoiler:hover {
     color: #ddd;
 }
 
 .comment {
     color: #eb2;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
 .last-replies {
     margin-left: 3ex;
     margin-right: 3ex;
     border-left: solid 1px #777;
     border-right: solid 1px #777;
 }
 
 .last-replies > .post:first-child {
     border-top: none;
 }
 
 .thread {
     margin-bottom: 3ex;
     margin-top: 1ex;
 }
 
 .post:target {
     border: solid 2px white;
 }
 
 pre{
     white-space:pre-wrap
 }
 
 li {
     list-style-position: inside;
 }
 
 .fancybox-skin {
     position: relative;
     background-color: #fff;
     color: #ddd;
     text-shadow: none;
 }
 
 .fancybox-image {
     border: 1px solid black;
 }
 
 .image-mode-tab {
     background: #444;
     color: #eee;
     margin-top: 5px;
     padding: 5px;
     border-top: 1px solid #888;
     border-bottom: 1px solid #888;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 #posts-table {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 
 .tag_info > h2 {
     margin: 0;
 }
 
 .post-info {
     color: #ddd;
     margin-bottom: 1ex;
 }
 
 .moderator_info {
     color: #e99d41;
     opacity: 0.4;
 }
 
 .moderator_info:hover {
     opacity: 1;
 }
 
 .refmap {
     font-size: 0.9em;
     color: #ccc;
     margin-top: 1em;
 }
 
 .fav {
     color: yellow;
 }
 
 .not_fav {
     color: #ccc;
 }
 
 .form-email {
     display: none;
 }
 
 .bar-value {
     background: rgba(50, 55, 164, 0.45);
     font-size: 0.9em;
     height: 1.5em;
 }
 
 .bar-bg {
     position: relative;
     border-top: solid 1px #888;
     border-bottom: solid 1px #888;
     margin-top: 5px;
     overflow: hidden;
 }
 
 .bar-text {
     padding: 2px;
     position: absolute;
     left: 0;
     top: 0;
 }
 
 .page_link {
     background: #444;
     border-top: solid 1px #888;
     border-bottom: solid 1px #888;
     padding: 5px;
     color: #eee;
     font-size: 2ex;
     margin-top: .5ex;
     margin-bottom: .5ex;
 }
 
 .skipped_replies {
     padding: 5px;
     margin-left: 3ex;
     margin-right: 3ex;
     border-left: solid 1px #888;
     border-right: solid 1px #888;
     border-bottom: solid 1px #888;
     background: #000;
 }
 
 .current_page {
     padding: 2px;
     background-color: #afdcec;
     color: #000;
 }
 
 .current_mode {
     font-weight: bold;
 }
 
 .gallery_image {
     border: solid 1px;
     margin: 0.5ex;
     text-align: center;
     padding: 1ex;
 }
 
 code {
     border: dashed 1px #ccc;
     background: #111;
     padding: 2px;
     font-size: 1.2em;
     display: inline-block;
 }
 
 pre {
     overflow: auto;
 }
 
 .img-full {
     background: #222;
     border: solid 1px white;
 }
 
 .tag_item {
     display: inline-block;
 }
 
 #id_models li {
     list-style: none;
 }
 
 #id_q {
     margin-left: 1ex;
 }
 
 ul {
     padding-left: 0px;
 }
 
 .quote-header {
     border-bottom: 2px solid #ddd;
     margin-bottom: 1ex;
     padding-bottom: .5ex;
     color: #ddd;
     font-size: 1.2em;
 }
 
 /* Reflink preview */
 .post_preview {
     border-left: 1px solid #777;
     border-right: 1px solid #777;
     max-width: 600px;
 }
 
 /* Code highlighter */
 .hljs {
     color: #fff;
     background: #000;
     display: inline-block;
 }
 
 .hljs, .hljs-subst, .hljs-tag .hljs-title, .lisp .hljs-title, .clojure .hljs-built_in, .nginx .hljs-title {
     color: #fff;
 }
 
 #up {
     position: fixed;
     bottom: 5px;
     right: 5px;
     border: 1px solid #777;
     background: #000;
     padding: 4px;
     opacity: 0.3;
 }
 
 #up:hover {
     opacity: 1;
 }
 
 .user-cast {
     border: solid #ffffff 1px;
     padding: .2ex;
     background: #152154;
     color: #fff;
 }
 
 .highlight {
     background: #222;
 }
 
 .post-button-form > button:hover {
     text-decoration: underline;
 }
 
 .tree_reply > .post {
     margin-top: 1ex;
     border-left: solid 1px #777;
     padding-right: 0;
 }
 
 #preview-text {
     border: solid 1px white;
     margin: 1ex 0 1ex 0;
     padding: 1ex;
 }
 
 .image-metadata {
     font-size: 0.9em;
 }
 
 .tripcode {
     color: white;
 }
 
 #fav-panel {
     border: 1px solid white;
 }
 
 .post-blink {
     background-color: #000;
 }
+
+#quote-button {
+    background-color: black;
+    border: solid white 1px;
+    padding: 2px;
+}
+
+#quote-button:hover {
+    background-color: #2d3955;
+}
  No newline at end of file

boards/static/css/pg/base_page.css

@@ -1,383 +1,393 b''
 html {
     background: rgb(238, 238, 238);
     color: rgb(51, 51, 51);
 }
 
 #admin_panel {
     background: #FF0000;
     color: #00FF00
 }
 
 .input_field {
 
 }
 
 .input_field_name {
 
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 
 .title {
     font-weight: bold;
     color: #333;
     font-size: 2ex;
 }
 
 .link, a {
     color: #ff7000;
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .tag {
     color: #222;
 }
 
 .post_id:hover {
     color: #11f;
 }
 
 .post_id {
     color: #444;
 }
 
 .post, .dead_post, #posts-table {
     margin: 5px;
     padding: 10px;
     background: rgb(221, 221, 221);
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
     clear: left;
     word-wrap: break-word;
     display: table;
 }
 
 .metadata {
     padding: 5px;
     margin-top: 10px;
     border: solid 1px #666;
     font-size: 0.9em;
     display: table;
 }
 
 .navigation_panel, .tag_info, .page_link {
     margin: 5px;
     padding: 10px;
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
 }
 
 .navigation_panel .link {
     border-right: 1px solid #000;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 .navigation_panel .link:last-child {
     border-left: 1px solid #000;
     border-right: none;
     float: right;
     margin-left: 1ex;
     margin-right: 0;
     padding-left: 1ex;
     padding-right: 0;
 }
 
 .navigation_panel::after, .post::after {
     clear: both;
     content: ".";
     display: block;
     height: 0;
     line-height: 0;
     visibility: hidden;
 }
 
 p {
     margin-top: .5em;
     margin-bottom: .5em;
 }
 
 .post-form-w {
     display: table;
     padding: 10px;
     margin: 5px
 }
 
 .form-row {
     display: table-row;
 }
 
 .form-label, .form-input, .form-errors {
     display: table-cell;
 }
 
 .form-label {
     padding: .25em 1ex .25em 0;
     vertical-align: top;
 }
 
 .form-input {
     padding: .25em 0;
 }
 
 .form-errors {
     padding-left: 1ex;
     font-weight: bold;
     vertical-align: middle;
 }
 
 .post-form input:not([name="image"]), .post-form textarea {
     background: #fff;
     color: #000;
     border: solid 1px;
     padding: 0;
     width: 100%;
     font: medium sans;
 }
 
 .form-submit {
     border-bottom: 2px solid #ddd;
     margin-bottom: .5em;
     padding-bottom: .5em;
 }
 
 .form-title {
     font-weight: bold;
 }
 
 input[type="submit"] {
     background: #fff;
     border: solid 1px #000;
     color: #000;
 }
 
 blockquote {
     border-left: solid 2px;
     padding-left: 5px;
     color: #B1FB17;
     margin: 0;
 }
 
 .post > .image {
     float: left;
     margin: 0 1ex .5ex 0;
     min-width: 1px;
     text-align: center;
     display: table-row;
 }
 
 .post > .metadata {
     clear: left;
 }
 
 .get {
     font-weight: bold;
     color: #d55;
 }
 
 * {
     text-decoration: none;
 }
 
 .dead_post {
     border-top: solid #d5494f;
 }
 
 .archive_post {
     border-top: solid #575e9f;
 }
 
 .quote {
     color: #080;
     font-style: italic;
 }
 
 .spoiler {
     background: white;
     color: white;
 }
 
 .spoiler:hover {
     color: black;
 }
 
 .comment {
     color: #8B6914;
     font-style: italic;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
 .last-replies {
     margin-left: 3ex;
 }
 
 .thread {
     margin-bottom: 3ex;
 }
 
 .post:target {
     border: solid 2px black;
 }
 
 pre{
     white-space:pre-wrap
 }
 
 li {
     list-style-position: inside;
 }
 
 .fancybox-skin {
     position: relative;
     background-color: #fff;
     color: #ddd;
     text-shadow: none;
 }
 
 .fancybox-image {
     border: 1px solid black;
 }
 
 .image-mode-tab {
     display: table;
     margin: 5px;
     padding: 5px;
     background: rgb(221, 221, 221);
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 #posts-table {
     margin: 5px;
 }
 
 .tag_info, .page_link {
     display: table;
 }
 
 .tag_info > h2 {
     margin: 0;
 }
 
 .moderator_info {
     color: #e99d41;
     border: dashed 1px;
     padding: 3px;
 }
 
 .refmap {
     font-size: 0.9em;
     color: #444;
     margin-top: 1em;
 }
 
 input[type="submit"]:hover {
         background: #ccc;
 }
 
 
 .fav {
     color: rgb(255, 102, 0);
 }
 
 .not_fav {
     color: #555;
 }
 
 .form-email {
     display: none;
 }
 
 .mark_btn {
     padding: 2px 2ex;
     border: 1px solid;
 }
 
 .mark_btn:hover {
     background: #ccc;
 }
 
 .bar-value {
     background: rgba(251, 199, 16, 0.61);
     padding: 2px;
     font-size: 0.9em;
     height: 1.5em;
 }
 
 .bar-bg {
     position: relative;
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
     margin: 5px;
     overflow: hidden;
 }
 
 .bar-text {
     padding: 2px;
     position: absolute;
     left: 0;
     top: 0;
 }
 
 .skipped_replies {
     margin: 5px;
 }
 
 .current_page, .current_mode {
     border: solid 1px #000;
     padding: 2px;
 }
 
 .tag_item {
     display: inline-block;
     border: 1px solid #ccc;
     margin: 0.3ex;
     padding: 0.2ex;
 }
 
 .multiquote {
     padding: 3px;
     display: inline-block;
     background: #ddd;
     border-style: solid;
     border-width: 1px 1px 1px 4px;
     border-color: #222;
     font-size: 0.9em;
 }
 
 .highlight {
     background-color: #F9E8A5;
 }
 
 #preview-text {
     border: solid 1px black;
     margin: 1ex 0 1ex 0;
     padding: 1ex;
 }
 
 .image-metadata {
     font-style: italic;
     font-size: 0.9em;
 }
 
 .post-blink {
     background-color: #333;
 }
+
+#quote-button {
+    background-color: #e2c48f;
+    border: solid #000000 1px;
+    padding: 2px;
+}
+
+#quote-button:hover {
+    background-color: #bde2a6;
+}
  No newline at end of file

boards/static/css/sw/base_page.css

@@ -1,418 +1,428 b''
 * {
     font-size: inherit;
     margin: 0;
     padding: 0;
 }
 html {
     background: #fff;
     color: #000;
     font: medium sans-serif;
 }
 a {
     color: inherit;
     text-decoration: underline;
 }
 li {
     list-style-position: inside;
 }
 
 #admin_panel {
     background: #182F6F;
     color: #fff;
     padding: .5ex 1ex .5ex 1ex;
 }
 
 .navigation_panel {
     background: #182F6F;
     color: #B4CFEC;
     margin-bottom: 1em;
     padding: .5ex 1ex 1ex 1ex;
 }
 .navigation_panel::after {
     clear: both;
     content: ".";
     display: block;
     height: 0;
     line-height: 0;
     visibility: hidden;
 }
 
 .navigation_panel a:link, .navigation_panel a:visited, .navigation_panel a:hover {
     text-decoration: none;
 }
 
 .navigation_panel .link {
     border-right: 1px solid #fff;
     color: #fff;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 .navigation_panel .right-link {
     border-left: 1px solid #fff;
     border-right: none;
     float: right;
     margin-left: 1ex;
     margin-right: 0;
     padding-left: 1ex;
     padding-right: 0;
 }
 
 .navigation_panel .tag {
     color: #fff;
 }
 
 .input_field {
 
 }
 
 .input_field_name {
 
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 
 .title {
     color: #182F6F;
     font-weight: bold;
 }
 
 .post-form-w {
     background: #182F6F;
     border-radius: 1ex;
     color: #fff;
     margin: 1em 1ex;
     padding: 1ex;
 }
 
 .form-row {
     display: table;
     width: 100%;
 }
 .form-label, .form-input {
     display: table-cell;
     vertical-align: top;
 }
 .form-label {
     padding: .25em 1ex .25em 0;
     width: 14ex;
 }
 .form-input {
     padding: .25em 0;
 }
 .form-input > * {
     background: #fff;
     color: #000;
     border: none;
     padding: 0;
     resize: vertical;
 }
 
 .form-input > :not(.file_wrap) {
     width: 100%;
 }
 
 .form-submit {
     border-bottom: 1px solid #666;
     margin-bottom: .5em;
     padding-bottom: .5em;
 }
 .form-title {
     font-weight: bold;
     margin-bottom: .5em;
 }
 .post-form .settings_item {
     margin: .5em 0;
 }
 .form-submit input {
     margin-top: .5em;
     padding: .2em 1ex;
 }
 .form-label {
     text-align: left;
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .post_id {
     color: #a00;
 }
 
 .post {
     clear: left;
     margin: 0 1ex 1em 1ex;
     overflow-x: auto;
     word-wrap: break-word;
     background: #FFF;
     padding: 1ex;
     border: 1px solid #666;
     box-shadow: 1px 1px 2px 1px #666;
 }
 
 #posts > .post:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }
 
 .metadata {
     background: #C0E4E8;
     border: 1px solid #7F9699;
     border-radius: .4ex;
     display: table;
     margin-top: .5em;
     padding: .4em;
 }
 
 .post ul, .post ol {
     margin: .5em 0 .5em 3ex;
 }
 .post li {
     margin: .2em 0;
 }
 .post p {
     margin: .5em 0;
 }
 .post blockquote {
     border-left: 3px solid #182F6F;
     margin: .5em 0 .5em 3ex;
     padding-left: 1ex;
 }
 .post blockquote > blockquote {
     padding-top: .1em;
 }
 
 .post > .image {
     float: left;
     margin-right: 1ex;
 }
 .post > .metadata {
     clear: left;
 }
 
 .post > .message .get {
     color: #182F6F; font-weight: bold;
 }
 
 .dead_post > .metadata {
     background: #eee;
 }
 
 .quote, .multiquote {
     color: #182F6F;
 }
 
 .spoiler {
     background: black;
     color: black;
 }
 
 .spoiler:hover {
     background: #ffffff;
 }
 
 .comment {
     color: #557055;
 }
 
 .last-replies {
     margin-left: 6ex;
 }
 
 .thread > .post > .message > .post-info {
     border-bottom: 1px solid #ccc;
     padding-bottom: .5em;
 }
 
 :target .post_id {
     background: #182F6F;
     color: #FFF;
     text-decoration: none;
 }
 
 .image-mode-tab {
     background: #182F6F;
     color: #FFF;
     display: table;
     margin: 1em auto 1em 0;
     padding: .2em .5ex;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 .tag_info, .page_link {
     margin: 1em 0;
     text-align: center;
 }
 
 .form-errors {
     margin-left: 1ex;
 }
 
 .moderator_info {
     font-weight: bold;
     float: right;
 }
 
 .refmap {
     border: 1px dashed #aaa;
     padding: 0.5em;
     display: table;
 }
 
 .fav {
     color: blue;
 }
 
 .not_fav {
     color: #ccc;
 }
 
 .form-email {
     display: none;
 }
 
 .bar-value {
     background: #E3E7F2;
     padding: .1em 1ex;
     moz-box-sizing: border-box;
     box-sizing: border-box;
     height: 1.5em;
 }
 
 .bar-bg {
     background: #EA4649;
     border: 1px solid #666;
     margin: 0 1ex 1em 1ex;
     position: relative;
     overflow: hidden;
 }
 
 .bar-text {
     padding: 2px;
     position: absolute;
     left: 0;
     top: 0;
 }
 
 .skipped_replies {
     margin: 1ex;
 }
 
 #mark-panel {
     background: #eee;
     border-bottom: 1px solid #182F6F;
 }
 
 .mark_btn {
     display: inline-block;
     padding: .2em 1ex;
     border-left: 1px solid #182F6F;
 }
 
 .mark_btn:first-child {
     border-left: none;
 }
 
 .mark_btn:last-child {
     border-right: 1px solid #182F6F;
 }
 
 .current_page {
     border-bottom: 1px solid #FFF;
     padding: 0px 0.5ex;
 }
 
 .image-mode-tab a {
     text-decoration: none;
 }
 .image-mode-tab .current_mode::before {
     content: "✓ ";
     padding: 0 0 0 .5ex;
     color: #182F6F;
     background: #FFF;
 }
 .image-mode-tab .current_mode {
     padding: 0 .5ex 0 0;
     color: #182F6F;
     background: #FFF;
 }
 
 .gallery_image_metadata {
     margin-bottom: 1em;
 }
 
 .gallery_image {
     padding: 4px;
     margin: .5em 0 0 1ex;
     text-align: center;
     vertical-align: top;
 }
 
 .swappable-form-full > form {
     display: table;
     width: 100%;
 }
 
 #id_models li {
     list-style: none;
 }
 
 #id_q {
     margin-left: 1ex;
 }
 
 .br {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
 }
 
 .message, .refmap {
     margin-top: .5em;
 }
 
 .user-cast {
     padding: 0.2em .5ex;
     background: #008;
     color: #FFF;
     display: inline-block;
     text-decoration: none;
 }
 
 .highlight {
     background-color: #D4F0F9;
 }
 
 .dead_post {
     border-right: 1ex solid #666;
 }
 
 #preview-text {
     border: solid 1px white;
     margin: 1ex 0 1ex 0;
     padding: 1ex;
 }
 
 .image-metadata {
     font-style: italic;
     font-size: 0.9em;
 }
 
 audio {
     margin-top: 1em;
 }
 
 .post-blink {
     background-color: #ccc;
 }
+
+#quote-button {
+    background-color: #99a3e2;
+    border: solid #000000 1px;
+    padding: 2px;
+}
+
+#quote-button:hover {
+    background-color: #b9c4e2;
+}
  No newline at end of file

boards/static/js/thread.js

@@ -1,122 +1,143 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var CLOSE_BUTTON = '#form-close-button';
 var REPLY_TO_MSG = '.reply-to-message';
 var REPLY_TO_MSG_ID = '#reply-to-message-id';
 
 var $html = $("html, body");
 
 function moveCaretToEnd(el) {
         if (typeof el.selectionStart == "number") {
             el.selectionStart = el.selectionEnd = el.value.length;
         } else if (typeof el.createTextRange != "undefined") {
             el.focus();
             var range = el.createTextRange();
             range.collapse(false);
             range.select();
         }
 }
 
 function getForm() {
     return $('.post-form-w');
 }
 
 function resetFormPosition() {
     var form = getForm();
     form.insertAfter($('.thread'));
 
     $(CLOSE_BUTTON).hide();
     $(REPLY_TO_MSG).hide();
 }
 
 function showFormAfter(blockToInsertAfter) {
     var form = getForm();
     form.insertAfter(blockToInsertAfter);
 
     $(CLOSE_BUTTON).show();
     form.show();
     $(REPLY_TO_MSG_ID).text(blockToInsertAfter.attr('id'));
     $(REPLY_TO_MSG).show();
 }
 
 function addQuickReply(postId) {
     // If we click "reply" on the same post, it means "cancel"
     if (getForm().prev().attr('id') == postId) {
         resetFormPosition();
     } else {
         var blockToInsert = null;
         var textAreaJq = $('textarea');
         var postLinkRaw = '[post]' + postId + '[/post]'
         var textToAdd = '';
 
         if (postId != null) {
             var post = $('#' + postId);
 
             // If this is not OP, add reflink to the post. If there already is
             // the same reflink, don't add it again.
             if (!post.is(':first-child') && textAreaJq.val().indexOf(postLinkRaw) < 0) {
                 textToAdd += postLinkRaw + '\n';
             }
 
             textAreaJq.val(textAreaJq.val()+ textToAdd);
             blockToInsert = post;
         } else {
             blockToInsert = $('.thread');
         }
         showFormAfter(blockToInsert);
     
         textAreaJq.focus();
 
         var textarea = document.getElementsByTagName('textarea')[0];
         moveCaretToEnd(textarea);
     }
 }
 
-function addQuickQuote(postId) {
-    if (getForm().prev().attr('id') != postId) {
-        addQuickReply(postId);
-    }
-
+function addQuickQuote() {
     var textToAdd = '';
     var textAreaJq = $('textarea');
-    var postLinkRaw = '[post]' + postId + '[/post]'
     var selection = window.getSelection().toString();
+    if (selection.length == 0) {
+        selection = $("#quote-button").attr('data-text');
+    }
     if (selection.length > 0) {
         textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     textAreaJq.val(textAreaJq.val()+ textToAdd);
 
     textAreaJq.focus();
 
     var textarea = document.getElementsByTagName('textarea')[0];
     moveCaretToEnd(textarea);
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }
 
+function showQuoteButton() {
+    var selection = window.getSelection().getRangeAt(0).getBoundingClientRect();
+    var quoteButton = $("#quote-button");
+    if (selection.width > 0) {
+        // quoteButton.offset({ top: selection.top - selection.height, left: selection.left });
+        quoteButton.css({top: selection.top + $(window).scrollTop() - 30, left: selection.left});
+        quoteButton.show();
+
+        var text = window.getSelection().toString();
+        quoteButton.attr('data-text', text);
+    } else {
+        quoteButton.hide();
+    }
+}
+
+$(document).ready(function() {
+    $('body').on('mouseup', function() {
+        showQuoteButton();
+    });
+    $("#quote-button").click(function() {
+        addQuickQuote();
+    })
+});
  No newline at end of file

boards/templates/boards/post.html

@@ -1,106 +1,105 b''
 {% load i18n %}
 {% load board %}
 
 {% get_current_language as LANGUAGE_CODE %}
 
 <div class="{{ css_class }}" id="{{ post.id }}" data-uid="{{ post.uid }}" {% if tree_depth %}style="margin-left: {{ tree_depth }}em;"{% endif %}>
     <div class="post-info">
         <a class="post_id" href="{{ post.get_absolute_url }}">#{{ post.get_absolute_id }}</a>
         <span class="title">{{ post.title }}</span>
         <span class="pub_time"><time datetime="{{ post.pub_time|date:'c' }}">{{ post.pub_time }}</time></span>
         {% if post.tripcode %}
             /
             {% with tripcode=post.get_tripcode %}
             <a href="{% url 'feed' %}?tripcode={{ tripcode.get_full_text }}"
                class="tripcode" title="{{ tripcode.get_full_text }}"
                style="border: solid 2px #{{ tripcode.get_color }}; border-left: solid 1ex #{{ tripcode.get_color }};">{{ tripcode.get_short_text }}</a>
             {% endwith %}
         {% endif %}
         {% comment %}
             Thread death time needs to be shown only if the thread is alredy archived
             and this is an opening post (thread death time) or a post for popup
             (we don't see OP here so we show the death time in the post itself).
         {% endcomment %}
         {% if thread.is_archived %}
             {% if is_opening %}
             — <time datetime="{{ thread.bump_time|date:'c' }}">{{ thread.bump_time }}</time>
             {% endif %}
         {% endif %}
         {% if is_opening %}
             {% if need_open_link %}
                 {% if thread.is_archived %}
                     <a class="link" href="{% url 'thread' post.id %}">{% trans "Open" %}</a>
                 {% else %}
                     <a class="link" href="{% url 'thread' post.id %}#form">{% trans "Reply" %}</a>
                 {% endif %}
             {% endif %}
         {% else %}
             {% if need_op_data %}
                 {% with thread.get_opening_post as op %}
                     {% trans " in " %}{{ op.get_link_view|safe }} <span class="title">{{ op.get_title_or_text }}</span>
                 {% endwith %}
             {% endif %}
         {% endif %}
         {% if reply_link and not thread.is_archived %}
-            <a href="#form" onclick="addQuickReply('{{ post.id }}'); return false;">{% trans 'Reply' %}</a> |
-            <a href="#form" onclick="addQuickQuote('{{ post.id }}'); return false;">{% trans 'Quote' %}</a>
+            <a href="#form" onclick="addQuickReply('{{ post.id }}'); return false;">{% trans 'Reply' %}</a>
         {% endif %}
 
         {% if perms.boards.change_post or perms.boards.delete_post or perms.boards.change_thread or perms_boards.delete_thread %}
             <span class="moderator_info">
                 {% if perms.boards.change_post or perms.boards.delete_post %}
                     | <a href="{% url 'admin:boards_post_change' post.id %}">{% trans 'Edit' %}</a>
                 {% endif %}
                 {% if perms.boards.change_thread or perms_boards.delete_thread %}
                     {% if is_opening %}
                        | <a href="{% url 'admin:boards_thread_change' thread.id %}">{% trans 'Edit thread' %}</a>
                     {% endif %}
                 {% endif %}
             </form>
             </span>
         {% endif %}
     </div>
     {% comment %}
         Post images. Currently only 1 image can be posted and shown, but post model
         supports multiple.
     {%  endcomment %}
     {% for image in post.images.all %}
         {{ image.get_view|safe }}
     {% endfor %}
     {% for file in post.attachments.all %}
         {{ file.get_view|safe }}
     {% endfor %}
     {% comment %}
         Post message (text)
     {% endcomment %}
     <div class="message">
         {% autoescape off %}
             {% if truncated %}
                 {{ post.get_text|truncatewords_html:50 }}
             {% else %}
                 {{ post.get_text }}
             {% endif %}
         {% endautoescape %}
     </div>
     {% if post.is_referenced %}
         {% if not mode_tree %}
             <div class="refmap">
                 {% trans "Replies" %}: {{ post.refmap|safe }}
             </div>
         {% endif %}
     {% endif %}
     {% comment %}
         Thread metadata: counters, tags etc
     {% endcomment %}
     {% if is_opening %}
         <div class="metadata">
             {% if is_opening and need_open_link %}
                 {% blocktrans count count=thread.get_reply_count %}{{ count }} message{% plural %}{{ count }} messages{% endblocktrans %},
                 {% blocktrans count count=thread.get_images_count %}{{ count }} image{% plural %}{{ count }} images{% endblocktrans %}.
             {% endif %}
             <span class="tags">
                 {{ thread.get_tag_url_list|safe }}
             </span>
         </div>
     {% endif %}
 </div>

boards/templates/boards/thread_normal.html

@@ -1,79 +1,81 b''
 {% extends "boards/thread.html" %}
 
 {% load i18n %}
 {% load static from staticfiles %}
 {% load board %}
 {% load tz %}
 
 {% block thread_content %}
     {% get_current_language as LANGUAGE_CODE %}
     {% get_current_timezone as TIME_ZONE %}
 
+    <div id="quote-button">{% trans 'Quote' %}</div>
+
     <div class="tag_info">
         <h2>
             <form action="{% url 'thread' opening_post.id %}" method="post" class="post-button-form">
                 {% csrf_token %}
                 {% if is_favorite %}
                     <button name="method" value="unsubscribe" class="fav">★</button>
                 {% else %}
                     <button name="method" value="subscribe" class="not_fav">★</button>
                 {% endif %}
             </form>
             {{ opening_post.get_title_or_text }}
         </h2>
     </div>
 
     {% if bumpable and thread.has_post_limit %}
         <div class="bar-bg">
             <div class="bar-value" style="width:{{ bumplimit_progress }}%" id="bumplimit_progress">
             </div>
             <div class="bar-text">
                 <span id="left_to_limit">{{ posts_left }}</span> {% trans 'posts to bumplimit' %}
             </div>
         </div>
     {% endif %}
 
     <div class="thread">
         {% for post in thread.get_replies %}
             {% post_view post reply_link=True %}
         {% endfor %}
     </div>
 
     {% if not thread.is_archived %}
         <div class="post-form-w">
             <script src="{% static 'js/panel.js' %}"></script>
             <div class="form-title">{% trans "Reply to thread" %} #{{ opening_post.id }}<span class="reply-to-message"> {% trans "to message " %} #<span id="reply-to-message-id"></span></span></div>
             <div class="post-form" id="compact-form" data-hasher="{% static 'js/3party/sha256.js' %}"
                        data-pow-script="{% static 'js/proof_of_work.js' %}">
                 <div class="swappable-form-full">
                     <form enctype="multipart/form-data" method="post" id="form">{% csrf_token %}
                         <div class="compact-form-text"></div>
                         {{ form.as_div }}
                         <div class="form-submit">
                             <input type="submit" value="{% trans "Post" %}"/>
                             <button id="preview-button" onclick="return false;">{% trans 'Preview' %}</button>
                             <button id="file-source-button" onclick="return false;">{% trans 'Change file source' %}</button>
                         </div>
                     </form>
                 </div>
                 <div id="preview-text"></div>
                 <div>
                     {% with size=max_file_size|filesizeformat %}
                         {% blocktrans %}Max file size is {{ size }}.{% endblocktrans %}
                     {% endwith %}
                 </div>
                 <div><a href="{% url "staticpage" name="help" %}">
                     {% trans 'Text syntax' %}</a></div>
                 <div><a id="form-close-button" href="#" onClick="resetFormPosition(); return false;">{% trans 'Close form' %}</a></div>
             </div>
         </div>
 
         <script src="{% static 'js/form.js' %}"></script>
         <script src="{% static 'js/jquery.form.min.js' %}"></script>
         <script src="{% static 'js/3party/jquery.blockUI.js' %}"></script>
         <script src="{% static 'js/thread.js' %}"></script>
         <script src="{% static 'js/thread_update.js' %}"></script>
     {% endif %}
 
     <script src="{% static 'js/3party/centrifuge.js' %}"></script>
 {% endblock %}