From d042036b1f37e564f4b26c417e19646f4f7b5dc1 Mon Sep 17 00:00:00 2001
From: Victor Dubiniuk <victor.dubiniuk@gmail.com>
Date: Wed, 5 Feb 2014 22:09:43 +0300
Subject: [PATCH] Remove webroot from css. Fixes #197

---
 css/compat/icons.css    | 244 ++++++++++++++++++++++++++++++++++++++++
 css/style.css           |  12 +-
 index.php               |   8 ++
 js/documents.js         |   2 +-
 templates/documents.php |   6 +-
 5 files changed, 259 insertions(+), 13 deletions(-)
 create mode 100644 css/compat/icons.css

diff --git a/css/compat/icons.css b/css/compat/icons.css
new file mode 100644
index 00000000..76d5fa7d
--- /dev/null
+++ b/css/compat/icons.css
@@ -0,0 +1,244 @@
+.icon {
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+
+
+
+/* general assets */
+
+.icon-breadcrumb {
+	background-image: url('%webroot%/core/img/breadcrumb.svg');
+}
+
+.icon-loading {
+	background-image: url('%webroot%/core/img/loading.gif');
+}
+.icon-loading-dark {
+	background-image: url('%webroot%/core/img/loading-dark.gif');
+}
+.icon-loading-small {
+	background-image: url('%webroot%/core/img/loading-small.gif');
+}
+
+.icon-noise {
+	background-image: url('%webroot%/core/img/noise.png');
+	background-repeat: no-repeat;
+}
+
+
+
+
+/* action icons */
+
+.icon-add {
+	background-image: url('%webroot%/core/img/actions/add.svg');
+}
+
+.icon-caret {
+	background-image: url('%webroot%/core/img/actions/caret.svg');
+}
+.icon-caret-dark {
+	background-image: url('%webroot%/core/img/actions/caret-dark.svg');
+}
+
+.icon-checkmark {
+	background-image: url('%webroot%/core/img/actions/checkmark.svg');
+}
+
+.icon-checkmark-white {
+	background-image: url('%webroot%/core/img/actions/checkmark-white.svg');
+}
+
+.icon-clock {
+	background-image: url('%webroot%/core/img/actions/clock.svg');
+}
+
+.icon-close {
+	background-image: url('%webroot%/core/img/actions/close.svg');
+}
+
+.icon-confirm {
+	background-image: url('%webroot%/core/img/actions/confirm.svg');
+}
+
+.icon-delete {
+	background-image: url('%webroot%/core/img/actions/delete.svg');
+}
+.icon-delete-hover {
+	background-image: url('%webroot%/core/img/actions/delete-hover.svg');
+}
+
+.icon-download {
+	background-image: url('%webroot%/core/img/actions/download.svg');
+}
+
+.icon-history {
+	background-image: url('%webroot%/core/img/actions/history.svg');
+}
+
+.icon-info {
+	background-image: url('%webroot%/core/img/actions/info.svg');
+}
+
+.icon-lock {
+	background-image: url('%webroot%/core/img/actions/lock.svg');
+}
+
+.icon-logout {
+	background-image: url('%webroot%/core/img/actions/logout.svg');
+}
+
+.icon-mail {
+	background-image: url('%webroot%/core/img/actions/mail.svg');
+}
+
+.icon-more {
+	background-image: url('%webroot%/core/img/actions/more.svg');
+}
+
+.icon-password {
+	background-image: url('%webroot%/core/img/actions/password.svg');
+}
+
+.icon-pause {
+	background-image: url('%webroot%/core/img/actions/pause.svg');
+}
+.icon-pause-big {
+	background-image: url('%webroot%/core/img/actions/pause-big.svg');
+}
+
+.icon-play {
+	background-image: url('%webroot%/core/img/actions/play.svg');
+}
+.icon-play-add {
+	background-image: url('%webroot%/core/img/actions/play-add.svg');
+}
+.icon-play-big {
+	background-image: url('%webroot%/core/img/actions/play-big.svg');
+}
+.icon-play-next {
+	background-image: url('%webroot%/core/img/actions/play-next.svg');
+}
+.icon-play-previous {
+	background-image: url('%webroot%/core/img/actions/play-previous.svg');
+}
+
+.icon-public {
+	background-image: url('%webroot%/core/img/actions/public.svg');
+}
+
+.icon-rename {
+	background-image: url('%webroot%/core/img/actions/rename.svg');
+}
+
+.icon-search {
+	background-image: url('%webroot%/core/img/actions/search.svg');
+}
+
+.icon-settings {
+	background-image: url('%webroot%/core/img/actions/settings.svg');
+}
+
+.icon-share {
+	background-image: url('%webroot%/core/img/actions/share.svg');
+}
+.icon-shared {
+	background-image: url('%webroot%/core/img/actions/shared.svg');
+}
+
+.icon-sound {
+	background-image: url('%webroot%/core/img/actions/sound.svg');
+}
+.icon-sound-off {
+	background-image: url('%webroot%/core/img/actions/sound-off.svg');
+}
+
+.icon-star {
+	background-image: url('%webroot%/core/img/actions/star.svg');
+}
+
+.icon-starred {
+	background-image: url('%webroot%/core/img/actions/starred.svg');
+}
+
+.icon-toggle {
+	background-image: url('%webroot%/core/img/actions/toggle.svg');
+}
+
+.icon-triangle-e {
+	background-image: url('%webroot%/core/img/actions/triangle-e.svg');
+}
+.icon-triangle-n {
+	background-image: url('%webroot%/core/img/actions/triangle-n.svg');
+}
+.icon-triangle-s {
+	background-image: url('%webroot%/core/img/actions/triangle-s.svg');
+}
+
+.icon-upload {
+	background-image: url('%webroot%/core/img/actions/upload.svg');
+}
+.icon-upload-white {
+	background-image: url('%webroot%/core/img/actions/upload-white.svg');
+}
+
+.icon-user {
+	background-image: url('%webroot%/core/img/actions/user.svg');
+}
+
+.icon-view-close {
+	background-image: url('%webroot%/core/img/actions/view-close.svg');
+}
+.icon-view-next {
+	background-image: url('%webroot%/core/img/actions/view-next.svg');
+}
+.icon-view-pause {
+	background-image: url('%webroot%/core/img/actions/view-pause.svg');
+}
+.icon-view-play {
+	background-image: url('%webroot%/core/img/actions/view-play.svg');
+}
+.icon-view-previous {
+	background-image: url('%webroot%/core/img/actions/view-previous.svg');
+}
+
+
+
+
+/* places icons */
+
+.icon-calendar-dark {
+	background-image: url('%webroot%/core/img/places/calendar-dark.svg');
+}
+
+.icon-contacts-dark {
+	background-image: url('%webroot%/core/img/places/contacts-dark.svg');
+}
+
+.icon-file {
+	background-image: url('%webroot%/core/img/places/file.svg');
+}
+.icon-files {
+	background-image: url('%webroot%/core/img/places/files.svg');
+}
+.icon-folder {
+	background-image: url('%webroot%/core/img/places/folder.svg');
+}
+
+.icon-home {
+	background-image: url('%webroot%/core/img/places/home.svg');
+}
+
+.icon-link {
+	background-image: url('%webroot%/core/img/places/link.svg');
+}
+
+.icon-music {
+	background-image: url('%webroot%/core/img/places/music.svg');
+}
+
+.icon-picture {
+	background-image: url('%webroot%/core/img/places/picture.svg');
+}
diff --git a/css/style.css b/css/style.css
index 04becc31..56e58230 100755
--- a/css/style.css
+++ b/css/style.css
@@ -26,12 +26,7 @@
 	background-size: 32px;
 	background-position: 50%;
 }
