Added issue image picker. Closes #20.

Author: bkraul

BBCodePlus/BBCodePlus.php

@@ -22,7 +22,7 @@ function register() {
          $this->name        = plugin_lang_get( 'title' );
          $this->description = plugin_lang_get( 'description' );
          $this->page        = 'config';
-         $this->version     = '2.1.15';
+         $this->version     = '2.1.16';
 
          $this->requires['MantisCore'] = '2.0.0';
          # this plugin can coexist with MantisCoreFormatting.
@@ -89,6 +89,17 @@ function content_begin() {
          } else {
             $output = '';
          }
+         # add image picker modal.
+         $output .= '<div id="bbcodeplus-image-picker" class="bbcodeplus modal">';
+         $output .= '<div class="bbcodeplus modal-content widget-box widget-color-blue2">';
+         $output .= '<div class="widget-header widget-header-small">';
+         $output .= '<h4 class="widget-title lighter bbcodeplus"><i class="ace-icon fa fa-image"></i>Images attached to issue</h4>';
+         $output .= '<div class="widget-toolbar"><a href="#" id="bbcodeplus-image-picker-close" class="bbcodeplus modal-close"><i class="ace-icon fa fa-close"></a></i></div>';
+         $output .= '</div>';
+         $output .= '<div id="bbcodeplus-image-picker-body" class="bbcodeplus modal-body"></div>';
+         $output .= '</div>';
+         $output .= '</div>';
+
          return $output;
       }
       //-------------------------------------------------------------------

BBCodePlus/files/bbcodeplus.css

@@ -1,29 +1,116 @@
 .bbcodeplus.pre {
-   border: 1px solid silver;
-   margin: 0 0 1.5em 0;
-   overflow: auto;
-   padding-left: 10px;
-   border-radius: 4px;
+  border: 1px solid silver;
+  margin: 0 0 1.5em 0;
+  overflow: auto;
+  padding-left: 10px;
+  border-radius: 4px;
 }
 
 .bbcodeplus.code span {
-   font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
-   font-size: 1em;
+  font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
+  font-size: 1em;
 }
 
 .bbcodeplus.table td {
-   border: 0 !important;
+  border: 0 !important;
 }
 
 .bbcodeplus.table-bordered td, .bbcodeplus.table-bordered tr, .bbcodeplus.table-bordered th {
-   border: 1px solid silver !important;
+  border: 1px solid silver !important;
 }
 
 .bbcodeplus.blockquote {
-   border: solid #c0c0c0 1px;
-   border-left: solid #c0c0c0 5px;
-   padding: 10px;
-   font-size: 1em;
-   background-color: #f5f2f0;
-   border-radius: 4px;
+  border: solid #c0c0c0 1px;
+  border-left: solid #c0c0c0 5px;
+  padding: 10px;
+  font-size: 1em;
+  background-color: #f5f2f0;
+  border-radius: 4px;
 }
+
+.bbcodeplus.modal {
+  display: none;
+  position: fixed;
+  z-index: 1030;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+ }
+
+.bbcodeplus.modal-close {
+  color: white;
+}
+ 
+.bbcodeplus.modal-close:hover,
+.bbcodeplus.modal-close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.bbcodeplus.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 50%;
+  max-height: 50%px;
+  overflow: auto;
+  z-index: 1031;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+
+.bbcodeplus.image-picker ul {
+  margin: 1em 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid: auto-flow / repeat(auto-fit, minmax(100px, 1fr));
+  align-items: baseline;
+  grid-gap: 10px;
+  gap: 10px;
+}
+
+.bbcodeplus.image-picker li {
+  width: 100px;
+  height: 100px;
+  min-height: 100px;
+  display: -moz-inline-stack;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 5px;
+  zoom: 1;
+  *display: inline;    
+}
+
+.bbcodeplus.image-picker li img {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid rgba(221,221,221,1);
+  border-radius: 5px;
+  max-width: 100%;
+}
+  
+.bbcodeplus.image-picker li img:hover {
+  filter: brightness(80%);
+  background-color: rgba(221,221,221,1);
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+   from {top:-300px; opacity:0} 
+   to {top:0; opacity:1}
+ }
+ 
+ @keyframes animatetop {
+   from {top:-300px; opacity:0}
+   to {top:0; opacity:1}
+ }

BBCodePlus/files/markitup/sets/default/style.css

@@ -22,6 +22,7 @@
 .markItUp .markItUpButton6 a {
 	background-image:url(images/picture.png); 
 }
+
 .markItUp .markItUpButton7 a {
 	background-image:url(images/link.png);
 }