MDL-67786 core_contentbank: Templates and theme CSS

H3c-t0r · Apr 15, 2020 · 43c2d0f · 43c2d0f
1 parent 2867550
commit 43c2d0f
Show file tree

Hide file tree

Showing 9 changed files with 300 additions and 2 deletions.
diff --git a/contentbank/templates/bankcontent.mustache b/contentbank/templates/bankcontent.mustache
@@ -0,0 +1,73 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_contentbank/list
+
+    Example context (json):
+    {
+        "contents": [
+            {
+                "name": "accordion.h5p",
+                "link": "http://something/contentbank/contenttype/h5p/view.php?url=http://something/pluginfile.php/1/contentbank/public/accordion.h5p",
+                "icon" : "<img class='icon iconsize-big' alt='accordion.h5p' aria-hidden='true' src='http://something/theme/image.php/boost/core/1581597850/f/h5p-64'>"
+            },
+            {
+                "name": "resume.pdf",
+                "icon": "<img class='icon iconsize-big' alt='resume.pdf' aria-hidden='true' src='http://something/theme/image.php/boost/core/1584597850/f/pdf-64'>"
+            }
+        ],
+        "tools": [
+            {
+                "name": "Upload",
+                "link": "http://something/contentbank/contenttype/h5p/view.php?url=http://something/pluginfile.php/1/contentbank/public/accordion.h5p",
+                "icon" : "i/upload"
+            },
+            {
+                "icon": "i/export"
+            }
+        ]
+    }
+
+}}
+{{>core_contentbank/toolbar}}
+<div class="content-bank-container card">
+    <div class="content-bank">
+        <div class="cb-navbar">
+            {{#pix}} i/folder {{/pix}}
+        </div>
+        <div class="cb-content-wrapper">
+        {{#contents}}
+            <div class="cb-content">
+                <div class="cb-iconview">
+                    <div class="cb-file text-center position-relative">
+                        {{#link}}<a href="{{{ link }}}">{{/link}}
+                            <div style="position:relative;">
+                                <div class="cb-thumbnail text-center d-block" style="width: 110px; height: 110px;">
+                                    {{{ icon }}}
+                                </div>
+                            </div>
+                            <div class="cb-contentname-field position-absolute overflow-visible">
+                                <div class="cb-contentname text-truncate" style="width: 112px;">{{{ name }}}</div>
+                            </div>
+                        {{#link}}</a>{{/link}}
+                    </div>
+                </div>
+            </div>
+        {{/contents}}
+        </div>
+    </div>
+</div>
diff --git a/contentbank/templates/toolbar.mustache b/contentbank/templates/toolbar.mustache
@@ -0,0 +1,47 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_contentbank/toolbar
+
+    Example context (json):
+    {
+        "tools": [
+            {
+                "name": "Upload",
+                "link": "http://something/contentbank/contenttype/h5p/view.php?url=http://something/pluginfile.php/1/contentbank/public/accordion.h5p",
+                "icon" : "i/upload"
+            },
+            {
+                "icon": "i/export"
+            }
+        ]
+    }
+
+}}
+<div class="content-bank-toolbar card border-0 mb-3">
+    <div class="content-bank">
+        <div class="cb-toolbar float-sm-right">
+        {{#tools}}
+            {{#link}}<a href="{{{ link }}}" title="{{{ name }}}">{{/link}}
+                <div class="cb-tool btn btn-secondary btn-sm">
+                    {{#pix}} {{{ icon }}} {{/pix}}
+                </div>
+            {{#link}}</a>{{/link}}
+        {{/tools}}
+        </div>
+    </div>
+</div>
diff --git a/pix/i/upload.png b/pix/i/upload.png
diff --git a/pix/i/upload.svg b/pix/i/upload.svg
diff --git a/theme/boost/scss/moodle.scss b/theme/boost/scss/moodle.scss
@@ -14,6 +14,7 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/blocks";
 @import "moodle/bootswatch";
 @import "moodle/calendar";
+@import "moodle/contentbank";
 @import "moodle/course";
 @import "moodle/drawer";
 @import "moodle/dashboard";

diff --git a/theme/boost/scss/moodle/contentbank.scss b/theme/boost/scss/moodle/contentbank.scss
@@ -0,0 +1,64 @@
+/* Use a variable for the drawer background colors. */
+$navbar-bg: darken($body-bg, 5%) !default;
+
+// Content bank
+.content-bank-container {
+    min-height: 140px;
+    padding-bottom: 15px;
+    overflow: hidden;
+}
+.cb-navbar {
+    border-bottom: 1px solid #e5e5e5;
+    background-color: $navbar-bg;
+    min-height: 40px;
+    padding: 10px;
+}
+// Icon view (Content bank)
+.cb-iconview .cb-file {
+    float: left;
+    margin: 10px 10px 35px;
+}
+.cb-iconview .cb-thumbnail {
+    min-width: 110px;
+    min-height: 110px;
+    line-height: 110px;
+    border: 1px solid #fff;
+    .icon {
+        margin: 0;
+    }
+    img {
+        padding: 3px;
+        vertical-align: middle;
+    }
+}
+.cb-iconview .cb-thumbnail:hover {
+    background: #fff;
+    border: 1px solid #ddd;
+    @include box-shadow(inset 0 0 10px0 #ccc);
+}
+.cb-iconview .cb-contentname-field {
+    height: 33px;
+    word-wrap: break-word;
+    overflow: hidden;
+    .cb-contentname {
+        background: #fff;
+        padding: 5px 10px 12px;
+        min-width: 112px;
+    }
+}
+.cb-iconview .cb-file:focus,
+.cb-iconview .cb-file:hover {
+    // Undo truncating of text on hover.
+    .cb-contentname-field {
+        overflow: visible;
+        z-index: 1000;
+    }
+    .cb-contentname {
+        overflow: inherit;
+        white-space: normal;
+        text-overflow: inherit;
+    }
+}
+.content-bank-toolbar .cb-tool .icon {
+    margin: 0.5em;
+}
diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
@@ -98,7 +98,8 @@ body {
 }
 
 .filemanager-container,
-.filepicker-filelist {
+.filepicker-filelist,
+.content-bank-container {
     @extend .border;
 }
 

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -6747,7 +6747,8 @@ button.bg-dark:focus {
   background-color: transparent !important; }
 
 .border, .filemanager-container,
-.filepicker-filelist {
+.filepicker-filelist,
+.content-bank-container {
   border: 1px solid #dee2e6 !important; }
 
 .border-top {
@@ -12555,6 +12556,60 @@ table.calendartable caption {
 .cal_courses_flt {
   color: #868e96; }
 
+/* Use a variable for the drawer background colors. */
+.content-bank-container {
+  min-height: 140px;
+  padding-bottom: 15px;
+  overflow: hidden; }
+
+.cb-navbar {
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #f2f2f2;
+  min-height: 40px;
+  padding: 10px; }
+
+.cb-iconview .cb-file {
+  float: left;
+  margin: 10px 10px 35px; }
+
+.cb-iconview .cb-thumbnail {
+  min-width: 110px;
+  min-height: 110px;
+  line-height: 110px;
+  border: 1px solid #fff; }
+  .cb-iconview .cb-thumbnail .icon {
+    margin: 0; }
+  .cb-iconview .cb-thumbnail img {
+    padding: 3px;
+    vertical-align: middle; }
+
+.cb-iconview .cb-thumbnail:hover {
+  background: #fff;
+  border: 1px solid #ddd; }
+
+.cb-iconview .cb-contentname-field {
+  height: 33px;
+  word-wrap: break-word;
+  overflow: hidden; }
+  .cb-iconview .cb-contentname-field .cb-contentname {
+    background: #fff;
+    padding: 5px 10px 12px;
+    min-width: 112px; }
+
+.cb-iconview .cb-file:focus .cb-contentname-field,
+.cb-iconview .cb-file:hover .cb-contentname-field {
+  overflow: visible;
+  z-index: 1000; }
+
+.cb-iconview .cb-file:focus .cb-contentname,
+.cb-iconview .cb-file:hover .cb-contentname {
+  overflow: inherit;
+  white-space: normal;
+  text-overflow: inherit; }
+
+.content-bank-toolbar .cb-tool .icon {
+  margin: 0.5em; }
+
 /* course.less */
 /* COURSE CONTENT */
 .section_add_menus {

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -12767,6 +12767,60 @@ table.calendartable caption {
 .cal_courses_flt {
   color: #868e96; }
 
+/* Use a variable for the drawer background colors. */
+.content-bank-container {
+  min-height: 140px;
+  padding-bottom: 15px;
+  overflow: hidden; }
+
+.cb-navbar {
+  border-bottom: 1px solid #e5e5e5;
+  background-color: #f2f2f2;
+  min-height: 40px;
+  padding: 10px; }
+
+.cb-iconview .cb-file {
+  float: left;
+  margin: 10px 10px 35px; }
+
+.cb-iconview .cb-thumbnail {
+  min-width: 110px;
+  min-height: 110px;
+  line-height: 110px;
+  border: 1px solid #fff; }
+  .cb-iconview .cb-thumbnail .icon {
+    margin: 0; }
+  .cb-iconview .cb-thumbnail img {
+    padding: 3px;
+    vertical-align: middle; }
+
+.cb-iconview .cb-thumbnail:hover {
+  background: #fff;
+  border: 1px solid #ddd; }
+
+.cb-iconview .cb-contentname-field {
+  height: 33px;
+  word-wrap: break-word;
+  overflow: hidden; }
+  .cb-iconview .cb-contentname-field .cb-contentname {
+    background: #fff;
+    padding: 5px 10px 12px;
+    min-width: 112px; }
+
+.cb-iconview .cb-file:focus .cb-contentname-field,
+.cb-iconview .cb-file:hover .cb-contentname-field {
+  overflow: visible;
+  z-index: 1000; }
+
+.cb-iconview .cb-file:focus .cb-contentname,
+.cb-iconview .cb-file:hover .cb-contentname {
+  overflow: inherit;
+  white-space: normal;
+  text-overflow: inherit; }
+
+.content-bank-toolbar .cb-tool .icon {
+  margin: 0.5em; }
+
 /* course.less */
 /* COURSE CONTENT */
 .section_add_menus {