-.add-document .add {
-	background-image: url('%webroot%/core/img/actions/add.svg');
-}
-.add-document .upload {
-	background-image: url('%webroot%/core/img/actions/upload.svg');
-}
+
 
 .add-document a.add {
 	border-bottom: 1px solid #fff;
@@ -59,7 +54,7 @@
 	position:absolute;
 	left:232px;
 	z-index:5;
-	background: #e8e8e8 url('%webroot%/core/img/loading.gif') 50% 50% no-repeat;
+	background-color: #e8e8e8;
 }
 
 .documentslist .progress div{
@@ -155,7 +150,6 @@
 
 #invitee-list li{
 	padding: 5px 0 5px 20px;
-	background: url('%webroot%/core/img/actions/delete.svg') 0 50% no-repeat;
 }
 
 #mainContainer{
@@ -172,7 +166,7 @@
     filter:alpha(opacity=30);
     opacity: .3;
     z-index: 1000;
-	background: #111 url('%webroot%/core/img/loading-dark.gif') 50% 50% no-repeat;
+	background-color: #111;
 }
 
 #documents-overlay-below{
diff --git a/index.php b/index.php
index 05f277ac..065dc690 100755
--- a/index.php
+++ b/index.php
@@ -31,6 +31,14 @@ namespace OCA\Documents;
 \OCP\Util::addStyle( 'documents', 'style' );
 \OCP\Util::addStyle( 'documents', '3rdparty/webodf/dojo-app');
 \OCP\Util::addStyle( 'documents', '3rdparty/webodf/editor');
