Page 1 of 1

Ngon

Posted: Mon Mar 25, 2019 8:54 pm
by Arbrakaan
Image

Thanks Fred for SpiderBasic, love it ! :)

Re: Ngon

Posted: Tue Mar 26, 2019 12:17 pm
by Fred
Looks cool ! Can we test it ?

Re: Ngon

Posted: Fri Mar 29, 2019 8:52 am
by the.weavster
Hi Arbrakaan,

I love the look of it, did you create a theme?

Re: Ngon

Posted: Sat Mar 30, 2019 4:46 pm
by Arbrakaan
@Fred : It's not ready yet, but I hope to share some preview of the app soon. :)

@the.weavster : There is the "CSS" file for the theme. But there is a lot of fixe to do and optimizing...

Update : 1 April 2019

Code: Select all

#lxl_template_luxel = 1
IncludeFile("luxel.sbi")
luxel.sbi

Code: Select all

;Luxel Tempalte
;v0.01

Debug "Luxel Template Loaded"

;Globals



;CSS
CompilerIf #lxl_template_luxel
	    !var StyleElement = document.createElement('style');
	    !StyleElement.type = 'text/css';
	    !StyleElement.id = 'LUXEL';
	    !var HeadElement = document.getElementsByTagName('head')[0];
	    !HeadElement.appendChild(StyleElement);
	    !//console.log(HeadElement);
		  !styles = "@import url(//fonts.googleapis.com/css?family=Open+Sans);html{margin:0!important;padding:0!important;height:100%!important;width:100%!important;background-color:#2a2a2a!important;background-size:cover!important;outline:0!important}body{margin:0!important;padding:0!important;height:100%!important;width:100%!important;overflow:hidden!important;font:normal 11px 'Open Sans',arial!important;letter-spacing:.6px!important}a{outline:0!important}.spiderwindow{margin:0!important;padding:0!important;background-color:transparent;border:none;box-shadow:0 1px 6px rgba(30,30,30,.4)!important;padding-bottom:28px!important;border-radius:2px!important;position:absolute!important;z-index:1!important}.spiderwindow-title{margin:0!important;padding:0!important;background-color:none!important;background:linear-gradient(to bottom,rgba(85,85,85,1) 0,#242424 100%)!important;border-bottom:1px solid #d3d3d3!important;color:#000!important;font:normal 12px/16px 'Open Sans',Arial,sans-serif!important;height:16px!important;overflow:hidden!important;padding:6px 0 6px 28px!important;text-overflow:ellipsis!important;white-space:nowrap!important;cursor:default!important;color:#fff!important;border-top-right-radius:6px!important;border-top-left-radius:6px!important}.spiderwindow-menubar{background:0 0!important}.spiderwindow-content{background:linear-gradient(to bottom,rgba(85,85,85,.8) 0,rgba(36,36,36,.8) 100%)!important;border:1px solid rgba(85,85,85,.3)!important;margin:0!important;padding:0!important;height:100%!important;overflow:hidden!important;position:relative!important;border-bottom-left-radius:6px!important;border-bottom-right-radius:6px!important;top:-1px!important}.spiderwindow-content p{margin:0!important;padding:0!important;margin-bottom:10px!important}.spiderwindow-content img{margin:0!important;padding:0!important;background-color:#f1f1f1!important;border:1px solid #ddd!important;float:left!important;margin:0 20px 10px 0!important;padding:1px!important}.spiderwindow-closebutton{background-color:rgba(230,32,32,.7)!important;background-image:url(close.png)!important;background-repeat:no-repeat!important;background-position:9px 5px!important;position:absolute!important;top:6px!important;right:2px!important;height:16px!important;width:30px!important;color:#fff!important;border-radius:4px!important;cursor:pointer!important}.spiderwindow-closebutton:hover{background:radial-gradient(ellipse at center,#e95b7c 0,rgba(230,32,32,.7) 100%)!important}.spiderwindow-closebutton:active{background-color:#b02a2a!important}.spiderwindow-background{margin:0!important;padding:0!important;color:#000!important;font:normal 12px/18px arial,sans-serif!important;height:100%!important;overflow:hidden!important;position:relative!important}.ui-resizable-handle{display:block!important;position:absolute!important}.ui-resizable-autohide .ui-resizable-handle,.ui-resizable-disabled .ui-resizable-handle{display:none!important}.ui-resizable-n,.ui-resizable-s{height:7px!important;left:0!important;width:100%!important}.ui-resizable-n{cursor:n-resize!important;top:-5px!important}.ui-resizable-s{bottom:-5px!important;cursor:s-resize!important}.ui-resizable-e,.ui-resizable-w{height:100%!important;top:0!important;width:7px!important}.ui-resizable-e{cursor:e-resize!important;right:-5px!important}.ui-resizable-w{cursor:w-resize!important;left:-5px!important}.ui-resizable-ne,.ui-resizable-nw,.ui-resizable-se,.ui-resizable-sw{height:12px!important;width:12px!important}.ui-resizable-se{bottom:-6px!important;cursor:se-resize!important;right:-6px!important}.ui-resizable-sw{bottom:-6px!important;cursor:sw-resize!important;left:-6px!important}.ui-resizable-nw{cursor:nw-resize!important;left:-6px!important;top:-6px!important}.ui-resizable-ne{cursor:ne-resize!important;right:-6px!important;top:-6px!important}.dijitMenuBar{height:30px!important;background:#545454!important;background:linear-gradient(to bottom,#545454 0,#252525 100%)!important;box-shadow:0 1px 6px rgba(30,30,30,.7)!important;letter-spacing:1.1px!important;font-size:1.2em!important;color:#ccc!important}.dijitMenuItemHover,.dijitMenuItemHover td{color:#fff!important;background:#3d3d3d!important}.dijitMenuItemActive,.dijitMenuItemActive td{color:#fff!important;background:#3d3d3d!important}.dijitMenuItemSelected,.dijitMenuItemSelected td{color:#fff!important;background:#3d3d3d!important}.dijitMenuBar .dijitMenuItemHover{background:rgba(30,30,30,.2)!important}.dijitMenuBar .dijitMenuItemActive{background:rgba(30,30,30,.2)!important}.dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected,.dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,.dijitMenuBar .dijitMenuItemSelected{color:#fff!important;background:rgba(30,30,30,.2)!important}.dijitProgressBarFull{background:#1d9bae!important;background:linear-gradient(to bottom,#1d9bae 0,#3ebfd2 100%)!important;transition-property:width!important;transition-duration:.25s!important;height:100%!important}.dijitTab{background-color:#38393a!important;background:linear-gradient(to bottom,#3e4041 0,#343536 100%)!important;border:none!important;margin-right:1px!important;border-top:1px solid #5b5d5e!important;border-left:1px solid #404142!important;outline:0!important;font-size:1.3em!important;border-top-left-radius:2px!important;border-top-right-radius:2px!important;color:#8c8c8c;box-shadow:inset 0 0 20px rgba(20,20,20,.2);margin-bottom:1px}.dijitTabContainerTop-tabs .dijitTabActive,.dijitTabContainerTop-tabs .dijitTabChecked,.dijitTabContainerTop-tabs .dijitTabHover{padding-bottom:8px;background:linear-gradient(to bottom,#404243 0,#38393a 100%)!important;box-shadow:none;margin-bottom:0}.dijitTabChecked:before{height:2px!important;background:0 0!important;top:-1px!important;left:-1px!important;right:-1px!important;border:none!important}.dijitContentPane{background:#38393a!important;border-top:1px solid #404142!important}.dijitComboBox.btn-primary,.dijitSelect.btn-primary,.dijitSpinner.btn-primary{border-color:#1d9bae!important}.dijitTextBoxHover{border:1px solid #1d9bae!important;transition-duration:.25s!important}.dijitTextBoxFocused{border:1px solid rgba(218,85,107,.8)!important;box-shadow:0 1px 2px rgba(0,0,0,.15) inset!important;transition-duration:.1s!important;background-color:#000!important}.dijitTextBox{background:#333;border:1px solid #252525!important;box-shadow:none!important;border-radius:2px!important;transition:border .2s linear 0s,box-shadow .2s linear 0s!important;color:#fff}.ui-resizable-handle{background-image:none!important}.dijitButtonContents{min-height:26px!important;background:0 0!important;background-color:#2f3031!important;border-bottom:1px solid #d3d3d3!important;box-shadow:0 1px 6px rgba(30,30,30,.6)!important;font:'Open Sans',Arial,sans-serif!important;letter-spacing:1.1px!important;color:#fff!important;text-shadow:none!important;border:0!important}.dijitButtonNode{border:solid 1px #747474!important}.dgrid-scroller{background:linear-gradient(to bottom,#b8bcbf 0,#868a8c 100%)!important}.dgrid{border:solid 1px #747474!important}.dgrid-focus{background-color:#545758!important;color:#fff!important}.dgrid-selected{background-color:#4c4f51!important}.dgrid-cell{background-color:#5b5e5f!important;border:none!important;border-bottom:solid 1px #868686!important;font-size:1.2em!important;padding-top:6px!important;padding-bottom:6px!important}body::-webkit-scrollbar{width:1em!important}body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)!important}body::-webkit-scrollbar-thumb{background-color:#a9a9a9!important;outline:1px solid #708090!important}.dijitTabPaneWrapper{border:none!important}.sbCanvasBorder,.sbContainerBorder,.sbFrameBorder,.sbImageBorder,.sbScrollAreaBorder,.sbTreeBorder,.sbWebBorder{border:1px solid rgba(255,255,255,.2)!important}.dgrid-column-0{padding:8px!important;cursor:pointer}.dgrid-column-0:hover{background-color:rgba(255,255,255,.2)!important}.dijitCheckBox{background-color:#2f3031!important;padding:2px;border:none}.ui-widget-content{background-color:#494b4c!important}.dijitSlider .dijitSliderRemainingBarH,.dijitSlider .dijitSliderRightBumper{border-color:#2d2e2f;background-color:#444;height:8px}.dijitSliderImageHandle{background:#38393a;background:linear-gradient(#fdfdfd 0,#38393a 100%);box-shadow:0 2px 3px rgba(0,0,0,.5);border-radius:50%;border:1px solid #38393a;width:16px;height:16px;margin-top:-1px;position:absolute}.dijitSliderImageHandle:after{content:'';display:block;background:#5e6163;-webkit-border-radius:50%;border-radius:50%;height:11px;width:11px;left:3px;top:2px;position:absolute}.dijitSlider .dijitSliderLeftBumper,.dijitSlider .dijitSliderProgressBarH{border-color:#38393a;background-color:#838a8e;background-image:linear-gradient(#4e5051,#838a8e);top:1px}.dijitSliderBumperH{width:0;height:4px;border-width:1px 0}.dijitReset .dijitMenuItem{background:none repeat scroll 0 0 #555}.dijitReset .dijitMenuItem .dijitMenuItemLabel{color:#eee;font-size:1.2em;padding:10px}.dijitMenu .dijitReset .dijitMenuSeparator{background-color:#444}.dijitMenu .dijitReset .dijitMenuSeparator .dijitMenuSeparatorTop{margin:0;border-bottom:#444 1px solid}.dijitMenu .dijitReset .dijitMenuSeparator .dijitMenuSeparatorBottom{margin:0;border-bottom:#555 1px solid;border-top:#404040 1px solid}.dijitPopup .dijitMenu{border:1px solid #444!important}.dijitMenu .dijitMenuItemSelected{background-color:none!important}.dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel{color:#fff!important}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #666;border-radius:4px}::-webkit-scrollbar-thumb{background:#222;border-radius:4px}";
		  !document.getElementById("LUXEL").appendChild(document.createTextNode( styles ));
