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

Commit

Permalink
New react-based share dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdujeu
cdujeu committed Feb 18, 2016
1 parent fdc0fdc commit a3a7b1b
Show file tree
Hide file tree
Showing 7 changed files with 2,154 additions and 0 deletions.
34 changes: 34 additions & 0 deletions core/src/plugins/action.share/Gruntfile.js
View file
@@ -0,0 +1,34 @@
module.exports = function(grunt) {
grunt.initConfig({
babel: {
options: {},

dist: {
files: [
{
expand: true,
cwd: 'res/react/',
src: ['**/*.js'],
dest: 'res/build/',
ext: '.js'
}
]
}
},
watch: {
js: {
files: [
"res/react/**/*"
],
tasks: ['babel'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['babel']);

};
23 changes: 23 additions & 0 deletions core/src/plugins/action.share/manifest.xml
View file
Expand Up @@ -31,12 +31,35 @@
<client_settings>
<resources>
<i18n namespace="share_center" path="plugins/action.share/res/i18n"/>
<css file="plugins/action.share/res/react-share-form.css" autoload="true"/>
<js file="plugins/action.share/qrcode.js" className="QRCode" autoload="false"/>
<js file="plugins/action.share/class.ShareCenter.js" className="ShareCenter" autoload="false"/>
<js file="plugins/action.share/res/build/model/ShareModel.js" className="ReactModelShare"/>
<js file="plugins/action.share/res/build/ShareDialog.js" className="ShareDialog" depends="React,ReactModelShare,PydioForm"/>
</resources>
</client_settings>
<registry_contributions>
<actions>
<action name="share_react">
<gui text="292" title="292" src="share.png" iconClass="icon-share" hasAccessKey="false">
<context selection="true" dir="" recycle="hidden" actionBar="true" actionBarGroup="change" contextMenu="true" infoPanel="false"/>
<selectionContext dir="true" file="true" recycle="false" unique="false"/>
</gui>
<rightsContext noUser="true" userLogged="only" read="true" write="false" adminOnly=""/>
<processing>
<clientCallback prepareModal="true"><![CDATA[
if(!pydio.getController().shareDialogLoader) {
pydio.getController().shareDialogLoader = new AjxpReactDialogLoader('ShareDialog', 'MainPanel', {
selection:pydio.getUserSelection()
});
}
pydio.getController().shareDialogLoader.openDialog('react_share_form', true);
]]></clientCallback>
<clientForm id="react_share_form"><![CDATA[
<div id="react_share_form" box_padding="0" class="react-mui-context SF_material"></div>
]]></clientForm>
</processing>
</action>
<action name="share">
<gui text="292" title="292" src="share.png" iconClass="icon-share" hasAccessKey="false">
<context selection="true" dir="" recycle="hidden" actionBar="false" contextMenu="false" infoPanel="false"/>
Expand Down
17 changes: 17 additions & 0 deletions core/src/plugins/action.share/package.json
View file
@@ -0,0 +1,17 @@
{
"name": "action.share",
"version": "6.2.3",
"description": "",
"source_path":"react",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Abstrium SAS",
"license": "AGPL",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-babel": "~5.0.3",
"grunt-contrib-watch": "~0.6.1"
}
}
239 changes: 239 additions & 0 deletions core/src/plugins/action.share/res/react-share-form.css
View file
@@ -0,0 +1,239 @@
div.form-react_share_form div.dialogTitle {
display: none;
}
div#react_share_form {
font-size: 13px;
}
div#react_share_form * {
font-family: Roboto;
}
div#react_share_form [class^="icon-"],
div#react_share_form [class*="icon-"] {
font-family: FontAwesome;
}
div#react_share_form div.headerPanel {
background-color: #4aceb0 !important;
}
div#react_share_form .mui-tabs-container .mui-tab-item-container {
background-color: #4aceb0 !important;
}
div#react_share_form .mui-tabs-container .mui-tab-template {
min-height: 300px;
}
div#react_share_form .shared-users-rights-header {
color: #ADADAD;
padding-right: 50px;
text-align: right;
}
div#react_share_form .shared-users-rights-header span {
display: inline-block;
font-size: 10px;
margin: 0 6px;
text-transform: uppercase;
}
div#react_share_form .suggest-search.icon-search {
color: #C1C1C1;
font-size: 18px;
position: absolute;
right: 15px;
top: 2px;
}
div#react_share_form .save-as-team-container {
text-align: right;
margin-top: 6px;
padding-right: 15px;
}
div#react_share_form .save-as-team-container a {
color: #c1c1c1;
text-decoration: underline;
font-size: 14px;
cursor: pointer;
}
div#react_share_form div.mui-drop-down-menu.full-width {
width: 400px;
margin-left: -10px;
}
div#react_share_form div.mui-drop-down-menu.full-width .mui-menu-control .mui-menu-label {
white-space: nowrap;
width: 365px;
overflow: hidden;
text-overflow: ellipsis;
}
div#react_share_form .public-link-container {
padding: 3px 6px 15px;
background-color: #F1F1F1;
border-radius: 8px;
margin: 16px 0 6px;
}
div#react_share_form .public-link-container .public-link {
width: 350px;
font-size: 20px;
}
div#react_share_form .public-link-container .public-link input {
text-align: center;
color: #43987c;
}
div#react_share_form .public-link-container.edit-link > span {
font-size: 20px;
text-align: right;
display: inline-block;
width: 160px;
color: #43987c;
}
div#react_share_form .public-link-container.edit-link .mui-raised-button {
margin-left: 10px;
}
div#react_share_form .public-link-container.edit-link .mui-text-field {
font-size: 20px;
width: 100px;
}
div#react_share_form .custom-link-button.icon-edit-sign {
color: #ddd;
font-size: 20px;
cursor: pointer;
display: inline-block;
padding-left: 5px;
}
div#react_share_form .custom-link-button.icon-edit-sign:hover {
color: #47b092;
}
div#react_share_form .password-container,
div#react_share_form .expires {
margin-top: -10px;
}
div#react_share_form .password-container .mui-text-field,
div#react_share_form .expires .mui-text-field {
width: 96%;
}
div#react_share_form .label-desc-edit .mui-text-field {
width: 100%;
margin-top: -10px;
}
div#react_share_form h3 {
font-size: 22px;
}
div#react_share_form h4 {
padding-top: 10px;
font-weight: normal;
font-size: 17px;
}
div#react_share_form .ownership-form .mui-text-field {
margin-top: -20px;
width: 230px;
margin-right: 10px;
}
div#react_share_form div.user-badge {
border-bottom: 1px solid #e2e2e2;
clear: both;
font-size: 16px;
margin-left: 50px;
margin-right: 11px;
padding-top: 1px;
}
div#react_share_form div.user-badge:last-of-type {
border-bottom: 0;
}
div#react_share_form div.user-badge span.icon-ellipsis-vertical.mui-font-icon {
color: #6F6F6F;
font-size: 18px;
}
div#react_share_form div.user-badge span.avatar {
background-color: #4aceb0;
border-radius: 30px;
color: white;
display: inline-block;
font-size: 17px;
height: 32px;
margin: 5px 14px 7px -44px;
padding: 6px;
text-align: center;
width: 32px;
}
div#react_share_form div.user-badge.user-type-group span.avatar {
background-color: #47b092;
}
div#react_share_form div.user-badge.user-type-tmp_user span.avatar {
background-color: #438db3;
}
div#react_share_form div.user-badge img {
background-color: #4aceb0;
border-radius: 30px;
color: white;
display: inline-block;
font-size: 17px;
height: 32px;
margin: 5px 14px 7px -44px;
padding: 6px;
text-align: center;
width: 32px;
}
div#react_share_form div.user-badge div.user-badge-menu-box {
float: right;
font-size: 13px;
position: relative;
}
div#react_share_form div.user-badge div.user-badge-menu-box div.mui-menu.mui-visible {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.43);
position: absolute;
right: 0;
top: 0;
width: 200px;
z-index: 120;
}
div#react_share_form div.user-badge div.user-badge-menu-box div.mui-menu span.icon-check {
float: right;
font-size: 16px;
margin-top: 15px;
}
div#react_share_form div.user-badge span.user-badge-rights-container {
float: right;
padding: 11px;
}
div#react_share_form div.user-badge span.user-badge-rights-container input[name="write"] {
margin-left: 28px;
}
div.react-autosuggest {
padding-left: 4px;
}
div.react-autosuggest .react-autosuggest__suggestion--focused {
background-color: aliceblue;
}
div.react-autosuggest input.react-autosuggest__input {
width: 370px;
}
div.react-autosuggest .react-autosuggest__suggestions {
background-color: white;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.63);
display: block;
margin-top: 1px;
max-height: 300px;
overflow-y: auto;
position: absolute;
width: 370px;
z-index: 20;
}
div.react-autosuggest input#users-autosuggest {
font-size: 18px;
padding-bottom: 9px !important;
padding-left: 4px !important;
}
.dialogContent div.reset-pydio-forms input {
border: 0;
margin: 0;
padding: 0;
border-radius: 0;
height: inherit;
font-size: inherit;
background-color: transparent;
}
.dialogContent div.reset-pydio-forms input:disabled {
background-color: transparent !important;
}
.dialogContent div.reset-pydio-forms .mui-text-field.mui-has-floating-labels .mui-text-field-input {
padding-top: 24px !important;
}
.dialogContent div.reset-pydio-forms input[type="checkbox"],
.dialogContent div.reset-pydio-forms .dialogContent input[type="radio"] {
height: 100%;
width: 100%;
}

0 comments on commit a3a7b1b

Please sign in to comment.