+
+
+$ocVersion = \OCP\Util::getVersion();
+
+if ($ocVersion[0]<=6){
+	\OCP\Util::addStyle( 'documents', 'compat/icons' );
+}
+
 \OCP\Util::addScript('documents', 'documents');
 
 \OCP\Util::addScript('files', 'file-upload');
diff --git a/js/documents.js b/js/documents.js
index 168b9162..0945214e 100644
--- a/js/documents.js
+++ b/js/documents.js
@@ -13,7 +13,7 @@ var documentsMain = {
 	
 	UI : {
 		/* Overlay HTML */
-		overlay : '<div id="documents-overlay"></div> <div id="documents-overlay-below"></div>',
+		overlay : '<div id="documents-overlay" class="icon icon-loading-dark"></div> <div id="documents-overlay-below" class="icon icon-loading-dark"></div>',
 				
 		/* Toolbar HTML */
 		toolbar : '<div id="odf-toolbar" class="dijitToolbar">' +
diff --git a/templates/documents.php b/templates/documents.php
index 21edb4e3..5270700e 100755
--- a/templates/documents.php
+++ b/templates/documents.php
@@ -1,7 +1,7 @@
 <div id="documents-content">
 	<ul class="documentslist">
 		<li class="add-document">
-			<a class="add svg" target="_blank" href="">
+			<a class="icon icon-add add svg" target="_blank" href="">
 				<label><?php p($l->t('New document')) ?></label>
 			</a> 
 			<div id="upload" title="<?php p($l->t('Upload') . ' max. '.$_['uploadMaxHumanFilesize']) ?>">
@@ -23,12 +23,12 @@
 						   value="(max <?php p($_['uploadMaxHumanFilesize']); ?>)" />
 					<input type="hidden" name="dir" value="<?php p($_['savePath']) ?>" id="dir" />
 					<input type="file" id="file_upload_start" name='files[]' />
-					<a href="#" class="upload svg">
+					<a href="#" class="icon icon-upload upload svg">
 					<label><?php p($l->t('Upload')) ?></label></a>
 				</form>
 			</div>
 		</li>
-		<li class="progress"><div><?php p($l->t('Loading documents...')); ?></div></li>
+		<li class="progress icon icon-loading"><div><?php p($l->t('Loading documents...')); ?></div></li>
 		<li class="document template" data-id="" style="display:none;">
 			<a target="_blank" href=""><label></label></a>
 		</li>