You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@marmotta.apache.org by tk...@apache.org on 2013/06/03 09:12:32 UTC

git commit: apply patch from Bettina Steger

Updated Branches:
  refs/heads/MARMOTTA-228 95772d487 -> 8e2aafb50


apply patch from Bettina Steger


Project: http://git-wip-us.apache.org/repos/asf/incubator-marmotta/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-marmotta/commit/8e2aafb5
Tree: http://git-wip-us.apache.org/repos/asf/incubator-marmotta/tree/8e2aafb5
Diff: http://git-wip-us.apache.org/repos/asf/incubator-marmotta/diff/8e2aafb5

Branch: refs/heads/MARMOTTA-228
Commit: 8e2aafb508b927f0422b0e6395768b2ee1bcce51
Parents: 95772d4
Author: tkurz <tk...@apache.org>
Authored: Mon Jun 3 09:12:13 2013 +0200
Committer: tkurz <tk...@apache.org>
Committed: Mon Jun 3 09:12:13 2013 +0200

----------------------------------------------------------------------
 .../src/main/resources/web/admin/about.html        |   28 +-
 .../src/main/resources/web/admin/import.html       |  116 +++-
 .../main/resources/web/admin/js/widgets/import.js  |  493 ++++++++-------
 .../src/main/resources/web/public/style/screen.css |   42 ++-
 .../main/resources/web/admin/snorql/snorql.html    |    6 +-
 .../src/main/resources/web/admin/snorql/snorql.js  |    2 +-
 6 files changed, 418 insertions(+), 269 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-marmotta/blob/8e2aafb5/platform/marmotta-core/src/main/resources/web/admin/about.html
----------------------------------------------------------------------
diff --git a/platform/marmotta-core/src/main/resources/web/admin/about.html b/platform/marmotta-core/src/main/resources/web/admin/about.html
index 3502960..0c767f5 100644
--- a/platform/marmotta-core/src/main/resources/web/admin/about.html
+++ b/platform/marmotta-core/src/main/resources/web/admin/about.html
@@ -25,22 +25,21 @@
 </head>
 <body>
 <!--###BEGIN_CONTENT###-->
-<div class="span12">
-    <div class="hero-unit">
 
-<h1>Apache Marmotta</h1>
-<h2>
-    An Open Platform for Linked Data
-</h2>
-        <p>The goal of Apache Marmotta is to provide an open implementation of a Linked Data Platform that can be used, extended, and deployed easily by organizations who want to publish Linked Data or build custom applications on Linked Data.</p>
-        <p>You can find more information about the project and the supported features on <a href="http://marmotta.incubator.apache.org/">http://marmotta.incubator.apache.org</a>.</p>
-        </div>
-    </div>
-<div class="span12">
-    <div class="unit">
+<div class="hero-unit">
+
+  <h1>Apache Marmotta</h1>
+  <h2>An Open Platform for Linked Data</h2>
+
+  <p>The goal of Apache Marmotta is to provide an open implementation of a Linked Data Platform that can be used, extended, and deployed easily by organizations who want to publish Linked Data or build custom applications on Linked Data.</p>
+  <p>You can find more information about the project and the supported features on <a href="http://marmotta.incubator.apache.org/">http://marmotta.incubator.apache.org</a>.</p>
+
+</div>
+
 <h2>
-    Links to common features
+  Links to common features
 </h2>
+
 <p>You can find all installed features on the module list on the right side. To get a quick access to common functionalities, we listed some links:</p>
 <ul>
     <li><a href="import.html">Import your data:</a> RDF and non-RDF formats are supported.</li>
@@ -63,8 +62,7 @@
     <dt>User</dt> <dd>provides the user management features.</dd>
     <dt>Versioning</dt> <dd>offers versioning services on top of the triple store.</dd>
 </dl>
-        </div>
-    </div>
+
 <!--###END_CONTENT###-->
 </body>
 </html>

http://git-wip-us.apache.org/repos/asf/incubator-marmotta/blob/8e2aafb5/platform/marmotta-core/src/main/resources/web/admin/import.html
----------------------------------------------------------------------
diff --git a/platform/marmotta-core/src/main/resources/web/admin/import.html b/platform/marmotta-core/src/main/resources/web/admin/import.html
index 290c31e..7f19066 100644
--- a/platform/marmotta-core/src/main/resources/web/admin/import.html
+++ b/platform/marmotta-core/src/main/resources/web/admin/import.html
@@ -26,28 +26,112 @@
     <script type="text/javascript" src="js/widgets/import.js"></script>
     <script type="text/javascript">
         $(document).ready(function(){
-            var imp = new Importer("importer_div",_SERVER_URL);
+          var imp = new Importer(_SERVER_URL);
         })
     </script>
