Mirrors/ICEcoder
2
0
Fork 0
mirror of https://github.com/icecoder/ICEcoder.git synced 2026-03-03 07:13:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Icons added for tools, hover states added

Browse Source
This commit is contained in:
mattpass
2020-08-17 11:19:56 +01:00
parent 1d8cfafb62
commit e253ff059e
7 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/files.css
View File

@@ -11,10 +11,13 @@ body {margin: 0; overflow: auto;
}
.lock {position: fixed; display: inline-block; width: 12px; height: 16px; right: 0; margin-right: 16px; top: 0; color: #666; cursor: pointer}
.lock:hover {color: #fff; cursor: pointer}
.lock .icon-tabler {width: 22px; height: 22px; margin-left: -5px; margin-top: 0; stroke-width: 1.25; pointer-events: none}
.refresh {position: fixed; display: inline-block; width: 14px; height: 14px; right: 0; margin-right: 15px; top: 34px; color: #666; cursor: pointer}
.refresh:hover {color: #fff; cursor: pointer}
.refresh .icon-tabler {width: 20px; height: 20px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; transform: rotate(180deg); pointer-events: none}
.plugins {position: fixed; display: inline-block; width: 16px; height: 16px; right: 0; margin-right: 15px; top: 61px; color: #666; cursor: pointer}
.plugins:hover {color: #fff; cursor: pointer}
.plugins .icon-tabler {width: 24px; height: 24px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
.fmDragBox {position: absolute; display: inline-block; width: 0; height: 0; top: 0; left: 0; background: rgba(0,198,255,0.3);
-webkit-user-select: none;

5
assets/css/icecoder.css
View File

@@ -69,6 +69,7 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.files .tools {position: absolute; display: inline-block; width: 250px; height: 30px; left: 0; bottom: 0}
.files .tools div {display: inline-block; margin: 8px 0 8px 15px; color: #666; cursor: pointer}
.files .tools div:hover {color: #fff; cursor: pointer}
.files .tools .icon-tabler {width: 22px; height: 22px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
.files .tools .highlight {color: #eee; padding: 1px 3px; margin: 7px -3px 7px 12px; border-radius: 3px}
.files .tools .error {background: #800}
.files .tools .info {background: #080}
@@ -119,8 +120,10 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.goLine .goToLine {width: 50px; height: 28px; border: 0; font-size: 12px; margin: -7px 0 0 3px; padding-left: 4px; background: #333; color: #eee}
.findReplace input:focus, .goLine .goToLine:focus {outline: none; background: rgba(0,198,255,0.5); color: #fff}
.findBar .view {position: fixed; display: inline-block; width: 16px; height: 16px; right: 40px; top: 49px; color: #888; cursor: pointer; opacity: 0.3}
.findBar .view:hover {color: #fff; cursor: pointer}
.findBar .view .icon-tabler {width: 22px; height: 22px; margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
.findBar .bug {position: fixed; display: inline-block; width: 16px; height: 16px; right: 15px; top: 49px; color: #404040; cursor: pointer}
.findBar .bug:hover {color: #fff; cursor: pointer}
.findBar .bug .icon-tabler {width: 23px; height: 23px; margin-left: -3px; margin-top: -4px; stroke-width: 1.25; pointer-events: none}
.editor .terminal {position: fixed; top: 10000px; transition: top 0.2s ease; z-index: 2}
.editor .output {position: fixed; top: 10000px; padding: 15px 18px 8px 13px; transition: top 0.2s ease; background: rgba(0,0,0,0.92); z-index: 2}
@@ -139,8 +142,10 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.footer .serverMessage {position: absolute; display: inline-block; padding: 5px; margin-top: 3px; left: 275px; color: #fff; transition: opacity 0.2s; z-index: 1}
.footer .splitPaneControls {position: absolute; display: inline-block; width: 50px; text-align: center; padding: 6px}
.footer .splitPaneControls .off {display: inline-block; width: 18px; height: 18px; margin-right: 10px; color: #888; cursor: pointer}
.footer .splitPaneControls .off:hover {color: #fff; cursor: pointer}
.footer .splitPaneControls .off .icon-tabler {margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
.footer .splitPaneControls .on {display: inline-block; width: 19px; height: 18px; color: #888; cursor: pointer}
.footer .splitPaneControls .off:hover {color: #fff; cursor: pointer}
.footer .splitPaneControls .on .icon-tabler {margin-left: -3px; margin-top: -3px; stroke-width: 1.25; pointer-events: none}
.footer .splitPaneNames {position: absolute; display: inline-block; width: 100px; text-align: center; margin-top: 9px; color: #555; opacity: 0; transition: opacity 0.3s ease-in-out}
.footer .charDisplay, .footer .byteDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 3px; margin-right: 10px; right: 0; font-size: 12px; color: #fff; text-align: right; text-align: right; cursor: pointer}

6
assets/images/icons/database.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-database" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<ellipse cx="12" cy="6" rx="8" ry="3"></ellipse>
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 419 B

9
assets/images/icons/git-compare.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-compare" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="6" cy="6" r="2" />
<circle cx="18" cy="18" r="2" />
<path d="M11 6h5a2 2 0 0 1 2 2v8" />
<polyline points="14 9 11 6 14 3" />
<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
<polyline points="10 15 13 18 10 21" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 528 B

5
assets/images/icons/layout-list.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-list" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="4" y="4" width="16" height="6" rx="2" />
<rect x="4" y="14" width="16" height="6" rx="2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 393 B

6
assets/images/icons/terminal-2.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal-2" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M8 9l3 3l-3 3" />
<line x1="13" y1="15" x2="16" y2="15" />
<rect x="3" y="4" width="18" height="16" rx="2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

8
index.php
View File

@@ -299,10 +299,10 @@ if (true === $havePrettier && true === file_exists(dirname(__FILE__) . "/plugins
<iframe id="filesFrame" class="frame" name="ff" src="<?php echo $iceURLPath;?>/files.php" style="opacity: 0" onLoad="this.style.opacity = '1'; this.contentWindow.onscroll = function(){ICEcoder.mouseDown = false; ICEcoder.mouseDownInCM = false}"></iframe>
<div class="tools" id="tools">
<div onclick="ICEcoder.toolShowHideToggle('terminal')" id="toolLinkTerminal">Terminal</div>
<div onclick="ICEcoder.toolShowHideToggle('output'); this.className = ''" id="toolLinkOutput">Output</div>
<div onclick="ICEcoder.toolShowHideToggle('database')" id="toolLinkDatabase">Database</div>
<div onclick="ICEcoder.toolShowHideToggle('git')" id="toolLinkGit">Git</div>
<div onclick="ICEcoder.toolShowHideToggle('terminal')" id="toolLinkTerminal" title="Terminal"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/terminal-2.svg");?></div>
<div onclick="ICEcoder.toolShowHideToggle('output'); this.className = ''" id="toolLinkOutput" title="Output"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/layout-list.svg");?></div>
<div onclick="ICEcoder.toolShowHideToggle('database')" id="toolLinkDatabase" title="Database"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/database.svg");?></div>
<div onclick="ICEcoder.toolShowHideToggle('git')" id="toolLinkGit" title="Git"><?php echo file_get_contents(dirname(__FILE__) . "/assets/images/icons/git-compare.svg");?></div>
</div>
</div>