Skip to content
This repository has been archived by the owner on May 26, 2020. It is now read-only.

Feature/joomla acceptance #101

Merged
merged 5 commits into from
Feb 26, 2017
Merged

Feature/joomla acceptance #101

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
77354dc
Bring back the ugly joomla toolbar
dneukirchen Feb 26, 2017
2649663
Remove layout related code
dneukirchen Feb 26, 2017
f77599f
Connect Vue with the joomla toolbar
dneukirchen Feb 26, 2017
226d9ab
Remove unused lang
dneukirchen Feb 26, 2017
76c1593
Remove duplicate if statement
dneukirchen Feb 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions administrator/components/com_media/layouts/toolbar/create-folder.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php
/**
* @package Joomla.Administrator
* @subpackage com_media
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$title = JText::_('COM_MEDIA_CREATE_NEW_FOLDER');
?>
<button class="btn btn-sm btn-outline-info" onclick="MediaManager.Event.$emit('onClickCreateFolder');">
<span class="icon- fa fa-folder" title="<?php echo $title; ?>"></span> <?php echo $title; ?>
Copy link
Contributor

@yvesh yvesh Feb 26, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove the icon- and use why span and not i (like common in bs?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<i> isn鈥檛 the icon tag, it鈥檚 the italic tag, and it doesn鈥檛 make much difference which you pick.
Dont know who the **** came up with the idea to use <i>s, but it is semantically not correct.

<span> is more semantically correct, because it has no semantics.

And regarding icon- class: it is currently needed by the admin theme to render buttons in that style.

</button>
14 changes: 14 additions & 0 deletions administrator/components/com_media/layouts/toolbar/delete.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php
/**
* @package Joomla.Administrator
* @subpackage com_media
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$title = JText::_('JTOOLBAR_DELETE');
?>
<button class="btn btn-sm btn-outline-danger">
<span class="icon- fa fa-trash-o" title="<?php echo $title; ?>"></span> <?php echo $title; ?>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same

</button>
14 changes: 14 additions & 0 deletions administrator/components/com_media/layouts/toolbar/upload.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?php
/**
* @package Joomla.Administrator
* @subpackage com_media
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$title = JText::_('JTOOLBAR_UPLOAD');
?>
<button class="btn btn-sm btn-success">
<span class="icon- fa fa-upload" title="<?php echo $title; ?>"></span> <?php echo $title; ?>
</button>
48 changes: 19 additions & 29 deletions administrator/components/com_media/resources/scripts/components/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,35 @@
<template>
<div class="media-container" :style="{minHeight: fullHeight}">
<media-toolbar></media-toolbar>
<div class="media-main">
<div class="media-sidebar">
<media-tree :root="'/'"></media-tree>
<div class="media-container row">
<div class="media-sidebar col-md-2 hidden-sm-down">
<media-tree :root="'/'"></media-tree>
</div>
<div class="media-main col-md-10">
<div class="card">
<div class="card-header">
<media-toolbar></media-toolbar>
</div>
<div class="card-block">
<media-browser></media-browser>
</div>
</div>
<media-browser></media-browser>
</div>
<create-folder-modal></create-folder-modal>
</div>
</template>

<script>
import * as types from "./../store/mutation-types";
export default {
name: 'media-app',
methods: {
/* Set the full height on the app container */
setFullHeight() {
this.fullHeight = window.innerHeight + this.$el.offsetTop + 'px';
},
},
data() {
return {
// The full height of the app in px
fullHeight: '',
};
created() {
// Listen to the on click create folder event
MediaManager.Event.$on('onClickCreateFolder', (e) => {
this.$store.commit(types.SHOW_CREATE_FOLDER_MODAL);
});
},
mounted() {
// Initial load the data
this.$store.dispatch('getContents', this.$store.state.selectedDirectory);

// Set the full height and add event listener when dom is updated
this.$nextTick(() => {
this.setFullHeight();
// Add the global resize event listener
window.addEventListener('resize', this.setFullHeight)
});
},
beforeDestroy() {
// Remove the global resize event listener
window.removeEventListener('resize', this.setFullHeight)
},
}
}
</script>
9 changes: 4 additions & 5 deletions administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<template>
<ul class="media-breadcrumb">
<li>
<ol class="media-breadcrumb breadcrumb">
<li class="breadcrumb-item">
<a @click.stop.prevent="goTo('/')">Home</a>
</li>
<li v-for="crumb in crumbs">
<span class="divider">/</span>
<li class="breadcrumb-item" v-for="crumb in crumbs">
<a @click.stop.prevent="goTo(crumb.path)">{{ crumb.name }}</a>
</li>
</ul>
</ol>
</template>