CompilerEndIf

;TOOLS

Procedure lxl_setGadgetID(gadget)
  Protected id.s
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "lxl_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
EndProcedure

Procedure lxl_SetGadgetZIndex(gadget, zindex)
  Protected styles.s
  Protected id.s
  
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
  
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  
  styles = "#" + id + " { z-index: " + zindex + "  !important; }"
  
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
  
EndProcedure



;MACROS

 Macro lxl_ListIconGadget(lxl_gadget, lxl_x, lxl_y, lxl_Width, lxl_Height, lxl_Title="", header=1, TitleWidth=120, flags=0)
  
   ListIconGadget(lxl_gadget, lxl_x, lxl_y, lxl_Width, lxl_Height, lxl_Title, TitleWidth, flags)
   lxl_setGadgetID(lxl_gadget)
   gadgetid = lxl_gadget
   If header=0
     !document.getElementById("lxl_"+v_gadgetid).getElementsByClassName("dgrid-header")[0].style.display = "none";
   EndIf
   
EndMacro


Re: Ngon

Posted: Sun Mar 31, 2019 11:13 pm
by Arbrakaan
Some week-end screensshots.

Image

Image

Image

Re: Ngon

Posted: Wed Apr 17, 2019 8:45 am
by LastmanStanding
Wow surprise !! 8-)