-    <style>
-        .import_type {
-            padding: 2px;
-            cursor: pointer;
-            font-weight: bold;
-        }
-        .importer_table {
-            background-color: #eeeeee;
-            padding: 10px;
-            border: 1px solid gray;
-            -webkit-border-radius: 3px;
-            border-radius: 3px;
-        }
-    </style>
 <!--###END_HEAD###-->
 </head>
 <body>
 <!--###BEGIN_CONTENT###-->
-<div id="importer_div"></div>
+    <div class="page-header">
+      <h1>
+        Import
+        <small>from file or URL</small>
+      </h1>
+    </div>
+
+<div class="row-fluid">
+  <div class="span5">
+    <input id="fileinput" type="file" style="display:none" />
+    <div class="input-append">
+      <input class="input-large" id="fileupload" type="text" placeholder="choose file" />
+      <button onclick="$('input[type=file]').click();" class="btn" type="button">Browse</button>
+    </div>
+
+    <p>or</p>
+
+    <div id="urlimport" class="control-group">
+      <div class="controls">
+        <div class="input-append">
+          <input class="input-large" id="url" type="text" placeholder="URL" />
+          <button class="btn" type="button">OK</button>
+        </div>
+        <span data-invalid="please fill in a valid URL" class="help-inline"></span>
+      </div>
+    </div>
+  </div>
+
+  <div id="droparea" class="span5">
+    <p>or drop files here</p>
+  </div>
+</div>
+
+<hr/>
+
+<div class="loading pull-right"></div>
+
+<div id="notice" class="alert hidden"
+  data-success="Import was successful! <br/><a href='javascript:location.reload()'>import another file</a>"
+  data-externalsuccess="<strong>Upload is running!</strong><br/>You can control the running import tasks <a href='tasks.html' title='tasks'>here</a>">
+</div>
+
+
+<div id="step2" class="row-fluid">
+  <form class="form-horizontal import">
+    <div id="relations" class="control-group hidden">
+      <label class="control-label" for="relation">Relation</label>
+      <div class="controls">
+        <label class="radio inline">
+          <input type="radio" name="relation" id="relationmeta" value="meta" checked />
+          meta
+        </label>
+        <label class="radio inline">
+          <input type="radio" name="relation" id="relationcontent" value="content" />
+          content
+        </label>
+        <div class="help-inline">
+          <input id="contenturl" type="text" placeholder="URL" />
+          <span data-error="please fill in a valid URL or leave it empty" class="help-inline"></span>
+        </div>
+      </div>
+    </div>
+    <div class="control-group">
+      <label class="control-label" for="mime">MIME-Type</label>
+      <div class="controls">
+        <select name="mime"></select>
+        <input id="filemime" type="text" class="hidden" />
+      </div>
+    </div>
+    <div id="context" class="control-group">
+      <label class="control-label" for="context">Context</label>
+      <div class="controls">
+        <select name="context">
+          <option selected>default</option>
+          <option>use existing</option>
+          <option>define new</option>
+        </select>
+
+        <div id="existingcontexts" class="hidden help-inline">
+          Select context URL
+          <select></select>
+          <span data-nocontexts="no existing context, default is used." class="warning help-inline"></span>
+        </div>
+
+        <div id="contexturl" class="hidden help-inline">
+          Define context
+          <input type="text" placeholder="URL" />
+          <span data-invalid="please fill in a valid URL" class="help-inline"></span>
+        </div>
+      </div>
+    </div>
+    <div class="control-group">
+      <div class="controls">
+        <input type="submit" class="btn" value="Import" />
+      </div>
+    </div>
+  </form>
+</div>
+
 <!--###END_CONTENT###-->
 </body>
 </html>

