This repository has been archived by the owner on May 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 24
Feature/create folder modal #90
Merged
Merged
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
37d2604
First draft: create a reusable modal component
dneukirchen 2edac32
Merge branch 'milestone1' into feature/create-folder-modal
dneukirchen b03e2b1
Merge branch 'milestone1' into feature/create-folder-modal
dneukirchen 4fa94d9
Add modal sm size
dneukirchen 2f6fc59
Create create-folder-modal
dneukirchen 003be30
Implement create folder function
dneukirchen 7f87259
Update adapter and api to return single resources
dneukirchen b33d801
Implement create folders
dneukirchen 60afb37
Changed Upload to New string
laoneo 9242523
Changed Upload to New string
laoneo File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
administrator/components/com_media/resources/components/modals/create-folder-modal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<template> | ||
<media-modal v-if="$store.state.showCreateFolderModal" :size="'sm'" @close="close()"> | ||
<h3 slot="header">Create a new folder</h3> | ||
<div slot="body"> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="folder">Folder</label> | ||
<div class="controls"> | ||
<input type="text" id="folder" placeholder="Folder" v-model="folder"> | ||
</div> | ||
</div> | ||
</form> | ||
</div> | ||
<div slot="footer"> | ||
<button class="btn btn-danger" @click="close()">Cancel</button> | ||
<button class="btn btn-success" @click="save()">Save</button> | ||
</div> | ||
</media-modal> | ||
</template> | ||
|
||
<script> | ||
import * as types from "./../../store/mutation-types"; | ||
export default { | ||
name: 'create-folder-modal', | ||
methods: { | ||
/* Close the modal instance */ | ||
close() { | ||
this.$store.commit(types.HIDE_CREATE_FOLDER_MODAL); | ||
}, | ||
/* Save the form and create the folder */ | ||
save() { | ||
this.$store.dispatch('createDirectory', { | ||
name: this.folder, | ||
parent: this.$store.state.selectedDirectory, | ||
}); | ||
this.folder = ''; | ||
} | ||
} | ||
} | ||
</script> |
96 changes: 96 additions & 0 deletions
96
administrator/components/com_media/resources/components/modals/modal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
<template> | ||
<div class="media-modal-backdrop" @click="close()"> | ||
<div class="modal" :class="modalClass" @click.stop> | ||
<div class="modal-header"> | ||
<button v-if="showCloseButton" type="button" class="close" @click="close()">×</button> | ||
<slot name="header"></slot> | ||
</div> | ||
<div class="modal-body"> | ||
<slot name="body"></slot> | ||
</div> | ||
<div class="modal-footer"> | ||
<slot name="footer"></slot> | ||
</div> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style> | ||
/** TODO DN extract styles **/ | ||
|
||
/** modal-sm styles **/ | ||
.modal.modal-sm { | ||
width: 450px; | ||
margin-left: -225px; | ||
} | ||
@media (max-width: 767px) { | ||
.modal.modal-sm { | ||
width: auto; | ||
margin: 0; | ||
} | ||
} | ||
.modal-body { | ||
width: auto; | ||
padding: 15px; | ||
overflow-y: auto; | ||
} | ||
.media-modal-backdrop { | ||
position: fixed; | ||
z-index: 1040; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
background-color: rgba(0, 0, 0, .8); | ||
display: table; | ||
transition: opacity .3s ease; | ||
} | ||
</style> | ||
|
||
<script> | ||
// TODO DN: transition and advanced styling | ||
// TODO DN: perhaps use a better modal than the b2 modal | ||
import * as types from "./../../store/mutation-types"; | ||
export default { | ||
name: 'media-modal', | ||
props: { | ||
/* Whether or not the close button in the header should be shown */ | ||
showClose: { | ||
type: Boolean, | ||
default: true, | ||
}, | ||
/* The size of the modal */ | ||
size: { | ||
type: String, | ||
} | ||
}, | ||
computed: { | ||
/* Get the modal css class */ | ||
modalClass() { | ||
return { | ||
'modal-sm': this.size === 'sm', | ||
} | ||
}, | ||
}, | ||
methods: { | ||
/* Close the modal instance */ | ||
close() { | ||
this.$emit('close'); | ||
}, | ||
/* Handle keydown events */ | ||
onKeyDown(event) { | ||
if (event.keyCode == 27) { | ||
this.close(); | ||
} | ||
} | ||
}, | ||
mounted() { | ||
// Listen to keydown events on the document | ||
document.addEventListener("keydown", this.onKeyDown); | ||
}, | ||
beforeDestroy() { | ||
// Remove the keydown event listener | ||
document.removeEventListener('keydown', this.onKeyDown); | ||
}, | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 8 additions & 1 deletion
9
administrator/components/com_media/resources/store/mutation-types.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,9 @@ | ||
export const SELECT_DIRECTORY = 'SELECT_DIRECTORY'; | ||
export const LOAD_CONTENTS_SUCCESS = 'LOAD_CONTENTS_SUCCESS'; | ||
|
||
// Api handlers | ||
export const LOAD_CONTENTS_SUCCESS = 'LOAD_CONTENTS_SUCCESS'; | ||
export const CREATE_DIRECTORY_SUCCESS = 'CREATE_DIRECTORY_SUCCESS'; | ||
|
||
// Create folder modal | ||
export const SHOW_CREATE_FOLDER_MODAL = 'SHOW_CREATE_FOLDER_MODAL'; | ||
export const HIDE_CREATE_FOLDER_MODAL = 'HIDE_CREATE_FOLDER_MODAL'; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No translation planed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#73
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://github.com/dgt41/bs4-custom-elements/blob/master/elements/alert/alert.js#L64-L76