<script>
Expand Down
44 changes: 0 additions & 44 deletions administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,11 @@
<template>
<div class="media-toolbar">
<div class="media-toolbar-create">
<div class="btn-group">
<button class="btn btn-sm btn-success">
<span class="icon-apply icon-white"></span> {{ translate('COM_MEDIA_NEW') }}
</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a href="#" @click.prevent="showCreateFolderModal()">{{ translate('COM_MEDIA_CREATE_FOLDER') }}</a>
</li>
<li class="divider"></li>
<li class="dropdown-item"><a href="#">{{ translate('COM_MEDIA_UPLOAD_FILE') }}</a></li>
<li class="dropdown-item"><a href="#">{{ translate('COM_MEDIA_UPLOAD_FOLDER') }}</a></li>
</ul>
</div>
</div>
<media-breadcrumb></media-breadcrumb>
<ul class="media-tools">
<li>
<a href="#"><span class="fa fa-list"></span></a>
</li>
<li>
<a href="#"><span class="fa fa-info-circle"></span></a>
</li>
<li>
<a href="#"><span class="fa fa-question-circle"></span></a>
</li>
<li>
<a href="#"><span class="fa fa-cog"></span></a>
</li>
</ul>
</div>
</template>

<script>
import * as types from "./../../store/mutation-types";
export default {
name: 'media-toolbar',
methods: {
/* Close the modal instance */
showCreateFolderModal() {
this.$store.commit(types.SHOW_CREATE_FOLDER_MODAL);
},
/* Handle keydown events */
onKeyDown(event) {
if (this.show && event.keyCode == 27) {
this.close();
}
}
},
}
</script>
4 changes: 4 additions & 0 deletions administrator/components/com_media/resources/scripts/mediamanager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ Vue.component('media-browser-item', BrowserItem);
Vue.component('media-modal', MediaModal);
Vue.component('create-folder-modal', CreateFolderModal);

// Toolbar components
window.MediaManager = window.MediaManager || {};
window.MediaManager.Event = new Vue();

// Create the root Vue instance
document.addEventListener("DOMContentLoaded",
(e) => new Vue({
Expand Down
118 changes: 12 additions & 106 deletions administrator/components/com_media/resources/styles/mediamanager.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,114 +3,27 @@ $sidebar-width: 16.666666%;

/* General layout */
.media-container {
height: 100%;
flex-direction: column;
margin-top: -57px;
margin-left: -15px;
margin-right: -15px;
}

.media-main {
min-height: 100%;
background: rgba(0,0,0,.03);
flex-grow: 1;
display: flex;
}

.media-sidebar {
width: $sidebar-width;
background: #f2f2f2;
border-right: 1px solid #e1e1e1;
padding-bottom: 50px;
}

/* Media toolbar */
/* Media breadcrumb */
.media-toolbar {
background-color: #f2f2f2;
border-bottom: 1px solid transparent;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 15px;
position: relative;
display: flex;
}

.media-toolbar-create {
width: $sidebar-width;

.btn-success:not(.dropdown-toggle) {
width: 140px;
color: #fefefe;
background-color: #48b848;
border-color: rgba(0,0,0,.2);
}
.btn-success.dropdown-toggle {
background: #368c36;
border-color: #368c36;
.breadcrumb {
margin: 0;
padding: 0 7.5px;
background: transparent;
& > li > a {
cursor: pointer;
}
& > li:last-child a {
font-weight: bold;
}
}
.btn-sm {
padding: 0 10px;
line-height: 1.8rem;
}
}

/* Media breadcrumb */
.media-breadcrumb {
margin: 0;
padding: 0 7.5px;
list-style: none;
flex-grow: 1;
}

.media-breadcrumb > li {
display: inline-block;
font-size: 16px;
line-height: 27px;
}

.media-breadcrumb > li > a {
cursor: pointer;
color: #555;
text-decoration: none;
}

.media-breadcrumb > li > .divider {
display: inline-block;
padding: 0 3px;
color: #7d7d7d;
}

.media-breadcrumb > li:last-child a {
font-weight: bold;
}

/* Media tools */
.media-tools {
display: flex;
justify-content: flex-end;
margin: 0;
padding: 0;
margin-left: 15px;
list-style: none;
}

.media-tools a {
display: inline-block;
padding: 0 10px;
color: #7d7d7d;
text-decoration: none;
font-size: 20px;
}

.media-tools a:hover {
color: #333;
}

.media-tools-divider {
border-right: 1px solid #e5e5e5;
display: inline-block;
height: 53px;
margin: -10.5px 8px;
vertical-align: middle;
}

/* Media Tree */
Expand Down Expand Up @@ -179,19 +92,14 @@ ul.media-tree ul {
}

/* Media browser */
.media-browser {
width: 83.5%;
}

.media-browser-items {
padding: 15px;
display: flex;
flex-wrap: wrap;
}

.media-browser-item {
position: relative;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 15px;
width: calc(25% - 15px);
-moz-user-select: none;
Expand Down Expand Up @@ -267,5 +175,3 @@ ul.media-tree ul {
transform: translateY(-10px);
opacity: 0;
}
body {
background: red; }
4 changes: 0 additions & 4 deletions administrator/components/com_media/views/media/tmpl/default_texts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@
*/
defined('_JEXEC') or die;

JText::script('COM_MEDIA_CREATE_FOLDER', true);
JText::script('COM_MEDIA_CREATE_NEW_FOLDER', true);
JText::script('COM_MEDIA_FOLDER', true);
JText::script('COM_MEDIA_NEW', true);
JText::script('COM_MEDIA_UPLOAD_FILE', true);
JText::script('COM_MEDIA_UPLOAD_FOLDER', true);
JText::script('JCANCEL', true);
JText::script('JAPPLY', true);