http://git-wip-us.apache.org/repos/asf/incubator-marmotta/blob/8e2aafb5/platform/marmotta-core/src/main/resources/web/admin/js/widgets/import.js
----------------------------------------------------------------------
diff --git a/platform/marmotta-core/src/main/resources/web/admin/js/widgets/import.js b/platform/marmotta-core/src/main/resources/web/admin/js/widgets/import.js
index 2eb7b08..4fdb2f9 100644
--- a/platform/marmotta-core/src/main/resources/web/admin/js/widgets/import.js
+++ b/platform/marmotta-core/src/main/resources/web/admin/js/widgets/import.js
@@ -15,278 +15,305 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function Importer(id,host) {
+function Importer(host) {
 
     var LMF = new MarmottaClient(host);
-    //TODO
-    var loader =$("<img style='position: relative;top: 4px;margin-left: 10px;' src='../public/img/loader/ajax-loader_small.gif'>");
-
-    var container = $("#"+id);
-
-    var style = $("<style type='text/css'>.td_title{font-weight:bold;width:100px}</style>")
-
-    var step1 = $("<div></div>");
-    var step2 = $("<div></div>");
-    var step3 = $("<div></div>");
-    var step4 = $("<div></div>");
-    var button = $("<div style='margin-top:20px'></div>");
+    var loader = $(".loading");
+    var notice = $("#notice");
+    var step2 = $("#step2");
+    var droparea = $('#droparea');
 
     var metadata_types;
     var contexts;
     var example_context;
 
     function init() {
+        loader.hide();
+        step2.hide();
 
-        $.getJSON("../../import/types",function(data) {
-            metadata_types = data;
+        /**
+         * Inits Import from file
+         * shows right path in input field
+         */
+        $('input[type=file]').change(function() {
+          var path = $(this).val().split('\\');
+          path = path[path.length-1];
+          $('#fileupload').val(path);
+
+          predefine($(this).get(0).files[0], "file");
         });
 
-        $.getJSON("../../context/list",function(data) {
-            loader.hide();
-            contexts = data;
+        /**
+         * Inits Import from file per Drag and Drop
+         */
+        droparea.on('dragover', function() {
+          droparea.addClass('hover');
+          return false;
         });
-        
-        $.getJSON("../../config/data/kiwi.host",function(data) {
-            example_context = data["kiwi.host"] + "context/name";
-        });        
-        
-        container.empty();
-        container.append(style);
-        container.append($("<h1></h1>").append("<span>Import</span>").append(loader));
-        container.append(step1);
-        container.append(step2);
-        container.append(step3);
-        container.append(step4);
-        container.append(button);
-
-        step1.append("<h2>1. Select input source-type:</h2>");
-        step1.append($("<a class='import_type'></a>").text("File").click(function(){
-          button.empty();
-          step4.empty();
-          step3.empty();
-          step2.empty();
-          step2.append("<h2>2. Select file:</h2>");
-          var input = $("<input type='file'>");
-          step2.append(input);
-          input.change(function(){
-              step3.empty();
-              if(input.val()==undefined || input.val()=="") alert("Select a file first!");
-              else predefine(input,"file");
-          });
-       }));
-       step1.append("<span>|</span>");
-       step1.append($("<a class='import_type' ></a>").text("URL").click(function(){
-          button.empty();
-          step4.empty()
-          step3.empty();
-          step2.empty();
-          step2.append("<h2>2. Define url:</h2>");
-          var input = $("<input type='text' style='width: 300px'>");
-          step2.append(input);
-          step2.append($("<button></button>").text("ok").click(function(){
-              step3.empty();
-              if(input.val()==undefined || input.val()=="") alert("Define an URL first!");
-              else if(!isUrl(input.val())) alert("URL is not valid!")
-              else predefine(input,"url");
-          }));
-       }));
-    }
+        droparea.on('dragleave', function() {
+          droparea.removeClass('hover');
+          return false;
+        });
+        droparea.on('drop', function(e) {
+          //prevent browser from open the file when drop off
+          e.stopPropagation();
+          e.preventDefault();
+          droparea.removeClass('hover');
 
-    function predefine(input_field,source_type) {
-        var source_relation;
-        var source_filetype;
-        var source_filetype_input;
-        var context;
-        var context_input;
-        var context_type="default";
+          //retrieve uploaded files data
+          var files = e.originalEvent.dataTransfer.files;
+          // processFiles(files);
+          var file = files[0];
+          $('#fileupload').val(file.name);
+          predefine(file, "file");
 
-        var url = $("<input type='text' style='width: 300px'>");
+          return false;
+        });
 
-        function waitForMetadataTypes() {
-            step3.append("<h2>3. Import (..loading)</h2>");
-            if(metadata_types==undefined) setTimeout(waitForMetadataTypes,1000);
-            else writeTable()
-        }
-        waitForMetadataTypes();
-
-        function writeTable() {
-            step4.empty();
-            button.empty();
-            step3.empty().append("<h2>3. Import</h2>");
-            checkFileType();
-            var table = $("<table></table>").addClass("importer_table");
-
-            var td_mime = $("<td></td>");
-
-            var st = source_relation!="content" ? "style='display:none;'" :  "style='display:inline;'";
-            var url_div = $("<div "+st+"></div>").append("<span> url:</span>").append(url);
-
-            table.append($("<tr></tr>").append("<td class='td_title'>Source</td>").append("<td>"+source_type+"</td>"));
-            table.append($("<tr></tr>").append("<td class='td_title'>Relation</td>").append($("<td></td>").append(
-                $("<select></select>").append("<option>content</option><option>meta</option>").val(source_relation).change(function(){
-                    source_relation = $(this).val();
-                    createMimeTD(td_mime);
-                    if(source_relation=="content") url_div.css("display","inline");
-                    else url_div.css("display","none");
-                })
-            ).append(url_div)));
-            createMimeTD(td_mime);
-            table.append($("<tr></tr>").append("<td class='td_title'>Mime</td>").append(td_mime));
-
-            step3.append(table);
-
-            table.append($("<tr></tr>").append("<td class='td_title'>Context</td>").append($("<td></td>").append(
-                $("<select></select>").append("<option>default</option><option>use existing</option><option>define new</option>").change(function(){
-                    context_type = $(this).val();
-                    createContexts();
-                })
-            )));
-
-            var b= $("<button  style='font-weight:bold'></button>").text("Import!").click(function(){
-                context = context_type=="default"?undefined:context_input.val();
-                context = context==null?context=null:context;
-                var _url=undefined;
-                if(context!=null && !isUrl(context)) {
-                    alert("context must be an url!"); return;
-                }
-                if(source_relation=="content") {
-                    if(url.val() != "" && !isUrl(url.val())) alert("content url must be empty or valid!");
-                    else if(url.val()!="") _url=url.val();
-                }
-                if(source_relation=="content") {
-                    resource(source_type,input_field,source_relation,source_filetype_input.val(),context,_url);
-                } else {
-                    if(source_type=="file") {
-                        upload(input_field,source_filetype_input.val(),context);
-                    } else {
-                        external(input_field,source_filetype_input.val(),context);
-                    }
-                }
-            });
-            button.append(b);
+        /**
+         * Inits Import from URL
+         * with validations: empty or invalid
+         */
+        $('#urlimport button').click(function() {
+          var group = $('#urlimport');
+          var input = $('#urlimport input');
+          var error = $('#urlimport .help-inline');
+          var value = input.val();
+          group.removeClass('error');
+          if(value === undefined || value === '' || !isUrl(value)) {
+            group.addClass('error');
+            error.text(error.data('invalid'));
+            return;
+          }
+
+          predefine(value, "url");
+        });
+
+        $.getJSON("../../import/types", function(data) {
+          metadata_types = data;
+        });
+
+        $.getJSON("../../context/list", function(data) {
+          contexts = data;
+        });
 
+        $.getJSON("../../config/data/kiwi.host", function(data) {
+          example_context = data["kiwi.host"] + "context/name";
+        });
+
+    }
+
+    function predefine(file_or_url, source_type) {
+      step2.show();
+      droparea.addClass('upload'); // makes it smaller
+      var source_relation;
+      var source_filetype;
+      var source_filetype_input = $('#step2 select[name="mime"]');
+      var contenturl = $('#step2 #contenturl');
+      var context;
+      var context_input = $('#step2 select[name="context"]');
+      var context_type = context_input.val();
+
+      function waitForMetadataTypes() {
+        if (metadata_types === undefined) {
+          loader.show();
+          setTimeout(waitForMetadataTypes, 1000);
+        } else {
+          loader.hide();
+          writeTable();
         }
+      }
+      waitForMetadataTypes();
 
-        function createMimeTD(td) {
-            if(source_relation=="meta") {
-                source_filetype_input = $("<select></select>");
-                for(var i in metadata_types) {
-                    source_filetype_input.append("<option>"+metadata_types[i]+"</option>");
-                }
-            } else {
-                source_filetype_input = $("<input type='text' style='width:300px'>");
-            }
-            td.empty().append(source_filetype_input);
-            if(source_filetype)source_filetype_input.val(source_filetype);
+      function writeTable() {
+        checkFileType();
+
+        // only show 'meta or content' if
+        if(source_relation === 'content') {
+          $('#step2 #relations').removeClass('hidden');
+          $('#step2 #relation'+source_relation).attr('checked', true);
         }
+        $('#step2 #relations input[type="radio"]').change(function () {
+          if ($(this).attr('checked')) {
+            source_relation = $(this).val();
+            createMimeTD();
+            (source_relation === 'content') ? contenturl.show() : contenturl.hide();
+            return;
+          }
+        });
+
+        createMimeTD();
+
+        context_input.change(function() {
+          context_type = $(this).val();
+          createContexts();
+        });
+
+        /**
+         * Starts import
+         */
+        $('form.import').submit(function(e) {
+          e.preventDefault();
+          context = context_type === 'default' ? undefined : context_input.val();
+          var _url = undefined;
+
+          if(context_type === 'define new' && (context === '' || !isUrl(context))) {
+            var error = $('#step2 #contexturl span.help-inline');
+            error.text(error.data('invalid'));
+            return;
+          }
 
-        function createContexts() {
-            step4.empty();
-            context=undefined;
-            if(context_type=="use existing") {
-                context_input = $("<select></select>");
-                if(contexts.length==0) {
-                    step4.append("<h2>4. Select context uri:</h2>").append("no existing context, default is used.");
-                }  else {
-                    for(var i in contexts) {
-                        context_input.append("<option>"+contexts[i]+"</option>")
-                    }
-                    step4.append("<h2>4. Select context url:</h2>").append(context_input);
-                }
-            } else if(context_type=="define new"){
-                context_input = $("<input size='60' value='" + example_context + "' />");
-                step4.append("<h2>4. Defined context url:</h2>").append(context_input);
+          if(source_relation === 'content') {
+            var value = contenturl.val();
+            // can be empty or has to be url
+            if(value !== '' && !isUrl(value)) {
+              var error = $('#step2 #relations span.help-inline');
+              error.text(error.data('error'));
+            } else if(value !== '') {
+              _url = value;
             }
+
+            resource(source_type, file_or_url, source_relation, source_filetype_input.val(), context, _url);
+
+          } else {
+              if(source_type === 'file') {
+                upload(file_or_url, source_filetype_input.val(), context);
+              } else {
+                external(file_or_url, source_filetype_input.val(), context);
+              }
+          }
+          return false;
+        });
+
+      }
+
+      function createMimeTD() {
+        if(source_relation === 'meta') {
+          for(var i in metadata_types) {
+            source_filetype_input.append("<option>"+metadata_types[i]+"</option>");
+          }
+        } else {
+          var changed_input = $('#step2 #filemime');
+          source_filetype_input.replaceWith(changed_input);
+          source_filetype_input = changed_input;
+          source_filetype_input.removeClass('hidden');
         }
+        if(source_filetype) {
+          source_filetype_input.val(source_filetype);
+        }
+      }
 
-        function checkFileType() {
-            function checkRDF() {
-                var inp = input_field.val();
-                var mimeType = null;
-                $.ajax({
-                    url:   "../../import/types",
-                    data:  { 'filename': inp },
-                    async: false,
-                    dataType: 'json',
-                    success: function(data) {
-                        if(data.length > 0) {
-                            mimeType = data[0];
-                        }
-                    }
-                });
-                return mimeType;
-            }
-            function checkFile() {
-                var inp = input_field.val();
-                if(/.gif$/.test(inp)) return "image/gif";
-                if(/.jpg$/.test(inp)) return "image/jpg";
-                if(/.png$/.test(inp)) return "image/png";
-                if(/.ogv$/.test(inp)) return "video/ogg";
-                if(/.mp4$/.test(inp)) return "video/mp4";
-                if(/.html$/.test(inp)) return "text/html";
-                if(/.txt$/.test(inp)) return "text/plain";
-                if(/.pdf$/.test(inp)) return "application/x-pdf";
-                else return null;
-            }
-            var x = checkRDF();
-            if(x) {
-                source_relation="meta";
-                source_filetype=x;
-            } else {
-                x = checkFile();
-                source_relation="content";
-                source_filetype=x;
+      function createContexts() {
+        context = undefined;
+        if(context_type === 'use existing') {
+          $('#step2 #contexturl').addClass('hidden');
+          $('#step2 #existingcontexts').removeClass('hidden');
+          context_input = $("#step2 #existingcontexts select");
+          if(contexts.length === 0) {
+            var error = $('#step2 #existingcontexts span.help-inline');
+            error.text(error.data('nocontexts'));
+          }  else {
+            for(var i in contexts) {
+              context_input.append("<option>"+contexts[i]+"</option>")
             }
+          }
+        } else if(context_type === 'define new') {
+          $('#step2 #existingcontexts').addClass('hidden');
+          $('#step2 #contexturl').removeClass('hidden');
+          context_input = $('#step2 #contexturl input');
+          context_input.val(example_context);
         }
+      }
+
+      function checkFileType() {
+        var name = file_or_url.name === undefined ? file_or_url : file_or_url.name;
+          function checkRDF() {
+              var mimeType = null;
+              $.ajax({
+                  url:   "../../import/types",
+                  data:  { 'filename': name },
+                  async: false,
+                  dataType: 'json',
+                  success: function(data) {
+                      if(data.length > 0) {
+                          mimeType = data[0];
+                      }
+                  }
+              });
+              return mimeType;
+          }
+          function checkFile() {
+              if(/.gif$/.test(name)) return "image/gif";
+              if(/.jpg$/.test(name)) return "image/jpg";
+              if(/.png$/.test(name)) return "image/png";
+              if(/.ogv$/.test(name)) return "video/ogg";
+              if(/.mp4$/.test(name)) return "video/mp4";
+              if(/.html$/.test(name)) return "text/html";
+              if(/.txt$/.test(name)) return "text/plain";
+              if(/.pdf$/.test(name)) return "application/x-pdf";
+              else return null;
+          }
+          var x = checkRDF();
+          if(x) {
+              source_relation = 'meta';
+              source_filetype = x;
+          } else {
+              x = checkFile();
+              source_relation = 'content';
+              source_filetype = x;
+          }
+      }
     }
 
     function isUrl(s) {
-	    var regexp = /(file|ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
-	    return regexp.test(s);
+      var regexp = /(file|ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
+      return regexp.test(s);
     }
 
-    function upload(source_filetype_input,source_filetype,context) {
+    function upload(source_file, source_filetype, context) {
        loader.show();
-       LMF.importClient.upload(source_filetype_input.get(0).files[0],source_filetype,context,function(){
-          alert("import was successful");
-           loader.hide();
-       },function(error){
-          alert(error.name+": "+error.message);
-           loader.hide();
+       LMF.importClient.upload(source_file, source_filetype, context, function() {
+        showNotice('success', notice.data('success'));
+       }, function(error) {
+        showNotice('error', error.name+": "+error.message);
       });
     }
 
-    function external(source_filetype_input,source_filetype,context) {
+    function external(source_url, source_filetype, context) {
       loader.show();
-      LMF.importClient.uploadFromUrl(source_filetype_input.val(),source_filetype,context,function(){
-          alert("upload is running; you can control the running import tasks on $LMF/core/admin/tasks.html");
-           loader.hide();
-      },function(error){
-          alert(error.name+": "+error.message);
-          loader.hide();
-      })
+      LMF.importClient.uploadFromUrl(source_url, source_filetype, context, function() {
+        showNotice('success', notice.data('externalsuccess'));
+      }, function(error) {
+        showNotice('error', error.name+": "+error.message);
+      });
     }
 
-    function resource(source_type,source_filetype_input,source_relation,source_filetype,context,content)  {
-        if(source_type!="file") {
-            alert("import content from url is not implemented yet");return;
+    function resource(source_type, source, source_relation, source_filetype, context, content)  {
+        if(source_type !== "file") {
+          showNotice('error', 'import content from url is not implemented yet');
+          return;
         }
-            if(!source_filetype) {
-                alert("mimetype must be defined");return;
-            }
-            loader.show();
-            LMF.resourceClient.createResource(content,function(data){
-                LMF.resourceClient.updateResourceContent(data,source_filetype_input.get(0).files[0],source_filetype,function(){
-                    alert("set content of "+data);
-                    loader.hide();
-                },function(error){
-                    loader.hide();
-                    alert(error.name+": "+error.message);
-                })
+        if(!source_filetype) {
+          showNotice('error', 'mimetype must be defined');
+          return;
+        }
+        loader.show();
+        LMF.resourceClient.createResource(content, function(data) {
+            LMF.resourceClient.updateResourceContent(data, source, source_filetype, function() {
+              showNotice('success', 'set content of '+data);
             },function(error){
-                alert(error.name+": "+error.message);
-                loader.hide();
-            });
+              showNotice('error', error.name+": "+error.message);
+            })
+        },function(error){
+          showNotice('error', error.name+": "+error.message);
+        });
+    }
+
+    function showNotice(type, text) {
+      notice.removeClass('hidden', 'alert-success', 'alert-error');
+      notice.addClass('alert-'+type);
+      notice.html(text);
+      loader.hide();
     }
 
     init();

http://git-wip-us.apache.org/repos/asf/incubator-marmotta/blob/8e2aafb5/platform/marmotta-core/src/main/resources/web/public/style/screen.css
----------------------------------------------------------------------
diff --git a/platform/marmotta-core/src/main/resources/web/public/style/screen.css b/platform/marmotta-core/src/main/resources/web/public/style/screen.css
index 3cb3d48..7e795c9 100644
--- a/platform/marmotta-core/src/main/resources/web/public/style/screen.css
+++ b/platform/marmotta-core/src/main/resources/web/public/style/screen.css
@@ -21,7 +21,7 @@ body {
 }
 
 body .menu-level-1.navbar .navbar-inner .brand {
-  background-image: url(../img/logo/marmotta-logo-neg.png);
+  background-image: url('../img/logo/marmotta-logo-neg.png');
   height: 40px;
   width: 120px;
   background-size: contain;
@@ -47,6 +47,18 @@ body .menu-level-3 {
   background-color: #fff;
   width: 100%;
   text-transform: lowercase;
+  z-index: 100;
+}
+
+.loading {
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  background-image: url('../img/loader/ajax-loader_small.gif');
+}
+
+.hidden {
+  display: none !important;
 }
 
 .square-corners {
@@ -86,3 +98,31 @@ body #content {
 legend+.control-group {
   -webkit-margin-top-collapse: collapse;
 }
+
+/**
+ * Droparea
+ */
+#droparea{
+  height: 220px;
+  padding-top: 90px;
+  border: 7px dashed #ccc;
+  border-radius: 10px;
+  vertical-align: baseline;
+  margin: 0 auto;
+  text-align: center;
+  text-shadow: 1px 1px 0 #fff;
+}
+#droparea p {
+  font-size: 18px;
+  font-weight: bold;
+  color: #555;
+}
+#droparea.upload {
+  height: 120px;
+  padding-top: 40px;
+}
+#droparea.hover{
+  border-color: #777;
+  background-color: #fff;
+}
+

http://git-wip-us.apache.org/repos/asf/incubator-marmotta/blob/8e2aafb5/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.html
----------------------------------------------------------------------
diff --git a/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.html b/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.html
index bc2b2c2..7cb0d09 100755
--- a/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.html
+++ b/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.html
@@ -92,16 +92,16 @@
           XSLT stylesheet URL:
           <input id="xsltstylesheet" type="text" value="snorql/xml-to-html.xsl" size="30" />
         </span></span>
-            <input type="button" value="Go!" onclick="editor.save(); snorql.submitQuery()" />
+            <input type="button" class="btn" value="Go" onclick="editor.save(); snorql.submitQuery()" />
         </div>
     </div>
 
     <div class="section">
-        <div id="result"><span></span></div>
+      <table id="result" class="table table-striped table-condensed table-hover"></table>
     </div>
 
     <!-- <div id="footer_snorql">Powered by <a id="poweredby" href="#">Snorql</a></div>  -->
-    
+
     <script type="text/javascript" src="prototype.js"></script>
     <script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
     <script type="text/javascript" src="../../../core/public/js/lib/jquery-1.7.2.js"></script>

http://git-wip-us.apache.org/repos/asf/incubator-marmotta/blob/8e2aafb5/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.js
----------------------------------------------------------------------
diff --git a/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.js b/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.js
index 620fa1e..24a3686 100755
--- a/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.js
+++ b/platform/marmotta-sparql/src/main/resources/web/admin/snorql/snorql.js
@@ -409,7 +409,7 @@ function SPARQLResultFormatter(json, namespaces) {
 
     this.toDOM = function() {
         var table = document.createElement('table');
-        table.className = 'queryresults';
+        table.className = 'table table-striped table-condensed table-hover';
         table.appendChild(this._createTableHeader());
         for (var i = 0; i < this._results.length; i++) {
             table.appendChild(this._createTableRow(this._results[i], i));