From 8886d995ec3502e3e5654cf65ee833cdc3419384 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Fri, 22 Sep 2017 03:56:40 +0100 Subject: [PATCH 01/16] Refactoring for theme --- src/ui/ButtonNavigator.js | 7 +++++-- src/ui/TxBrowser.js | 3 ++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/ui/ButtonNavigator.js b/src/ui/ButtonNavigator.js index 1033f71418..afc0984256 100644 --- a/src/ui/ButtonNavigator.js +++ b/src/ui/ButtonNavigator.js @@ -25,11 +25,14 @@ var css = csjs` justify-content: center } .jumpButton { - ${styles.button} + ${styles.button} } - .navigator:hover { + .navigator { color: ${styles.colors.black} } + .navigator:hover { + color: ${styles.colors.orange} + } ` function ButtonNavigator (_parent, _traceManager) { diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index 44698105b3..2ab86bf1e1 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -36,9 +36,10 @@ var css = csjs` } .txbutton { ${styles.button} + color: ${styles.colors.black}; } .txbutton:hover { - color: ${styles.colors.black}; + color: ${styles.colors.orange}; } ` function TxBrowser (_parent) { From c730d865b5873ed03c533e7d498f304ad057bbeb Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Sat, 23 Sep 2017 00:08:09 +0100 Subject: [PATCH 02/16] Refactoring Debugger - applying style-guide --- src/ui/BasicPanel.js | 13 +++++++++++- src/ui/DropdownPanel.js | 45 +++++++++++++++++++++++++++++++++-------- src/ui/TxBrowser.js | 5 ++++- 3 files changed, 53 insertions(+), 10 deletions(-) diff --git a/src/ui/BasicPanel.js b/src/ui/BasicPanel.js index aa4eae240d..afa9ee88c1 100644 --- a/src/ui/BasicPanel.js +++ b/src/ui/BasicPanel.js @@ -3,6 +3,16 @@ var style = require('./styles/basicStyles') var yo = require('yo-yo') var ui = require('../helpers/ui') +var csjs = require('csjs-inject') +var styleGuide = require('./styles/style-guide') +var styles = styleGuide() + +var css = csjs` + .container { + width: 70%; + } +` + function BasicPanel (_name, _width, _height) { this.data this.name = _name @@ -24,7 +34,8 @@ BasicPanel.prototype.show = function () { } BasicPanel.prototype.render = function () { - var view = yo`
+ var view = yo` +
${this.name}
diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index 0a3a6ac7f7..29546fcbec 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -6,6 +6,35 @@ var basicStyles = require('./styles/basicStyles') var TreeView = require('./TreeView') var EventManager = require('../lib/eventManager') +var csjs = require('csjs-inject') +var styleGuide = require('./styles/style-guide') +var styles = styleGuide() + +var css = csjs` + .title { + margin-top: 10px; + ${styles.dropdown} + display: flex; + align-items: center; + } + .name { + color: ${styles.colors.black}; + font-weight: bold; + } + .icon { + color: ${styles.colors.black}; + margin-right: 5%; + } + .eyeButton { + ${styles.button} + margin: 3px; + float: right; + } + .eyeButton:hover { + color: ${styles.colors.orange}; + } +` + function DropdownPanel (_name, _opts) { this.event = new EventManager() if (!_opts) { @@ -79,12 +108,12 @@ DropdownPanel.prototype.render = function (overridestyle) { to {transform:rotate(359deg);} } -
-
-
${this.name}
+
+
+
${this.name}
-
${content}
@@ -110,11 +139,11 @@ DropdownPanel.prototype.toggle = function () { var caret = this.view.querySelector('.title').firstElementChild if (el.style.display === '') { el.style.display = 'none' - caret.className = 'fa fa-caret-right' + caret.className = `${css.icon} fa fa-caret-right` this.event.trigger('hide', []) } else { el.style.display = '' - caret.className = 'fa fa-caret-down' + caret.className = `${css.icon} fa fa-caret-down` this.event.trigger('show', []) } } @@ -124,7 +153,7 @@ DropdownPanel.prototype.hide = function () { var caret = this.view.querySelector('.title').firstElementChild var el = this.view.querySelector('.dropdownpanel') el.style.display = 'none' - caret.className = 'fa fa-caret-right' + caret.className = `${css.icon} fa fa-caret-right` this.event.trigger('hide', []) } } @@ -134,7 +163,7 @@ DropdownPanel.prototype.show = function () { var caret = this.view.querySelector('.title').firstElementChild var el = this.view.querySelector('.dropdownpanel') el.style.display = '' - caret.className = 'fa fa-caret-down' + caret.className = `${css.icon} fa fa-caret-down` this.event.trigger('show', []) } } diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index 2ab86bf1e1..662d1fec52 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -41,6 +41,9 @@ var css = csjs` .txbutton:hover { color: ${styles.colors.orange}; } + .txinfo { + margin-top: 5px; + } ` function TxBrowser (_parent) { this.event = new EventManager() @@ -193,7 +196,7 @@ TxBrowser.prototype.render = function () {
-
+
${this.basicPanel.render()}
` From 223bf727f8e3093d64bfdd39880621827ba3fa33 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Sun, 24 Sep 2017 02:37:19 +0100 Subject: [PATCH 03/16] Update style-guide --- src/ui/styles/style-guide.js | 103 +++++++++-------------------------- 1 file changed, 25 insertions(+), 78 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 042788b6e7..ee8406455c 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -7,6 +7,24 @@ function styleGuide () { COLORS -------------------------------------------------------------------------- */ var colors = { + // BACKGROUND COLORS + general_BackgroundColor: 'hsl(0, 0%, 100%)', // white + highlight_BackgroundColor: 'hsla(229, 100%, 97%, 1)', // backgroundBlue + + // TEXT COLORS + mainText_Color: 'hsl(0, 0%, 0%)', // black + normalText_Color: 'hsla(0, 0%, 40%, 1)', // grey + + // ICONS + icon_Color: 'hsl(0, 0%, 0%)', // black + icon_HoverColor: 'hsla(44, 100%, 50%, 1)', // orange + + // DROPDOWN + dropdown_TextColor: 'hsl(0, 0%, 0%)', // black , + dropdown_BackgroundColor: 'hsl(0, 0%, 100%)', // white + dropdown_BorderColor: 'hsla(0, 0%, 40%, .2)', // very light grey + + // BASIC COLORS (B&W and transparent) transparent: 'transparent', white: 'hsl(0, 0%, 100%)', @@ -36,37 +54,6 @@ function styleGuide () { violet: 'hsla(240, 64%, 68%, 1)' } - /* -------------------------------------------------------------------------- - FONTS - -------------------------------------------------------------------------- */ - - var texts = { - 'title-XL': ` - font-size : 2em; - font-weight : 700; - letter-spacing : .05em; - `, - - 'title-L': ` - font-size : 1em; - font-weight : 600; - `, - - 'title-M': ` - font-size : 1em; - font-weight : 400; - `, - - 'title-S': ` - font-size : .8em; - font-weight : 300; - `, - - 'text': ` - font-size : .8em; - ` - } - /* -------------------------------------------------------------------------- TEXT-BOXES -------------------------------------------------------------------------- */ @@ -95,42 +82,6 @@ function styleGuide () { word-break : break-word; `, - 'warning-text-box': ` - background-color : ${colors.lightOrange}; - line-height : 20px; - padding : 8px 15px; - border-radius : 5px; - border : .2em dotted ${colors.orange}; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; - `, - - 'error-text-box': ` - background-color : ${colors.lightRed}; - line-height : 20px; - padding : 1em 1em .5em 1em; - border-radius : 3px; - box-shadow : rgba(0,0,0,.2) 0 1px 4px; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; - `, - - 'title-box': ` - margin-bottom : 0.4em; - padding : .3em; - background-color : transparent; - font-weight : bold; - display : flex; - justify-content : space-between; - word-wrap : break-word; - position : relative; - border-radius : 3px; - overflow : hidden; - word-break : normal; - `, - 'input': ` border : 1px solid ${colors.veryLightGrey}; height : 25px; @@ -169,13 +120,14 @@ function styleGuide () { `, 'dropdown': ` + color : ${colors.dropdown_TextColor}; + background-color : ${colors.dropdown_BackgroundColor}; + border : 1px solid ${colors.dropdown_BorderColor}; font-size : 12px; font-weight : bold; padding : 0 8px; text-decoration : none; - background-color : ${colors.white}; cursor : pointer; - border : 1px solid ${colors.veryLightGrey}; border-radius : 3px; height : 25px; width : 250px; @@ -187,16 +139,11 @@ function styleGuide () { } return { - textBoxL: textBoxes['display-box-L'], - infoTextBox: textBoxes['info-text-box'], - inputField: textBoxes['input'], - displayBox: textBoxes['display-box'], - warningTextBox: textBoxes['warning-text-box'], - titleL: texts['title-L'], - titleM: texts['title-M'], + colors: colors, dropdown: buttons['dropdown'], button: buttons['button'], - colors: colors, - titleBox: textBoxes['title-box'] + inputField: textBoxes['input'], + infoTextBox: textBoxes['info-text-box'], + displayBox: textBoxes['display-box'] } } From 9bf7390edb98e1c9bc201051fa5b64a53bc216b4 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Mon, 25 Sep 2017 04:33:30 +0100 Subject: [PATCH 04/16] Updating style guide and working on concept --- src/ui/styles/style-guide.js | 55 +++++++++++++++++++++++++++++------- 1 file changed, 45 insertions(+), 10 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index ee8406455c..1e4f271710 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -19,11 +19,26 @@ function styleGuide () { icon_Color: 'hsl(0, 0%, 0%)', // black icon_HoverColor: 'hsla(44, 100%, 50%, 1)', // orange - // DROPDOWN - dropdown_TextColor: 'hsl(0, 0%, 0%)', // black , - dropdown_BackgroundColor: 'hsl(0, 0%, 100%)', // white - dropdown_BorderColor: 'hsla(0, 0%, 40%, .2)', // very light grey + // UI ELEMENTS + element_TextColor: 'hsl(0, 0%, 0%)', // black , + element_BackgroundColor: 'hsl(0, 0%, 100%)', // white + element_BorderColor: 'hsla(0, 0%, 40%, .2)', // very light grey +/* +1. most css properties can take many or infinite amounf of different values +=> so we define a set of concrete values that we use: +- variable just for plain colors (later also fonts, widths, paddings, border radiuses...) + +2. we define certain semantic names that make sense in the context of our app +=> so we can use the values used in (1.) e.g. like 'color_red' and assign it to e.g. +- highlightColor: color_red +- borderColor: color_white +- ... + +3. we define a nested object that represents the component hierarchy that +makes up our app and use semantic names defined under (2.) + +*/ // BASIC COLORS (B&W and transparent) transparent: 'transparent', @@ -54,6 +69,25 @@ function styleGuide () { violet: 'hsla(240, 64%, 68%, 1)' } +var elementColors = { + /* ----------------------- + BUTTONS + ----------------------- */ + // DROPDOWN + dropdown_TextColor: colors.element_TextColor, + dropdown_BackgroundColor: colors.element_BackgroundColor, + dropdown_BorderColor: colors.element_BorderColor, + + // BUTTON + button_TextColor: colors.element_TextColor, + button_BorderColor: colors.element_BorderColor, + rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', + rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' + + /* ----------------------- + TEXT BOXES + ----------------------- */ +} /* -------------------------------------------------------------------------- TEXT-BOXES -------------------------------------------------------------------------- */ @@ -98,12 +132,13 @@ function styleGuide () { var buttons = { 'button': ` + background-color : ${elementColors.button_BackgroundColor}; + border : .3px solid ${elementColors.button_BorderColor}; + color : ${elementColors.button_TextColor}; display : flex; align-items : center; justify-content : center; - border-color : transparent; border-radius : 3px; - border : .3px solid ${colors.veryLightGrey}; cursor : pointer; min-height : 25px; max-height : 25px; @@ -112,7 +147,6 @@ function styleGuide () { font-size : 12px; overflow : hidden; word-break : normal; - background-color : #E8E8E8; `, 'button:hover': ` @@ -120,9 +154,9 @@ function styleGuide () { `, 'dropdown': ` - color : ${colors.dropdown_TextColor}; - background-color : ${colors.dropdown_BackgroundColor}; - border : 1px solid ${colors.dropdown_BorderColor}; + color : ${elementColors.dropdown_TextColor}; + background-color : ${elementColors.dropdown_BackgroundColor}; + border : 1px solid ${elementColors.dropdown_BorderColor}; font-size : 12px; font-weight : bold; padding : 0 8px; @@ -140,6 +174,7 @@ function styleGuide () { return { colors: colors, + elementColors: elementColors, dropdown: buttons['dropdown'], button: buttons['button'], inputField: textBoxes['input'], From 37cf211f7a8b61ade0d9e82578e34ce0328f1631 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Tue, 26 Sep 2017 04:52:01 +0100 Subject: [PATCH 05/16] Update style guide --- src/ui/styles/style-guide.js | 503 ++++++++++++++++++++++++++++++----- 1 file changed, 442 insertions(+), 61 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 1e4f271710..b26978f439 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -3,84 +3,446 @@ module.exports = styleGuide function styleGuide () { + /* -------------------------------------------------------------------------- - COLORS + + CSS PROPERTIES + -------------------------------------------------------------------------- */ - var colors = { + var css_properties = { + + /**************************** + COLORS + ************************** */ + colors: { + // BASIC COLORS (B&W and transparent) + transparent: 'transparent', + white: 'hsl(0, 0%, 100%)', + black: 'hsl(0, 0%, 0%)', + opacityBlack: 'hsla(0, 0%, 0%, .4)', + // BLUE + blue: 'hsla(229, 75%, 87%, 1)', + lightBlue: 'hsla(229, 75%, 87%, .5)', + backgroundBlue: 'hsla(229, 100%, 97%, 1)', + // GREY + grey: 'hsla(0, 0%, 40%, 1)', + lightGrey: 'hsla(0, 0%, 40%, .5)', + veryLightGrey: 'hsla(0, 0%, 40%, .2)', + // RED + red: 'hsla(0, 82%, 82%, 1)', + lightRed: 'hsla(0, 82%, 82%, .5)', + // GREEN + green: 'hsla(141, 75%, 84%, 1)', + lightGreen: 'hsla(141, 75%, 84%, .5)', + // PINK + pink: 'hsla(300, 69%, 76%, 1)', + lightPink: 'hsla(300, 69%, 76%, .5)', + // YELLOW + orange: 'hsla(44, 100%, 50%, 1)', + lightOrange: 'hsla(44, 100%, 50%, .5)', + // VIOLET + violet: 'hsla(240, 64%, 68%, 1)' + }, + + /**************************** + FONT + ************************** */ + fonts: { + }, + + /**************************** + BORDERS + ************************** */ + borders: {} + } + + /* -------------------------------------------------------------------------- + + APP PROPERTIES + + -------------------------------------------------------------------------- */ + + var app_properties = { + // BACKGROUND COLORS - general_BackgroundColor: 'hsl(0, 0%, 100%)', // white - highlight_BackgroundColor: 'hsla(229, 100%, 97%, 1)', // backgroundBlue + general_BackgroundColor: css_properties.colors.white, + support_BackgroundColor: css_properties.colors.backgroundBlue, // TEXT COLORS - mainText_Color: 'hsl(0, 0%, 0%)', // black - normalText_Color: 'hsla(0, 0%, 40%, 1)', // grey + mainText_Color: css_properties.colors.black, + supportText_Color: css_properties.colors.grey, // ICONS - icon_Color: 'hsl(0, 0%, 0%)', // black - icon_HoverColor: 'hsla(44, 100%, 50%, 1)', // orange + icon_Color: css_properties.colors.black, + icon_HoverColor: css_properties.colors.orange, // UI ELEMENTS - element_TextColor: 'hsl(0, 0%, 0%)', // black , - element_BackgroundColor: 'hsl(0, 0%, 100%)', // white - element_BorderColor: 'hsla(0, 0%, 40%, .2)', // very light grey + element_TextColor: css_properties.colors.black, + element_BackgroundColor: css_properties.colors.white, + element_BorderColor: css_properties.colors.veryLightGrey -/* -1. most css properties can take many or infinite amounf of different values -=> so we define a set of concrete values that we use: -- variable just for plain colors (later also fonts, widths, paddings, border radiuses...) + } -2. we define certain semantic names that make sense in the context of our app -=> so we can use the values used in (1.) e.g. like 'color_red' and assign it to e.g. -- highlightColor: color_red -- borderColor: color_white -- ... +/* -------------------------------------------------------------------------- -3. we define a nested object that represents the component hierarchy that -makes up our app and use semantic names defined under (2.) + REMIX PROPERTIES -*/ +-------------------------------------------------------------------------- */ + +var remix_properties = { + + /**************************** + REMIX GENERAL + ************************** */ + remix: { + fonts: { + 'font': '', + 'font-size': '', + mainText: { + 'color': '' + }, + supportText: { + 'color': '' + } + }, + dropdown: { + 'background-color': '', + 'color': '' + }, + textBox: { + 'background-color': '', + 'border': '', + 'color': '' + }, + infoTextBox: { + 'background-color': '', + 'border': '', + 'color': '' + }, + inputField: { + 'background-color': '', + 'color': '' + }, + butons: { + 'background-color': '' + }, + copyToClipboard: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + } + }, + + /**************************** + LEFT PANEL (FILE PANEL) + ************************** */ + leftPanel: { + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + togglePannel: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + treeview: { + color: app_properties.mainText_Color, + highlightedLine: { + background: app_properties.support_BackgroundColor + } + } + }, - // BASIC COLORS (B&W and transparent) - transparent: 'transparent', - white: 'hsl(0, 0%, 100%)', - black: 'hsl(0, 0%, 0%)', - opacityBlack: 'hsla(0, 0%, 0%, .4)', - // BLUE - blue: 'hsla(229, 75%, 87%, 1)', - lightBlue: 'hsla(229, 75%, 87%, .5)', - backgroundBlue: 'hsla(229, 100%, 97%, 1)', - // GREY - grey: 'hsla(0, 0%, 40%, 1)', - lightGrey: 'hsla(0, 0%, 40%, .5)', - veryLightGrey: 'hsla(0, 0%, 40%, .2)', - // RED - red: 'hsla(0, 82%, 82%, 1)', - lightRed: 'hsla(0, 82%, 82%, .5)', - // GREEN - green: 'hsla(141, 75%, 84%, 1)', - lightGreen: 'hsla(141, 75%, 84%, .5)', - // PINK - pink: 'hsla(300, 69%, 76%, 1)', - lightPink: 'hsla(300, 69%, 76%, .5)', - // YELLOW - orange: 'hsla(44, 100%, 50%, 1)', - lightOrange: 'hsla(44, 100%, 50%, .5)', - // VIOLET - violet: 'hsla(240, 64%, 68%, 1)' + /**************************** + EDITOR + ************************** */ + editor: { + 'background-color': '', // general_BackgroundColor + 'color': '', // fonts/color + gutter: { + background: app_properties.support_BackgroundColor, + highlightedNumber: { + background: app_properties.support_BackgroundColor // support_BackgroundColor + }, + }, + navTabs: { + background: app_properties.support_BackgroundColor, + 'color': '' // fonts/color + }, + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + code: { + // types, comments, parameters... + highlightedLine: { + background: app_properties.support_BackgroundColor //support_BackgroundColor + }, + debuggerMode: { + highlightedArea: { + background: app_properties.support_BackgroundColor // same as Debug button in Terminal window + } + } + } + }, + + /**************************** + TERMINAL + ************************** */ + terminal: { + menu: { + background: app_properties.support_BackgroundColor, + 'color': '', // fonts/color + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + dropdown: { // dropdown + 'background-color': '', + 'color': '' + }, + togglePannel: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + }, + terminalWindow: { + 'background-color': '', + 'color': '', + logo: { + 'url': '', + }, + infoLog: { + 'color': '' // fonts/color + }, + errorLog: { + 'color': '' // same as border in errorMessage in rightPanel/compileTab @TODO + }, + transactionLog: { + title: { + 'color': '' + }, + text: { + 'color': '' + }, + detailsButton: { + 'background-color': '', + 'color': '' + }, + debugButton: { + background: app_properties.support_BackgroundColor, + 'color': '' + } + } + } + }, + + /**************************** + RIGHT PANEL + ************************** */ + rightPanel: { + 'background-color': '', // already defined in Remix general + 'color': '', // already defined in Remix general + textBox: { // already defined in Remix general + 'background-color': '', + 'border': '', + 'color': '' + }, + infoTextBox: { // already defined in Remix general + 'background-color': '', + 'border': '', + 'color': '' + }, + togglePannel: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + logo: { + 'url': '' + }, + warningMessage: { + 'border': '', + 'background-color': '', + 'color': '' + }, + errorMessage: { + 'border': '', // same as font color in terminal error @TODO + 'background-color': '', + 'color': '' + }, + successMessage: { + 'border': '', + 'background-color': '', + 'color': '' + }, + dropdown: { + 'background-color': '', // dropdown + 'color': '' + }, + inputField: { // inputField + 'background-color': '', + 'color': '' + }, + + compileTab: { + compileButton: { + 'background-color': '', // or import a special image 'url': '' + 'color': '' + }, + buttons: { + 'background-color': '', // general buttons background color + 'color': '' + }, + details: { + 'background-color': '', // already defined in Remix general + header: { + background: app_properties.support_BackgroundColor, + 'color': '' + }, + infoTextBox: { // already in rightPanel general theme + 'background-color': '', + 'border': '', + 'color': '', + copyToClipboard: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + }, + title: { + 'color': '' + } + } + } + }, + + runTab: { + compileButton: { + 'background-color': '', // or import new 'url': '' + 'color': '' + }, + atAddressButton: { + 'background-color': '', + 'color': '' + }, + createButton: { + 'background-color': '', + 'color': '' + }, + instance_callButton: { + 'background-color': '', + 'color': '' + }, + instance_transactButton: { + 'background-color': '', + 'color': '' + }, + instance_transactPayableButton: { + 'background-color': '', + 'color': '' + }, + copyToClipboard: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + } + }, + + settingsTab: { + infoTextBox: { // already in rightPanel general theme + 'background-color': '', + 'border': '', + 'color': '' + } + }, + + debuggerTab: { + buttons: { + 'background-color': '', // including eye button (needs to get ${styles.button} applied) + 'color': '', + icons: { + color: app_properties.icon_Color, + hover: { + color: app_properties.icon_Color + } + } + }, + dropdowns: { // dropdown + 'background-color': '', // see if ${styles.dropdown} is applied + 'color': '', + instructions: { + highlightedKey: { + background: app_properties.support_BackgroundColor + } + }, + solidityState: { + label: { + 'color': '' // supportText + } + } + } + }, + + analysisTab: { + textBox: { // already in rightPanel general theme + 'background-color': '', + 'color': '' + }, + warningMessage: { // already in rightPanel general theme + 'border': '', + 'background-color': '', + 'color': '' + } + }, + + supportTab: { + textBox: { // already in rightPanel general theme + 'background-color': '', + 'color': '' + }, + infoTextBox: { // already in rightPanel general theme + 'background-color': '', + 'border': '', + 'color': '' + } + } } +} + + var elementColors = { /* ----------------------- BUTTONS ----------------------- */ // DROPDOWN - dropdown_TextColor: colors.element_TextColor, - dropdown_BackgroundColor: colors.element_BackgroundColor, - dropdown_BorderColor: colors.element_BorderColor, + dropdown_TextColor: app_properties.element_TextColor, + dropdown_BackgroundColor: app_properties.element_BackgroundColor, + dropdown_BorderColor: app_properties.element_BorderColor, // BUTTON - button_TextColor: colors.element_TextColor, - button_BorderColor: colors.element_BorderColor, + button_TextColor: app_properties.element_TextColor, + button_BorderColor: app_properties.element_BorderColor, rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' @@ -97,18 +459,18 @@ var elementColors = { font-size : 12px; padding : 10px 15px; line-height : 20px; - background : ${colors.white}; + background : ${css_properties.colors.white}; border-radius : 3px; - border : 1px solid ${colors.veryLightGrey}; + border : 1px solid ${css_properties.colors.veryLightGrey}; overflow : hidden; word-break : break-word; width : 100%; `, 'info-text-box': ` - background-color : ${colors.white}; + background-color : ${css_properties.colors.white}; line-height : 20px; - border : .2em dotted ${colors.lightGrey}; + border : .2em dotted ${css_properties.colors.lightGrey}; padding : 8px 15px; border-radius : 5px; margin-bottom : 1em; @@ -117,7 +479,7 @@ var elementColors = { `, 'input': ` - border : 1px solid ${colors.veryLightGrey}; + border : 1px solid ${css_properties.colors.veryLightGrey}; height : 25px; width : 250px; border-radius : 3px; @@ -173,7 +535,7 @@ var elementColors = { } return { - colors: colors, + colors: css_properties.colors, elementColors: elementColors, dropdown: buttons['dropdown'], button: buttons['button'], @@ -182,3 +544,22 @@ var elementColors = { displayBox: textBoxes['display-box'] } } + +/* + +COMMENTS + +1. most css properties can take many or infinite amounf of different values +=> so we define a set of concrete values that we use: +- variable just for plain colors (later also fonts, widths, paddings, border radiuses...) + +2. we define certain semantic names that make sense in the context of our app +=> so we can use the values used in (1.) e.g. like 'color_red' and assign it to e.g. +- highlightColor: color_red +- borderColor: color_white +- ... + +3. we define a nested object that represents the component hierarchy that +makes up our app and use semantic names defined under (2.) + +*/ From 41d488961d0ad5c7e785f764fb07746013ed7fcd Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Wed, 27 Sep 2017 04:13:26 +0100 Subject: [PATCH 06/16] Update style guide --- src/ui/styles/style-guide.js | 324 ++++++++++++++++++++++------------- 1 file changed, 202 insertions(+), 122 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index b26978f439..3b49f997b0 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -48,12 +48,15 @@ function styleGuide () { FONT ************************** */ fonts: { + font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', }, /**************************** BORDERS ************************** */ - borders: {} + borders: { + borderRadius: '3px' + } } /* -------------------------------------------------------------------------- @@ -76,11 +79,72 @@ function styleGuide () { icon_Color: css_properties.colors.black, icon_HoverColor: css_properties.colors.orange, - // UI ELEMENTS + // UI ELEMENTS (dropdown, input) element_TextColor: css_properties.colors.black, element_BackgroundColor: css_properties.colors.white, - element_BorderColor: css_properties.colors.veryLightGrey - + element_BorderColor: css_properties.colors.veryLightGrey, + + // DROPDOWN + dropdown_TextColor: css_properties.colors.black, + dropdown_BackgroundColor: css_properties.colors.white, + dropdown_BorderColor: css_properties.colors.veryLightGrey, + + // INPUT + input_TextColor: css_properties.colors.black, + input_BackgroundColor: css_properties.colors.white, + input_BorderColor: css_properties.colors.veryLightGrey, + + // INFO BOX + infoBox_TextColor: css_properties.colors.black, + infoBox_BackgroundColor: css_properties.colors.white, + infoBox_BorderColor: css_properties.colors.veryLightGrey, + + // BUTTONS + // Compile Tab (Right panel) + compileButton_TextColor: css_properties.colors.black, + compileButton_BackgroundColor: css_properties.colors.veryLightGrey, + compileButton_BorderColor: css_properties.colors.veryLightGrey, + + detailsButton_TextColor: css_properties.colors.black, + detailsButton_BackgroundColor: css_properties.colors.veryLightGrey, + detailsButton_BorderColor: css_properties.colors.veryLightGrey, + + publishButton_TextColor: css_properties.colors.black, + publishButton_BackgroundColor: css_properties.colors.veryLightGrey, + publishButton_BorderColor: css_properties.colors.veryLightGrey, + + // Run Tab (Right panel) + atAddressButton_TextColor: css_properties.colors.black, + atAddressButton_BackgroundColor: css_properties.colors.lightGreen, + atAddressButton_BorderColor: css_properties.colors.lightGreen, + + createButton_TextColor: css_properties.colors.black, + createButton_BackgroundColor: css_properties.colors.lightRed, + createButton_BorderColor: css_properties.colors.lightRed, + + instance_callButton_TextColor: css_properties.colors.black , + instance_callButton_BackgroundColor: css_properties.colors.lightBlue, + instance_callButton_BorderColor: css_properties.colors.lightBlue, + + instance_transactButton_TextColor: css_properties.colors.black, + instance_transactButton_BackgroundColor: css_properties.colors.lightRed, + instance_transactButton_BorderColor: css_properties.colors.lightRed, + + instance_transactPayableButton_TextColor: css_properties.colors.black, + instance_transactPayableButton_BackgroundColor: css_properties.colors.red, + instance_transactPayableButton_BorderColor: css_properties.colors.red, + + // Debugger Tab (Right panel) + debuggerButton_TextColor: css_properties.colors.black, + debuggerButton_BackgroundColor: css_properties.colors.veryLightGrey, + debuggerButton_BorderColor: css_properties.colors.veryLightGrey, + + // Analysis Tab (Right panel) + runButton_TextColor: css_properties.colors.black, + runButton_BackgroundColor: css_properties.colors.veryLightGrey, + runButton_BorderColor: css_properties.colors.veryLightGrey, + + // Support Tab (Right panel) } /* -------------------------------------------------------------------------- @@ -95,36 +159,36 @@ var remix_properties = { REMIX GENERAL ************************** */ remix: { - fonts: { - 'font': '', - 'font-size': '', + text: { + font: css_properties.fonts.font, mainText: { - 'color': '' + color: app_properties.mainText_Color }, supportText: { - 'color': '' + color: app_properties.supportText_Color } }, + general_BackgroundColor: app_properties.general_BackgroundColor, + support_BackgroundColor: app_properties.support_BackgroundColor, dropdown: { - 'background-color': '', - 'color': '' + background: app_properties.dropdown_BackgroundColor, + border: app_properties.dropdown_BorderColor, + color: app_properties.dropdown_TextColor }, textBox: { - 'background-color': '', - 'border': '', - 'color': '' + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor }, infoTextBox: { - 'background-color': '', - 'border': '', - 'color': '' + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor }, inputField: { - 'background-color': '', - 'color': '' - }, - butons: { - 'background-color': '' + background: app_properties.input_BackgroundColor, + border: app_properties.input_BorderColor, + color: app_properties.input_TextColor }, copyToClipboard: { color: app_properties.icon_Color, @@ -162,8 +226,8 @@ var remix_properties = { EDITOR ************************** */ editor: { - 'background-color': '', // general_BackgroundColor - 'color': '', // fonts/color + background: app_properties.general_BackgroundColor, + color: app_properties.mainText_Color, gutter: { background: app_properties.support_BackgroundColor, highlightedNumber: { @@ -172,7 +236,7 @@ var remix_properties = { }, navTabs: { background: app_properties.support_BackgroundColor, - 'color': '' // fonts/color + color: app_properties.mainText_Color, }, icons: { color: app_properties.icon_Color, @@ -181,7 +245,6 @@ var remix_properties = { } }, code: { - // types, comments, parameters... highlightedLine: { background: app_properties.support_BackgroundColor //support_BackgroundColor }, @@ -199,16 +262,17 @@ var remix_properties = { terminal: { menu: { background: app_properties.support_BackgroundColor, - 'color': '', // fonts/color + color: app_properties.mainText_Color, icons: { color: app_properties.icon_Color, hover: { color: app_properties.icon_Color } }, - dropdown: { // dropdown - 'background-color': '', - 'color': '' + dropdown: { + background: app_properties.dropdown_BackgroundColor, + border: app_properties.dropdown_BorderColor, + color: app_properties.dropdown_TextColor }, togglePannel: { color: app_properties.icon_Color, @@ -218,8 +282,8 @@ var remix_properties = { }, }, terminalWindow: { - 'background-color': '', - 'color': '', + background: css_properties.colors.veryLightGrey, + color: '', logo: { 'url': '', }, @@ -252,17 +316,17 @@ var remix_properties = { RIGHT PANEL ************************** */ rightPanel: { - 'background-color': '', // already defined in Remix general - 'color': '', // already defined in Remix general - textBox: { // already defined in Remix general - 'background-color': '', - 'border': '', - 'color': '' + background: app_properties.general_BackgroundColor, + color: app_properties.mainText_Color, + textBox: { + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor }, - infoTextBox: { // already defined in Remix general - 'background-color': '', - 'border': '', - 'color': '' + infoTextBox: { + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor }, togglePannel: { color: app_properties.icon_Color, @@ -289,33 +353,42 @@ var remix_properties = { 'color': '' }, dropdown: { - 'background-color': '', // dropdown - 'color': '' + background: app_properties.dropdown_BackgroundColor, + border: app_properties.dropdown_BorderColor, + color: app_properties.dropdown_TextColor }, - inputField: { // inputField - 'background-color': '', - 'color': '' + inputField: { + background: app_properties.input_BackgroundColor, + border: app_properties.input_BorderColor, + color: app_properties.input_TextColor }, compileTab: { compileButton: { - 'background-color': '', // or import a special image 'url': '' - 'color': '' + background: app_properties.compileButton_BackgroundColor, + border: app_properties.compileButton_BorderColor, + color: app_properties.compileButton_TextColor, }, - buttons: { - 'background-color': '', // general buttons background color - 'color': '' + detailsButton: { + background: app_properties.detailsButton_BackgroundColor, + border: app_properties.detailsButton_BorderColor, + color: app_properties.detailsButton_TextColor, }, - details: { - 'background-color': '', // already defined in Remix general + PublishButton: { + background: app_properties.publishButton_BackgroundColor, + border: app_properties.publishButton_BorderColor, + color: app_properties.publishButton_TextColor, + }, + detailsModalDialog: { + background: app_properties.general_BackgroundColor, header: { background: app_properties.support_BackgroundColor, - 'color': '' + color: app_properties.mainText_Color, }, infoTextBox: { // already in rightPanel general theme - 'background-color': '', - 'border': '', - 'color': '', + background: app_properties.element_BackgroundColor, + border: app_properties.element_BorderColor, + color: app_properties.element_TextColor, copyToClipboard: { color: app_properties.icon_Color, hover: { @@ -329,36 +402,37 @@ var remix_properties = { } }, title: { - 'color': '' + color: app_properties.mainText_Color } } } }, runTab: { - compileButton: { - 'background-color': '', // or import new 'url': '' - 'color': '' - }, atAddressButton: { - 'background-color': '', - 'color': '' + background: app_properties.atAddressButton_BackgroundColor, + border: app_properties.atAddressButton_BorderColor, + color: app_properties.atAddressButton_TextColor }, createButton: { - 'background-color': '', - 'color': '' + background: app_properties.createButton_BackgroundColor, + border: app_properties.createButton_BorderColor, + color: app_properties.createButton_TextColor }, instance_callButton: { - 'background-color': '', - 'color': '' + background: app_properties.instance_callButton_BackgroundColor, + border: app_properties.instance_callButton_BorderColor, + color: app_properties.instance_callButton_TextColor }, instance_transactButton: { - 'background-color': '', - 'color': '' + background: app_properties.instance_transactButton_BackgroundColor, + border: app_properties.instance_transactButton_BorderColor, + color: app_properties.instance_transactButton_TextColor }, instance_transactPayableButton: { - 'background-color': '', - 'color': '' + background: app_properties.instance_transactPayableButton_BackgroundColor, + border: app_properties.instance_transactPayableButton_BorderColor, + color: app_properties.instance_transactPayableButton_TextColor }, copyToClipboard: { color: app_properties.icon_Color, @@ -369,17 +443,18 @@ var remix_properties = { }, settingsTab: { - infoTextBox: { // already in rightPanel general theme - 'background-color': '', - 'border': '', - 'color': '' + infoTextBox: { + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor, } }, debuggerTab: { buttons: { - 'background-color': '', // including eye button (needs to get ${styles.button} applied) - 'color': '', + debuggerButton_TextColor: css_properties.colors.black, + debuggerButton_BackgroundColor: css_properties.colors.veryLightGrey, + debuggerButton_BorderColor: css_properties.colors.veryLightGrey, icons: { color: app_properties.icon_Color, hover: { @@ -387,9 +462,10 @@ var remix_properties = { } } }, - dropdowns: { // dropdown - 'background-color': '', // see if ${styles.dropdown} is applied - 'color': '', + dropdowns: { + background: app_properties.dropdown_BackgroundColor, + border: app_properties.dropdown_BorderColor, + color: app_properties.dropdown_TextColor, instructions: { highlightedKey: { background: app_properties.support_BackgroundColor @@ -397,16 +473,22 @@ var remix_properties = { }, solidityState: { label: { - 'color': '' // supportText + color: app_properties.supportText_Color } } } }, analysisTab: { + buttons: { + runButton_TextColor: css_properties.colors.black, + runButton_BackgroundColor: css_properties.colors.veryLightGrey, + runButton_BorderColor: css_properties.colors.veryLightGrey + }, textBox: { // already in rightPanel general theme - 'background-color': '', - 'color': '' + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor }, warningMessage: { // already in rightPanel general theme 'border': '', @@ -417,13 +499,14 @@ var remix_properties = { supportTab: { textBox: { // already in rightPanel general theme - 'background-color': '', - 'color': '' + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor }, infoTextBox: { // already in rightPanel general theme - 'background-color': '', - 'border': '', - 'color': '' + background: app_properties.infoBox_BackgroundColor, + border: app_properties.infoBox_BorderColor, + color: app_properties.infoBox_TextColor } } } @@ -436,9 +519,9 @@ var elementColors = { BUTTONS ----------------------- */ // DROPDOWN - dropdown_TextColor: app_properties.element_TextColor, - dropdown_BackgroundColor: app_properties.element_BackgroundColor, - dropdown_BorderColor: app_properties.element_BorderColor, + dropdown_TextColor: app_properties.dropdown_TextColor, + dropdown_BackgroundColor: app_properties.dropdown_BackgroundColor, + dropdown_BorderColor: app_properties.dropdown_BorderColor, // BUTTON button_TextColor: app_properties.element_TextColor, @@ -446,14 +529,11 @@ var elementColors = { rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' - /* ----------------------- - TEXT BOXES - ----------------------- */ } /* -------------------------------------------------------------------------- - TEXT-BOXES + UI ELEMENTS -------------------------------------------------------------------------- */ - var textBoxes = { + var uiElements = { 'display-box': ` font-size : 12px; @@ -486,6 +566,23 @@ var elementColors = { padding : 0 8px; overflow : hidden; word-break : normal; + `, + + 'dropdown': ` + color : ${css_properties.colors.black}; + background-color : ${css_properties.colors.white}; + border : 1px solid ${css_properties.colors.veryLightGrey}; + font-size : 12px; + font-weight : bold; + padding : 0 8px; + text-decoration : none; + cursor : pointer; + border-radius : 3px; + height : 25px; + width : 250px; + text-align : center; + overflow : hidden; + word-break : normal; ` } /* -------------------------------------------------------------------------- @@ -494,9 +591,9 @@ var elementColors = { var buttons = { 'button': ` - background-color : ${elementColors.button_BackgroundColor}; - border : .3px solid ${elementColors.button_BorderColor}; - color : ${elementColors.button_TextColor}; + background-color : ${css_properties.colors.veryLightGrey}; + border : .3px solid ${css_properties.colors.veryLightGrey}; + color : ${css_properties.colors.black}; display : flex; align-items : center; justify-content : center; @@ -513,23 +610,6 @@ var elementColors = { 'button:hover': ` opacity : 0.8; - `, - - 'dropdown': ` - color : ${elementColors.dropdown_TextColor}; - background-color : ${elementColors.dropdown_BackgroundColor}; - border : 1px solid ${elementColors.dropdown_BorderColor}; - font-size : 12px; - font-weight : bold; - padding : 0 8px; - text-decoration : none; - cursor : pointer; - border-radius : 3px; - height : 25px; - width : 250px; - text-align : center; - overflow : hidden; - word-break : normal; ` } @@ -537,11 +617,11 @@ var elementColors = { return { colors: css_properties.colors, elementColors: elementColors, - dropdown: buttons['dropdown'], + dropdown: uiElements['dropdown'], button: buttons['button'], - inputField: textBoxes['input'], - infoTextBox: textBoxes['info-text-box'], - displayBox: textBoxes['display-box'] + inputField: uiElements['input'], + infoTextBox: uiElements['info-text-box'], + displayBox: uiElements['display-box'] } } From c9ba4b5ae26e460a233d304d080a3b059161172c Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 28 Sep 2017 02:01:52 +0100 Subject: [PATCH 07/16] Update style guide - add app_properties to remix_properties --- src/ui/styles/style-guide.js | 294 +++++++++++++++++++++-------------- 1 file changed, 179 insertions(+), 115 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 3b49f997b0..ed1174a440 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -67,51 +67,128 @@ function styleGuide () { var app_properties = { - // BACKGROUND COLORS - general_BackgroundColor: css_properties.colors.white, - support_BackgroundColor: css_properties.colors.backgroundBlue, - - // TEXT COLORS + /**************************** + BACKGROUND COLORS + ************************** */ + primary_BackgroundColor: css_properties.colors.white, + secondary_BackgroundColor: css_properties.colors.backgroundBlue, + dark_BackgroundColor: css_properties.colors.veryLightGrey, + /**************************** + TEXT COLORS + ************************** */ mainText_Color: css_properties.colors.black, supportText_Color: css_properties.colors.grey, - - // ICONS + errorText_Color: css_properties.colors.red, + warningText_Color: css_properties.colors.orange, + /**************************** + ICONS + ************************** */ icon_Color: css_properties.colors.black, icon_HoverColor: css_properties.colors.orange, - // UI ELEMENTS (dropdown, input) - element_TextColor: css_properties.colors.black, - element_BackgroundColor: css_properties.colors.white, - element_BorderColor: css_properties.colors.veryLightGrey, + /**************************** + MESSAGES + ************************** */ + // success + success_TextColor: css_properties.colors.black, + success_BackgroundColor: css_properties.colors.lightGreen, + success_BorderColor: css_properties.colors.green, + + // danger + danger_TextColor: css_properties.colors.black, + danger_BackgroundColor: css_properties.colors.lightRed, + danger_BorderColor: css_properties.colors.red, + + // warning + warning_TextColor: css_properties.colors.black, + warning_BackgroundColor: css_properties.colors.lightOrange, + warning_BorderColor: css_properties.colors.orange, - // DROPDOWN + /**************************** + DROPDOWN + ************************** */ dropdown_TextColor: css_properties.colors.black, dropdown_BackgroundColor: css_properties.colors.white, dropdown_BorderColor: css_properties.colors.veryLightGrey, - // INPUT + /**************************** + INPUT + ************************** */ input_TextColor: css_properties.colors.black, input_BackgroundColor: css_properties.colors.white, input_BorderColor: css_properties.colors.veryLightGrey, - // INFO BOX + /**************************** + INFO BOX + ************************** */ infoBox_TextColor: css_properties.colors.black, infoBox_BackgroundColor: css_properties.colors.white, infoBox_BorderColor: css_properties.colors.veryLightGrey, - // BUTTONS - // Compile Tab (Right panel) - compileButton_TextColor: css_properties.colors.black, - compileButton_BackgroundColor: css_properties.colors.veryLightGrey, - compileButton_BorderColor: css_properties.colors.veryLightGrey, - - detailsButton_TextColor: css_properties.colors.black, - detailsButton_BackgroundColor: css_properties.colors.veryLightGrey, - detailsButton_BorderColor: css_properties.colors.veryLightGrey, + /**************************** + BUTTONS + ************************** */ - publishButton_TextColor: css_properties.colors.black, - publishButton_BackgroundColor: css_properties.colors.veryLightGrey, - publishButton_BorderColor: css_properties.colors.veryLightGrey, + /* ................. + PRIMARY + .................. */ + primaryButton_TextColor: css_properties.colors.white, + primaryButton_BackgroundColor: css_properties.colors.blue, + primaryButton_BorderColor: css_properties.colors.blue, + + /* ................. + SECONDARY + .................. */ + secondaryButton_TextColor: css_properties.colors.black, + secondaryButton_BackgroundColor: css_properties.colors.lightGrey, + secondaryButton_BorderColor: css_properties.colors.lightGrey, + + /* ................. + SUCCESS + .................. */ + successButton_TextColor: css_properties.colors.white, + successButton_BackgroundColor: css_properties.colors.green, + successButton_BorderColor: css_properties.colors.green, + + /* ................. + DANGER + .................. */ + dangerButton_TextColor: css_properties.colors.white, + dangerButton_BackgroundColor: css_properties.colors.red, + dangerButton_BorderColor: css_properties.colors.red, + + /* ................. + WARNING + .................. */ + warningButton_TextColor: css_properties.colors.white, + warningButton_BackgroundColor: css_properties.colors.orange, + warningButton_BorderColor: css_properties.colors.orange, + + /* ................. + INFO + .................. */ + infoButton_TextColor: css_properties.colors.black, + infoButton_BackgroundColor: css_properties.colors.white, + infoButton_BorderColor: css_properties.colors.veryLightGrey, + + /* ................. + SOLIDITY + .................. */ + + // CALL + callButton_TextColor: css_properties.colors.black, + callButton_BackgroundColor: css_properties.colors.white, + callButton_BorderColor: css_properties.colors.blue, + + // TRANSACTION + transactButton_TextColor: css_properties.colors.black, + transactButton_BackgroundColor: css_properties.colors.white, + transactButton_BorderColor: css_properties.colors.pink, + + // PAYABLE TRANSACTION + transactPayableButton_TextColor: css_properties.colors.black, + transactPayableButton_BackgroundColor: css_properties.colors.white, + transactPayableButton_BorderColor: css_properties.colors.violet, // Run Tab (Right panel) atAddressButton_TextColor: css_properties.colors.black, @@ -122,23 +199,6 @@ function styleGuide () { createButton_BackgroundColor: css_properties.colors.lightRed, createButton_BorderColor: css_properties.colors.lightRed, - instance_callButton_TextColor: css_properties.colors.black , - instance_callButton_BackgroundColor: css_properties.colors.lightBlue, - instance_callButton_BorderColor: css_properties.colors.lightBlue, - - instance_transactButton_TextColor: css_properties.colors.black, - instance_transactButton_BackgroundColor: css_properties.colors.lightRed, - instance_transactButton_BorderColor: css_properties.colors.lightRed, - - instance_transactPayableButton_TextColor: css_properties.colors.black, - instance_transactPayableButton_BackgroundColor: css_properties.colors.red, - instance_transactPayableButton_BorderColor: css_properties.colors.red, - - // Debugger Tab (Right panel) - debuggerButton_TextColor: css_properties.colors.black, - debuggerButton_BackgroundColor: css_properties.colors.veryLightGrey, - debuggerButton_BorderColor: css_properties.colors.veryLightGrey, - // Analysis Tab (Right panel) runButton_TextColor: css_properties.colors.black, runButton_BackgroundColor: css_properties.colors.veryLightGrey, @@ -168,8 +228,8 @@ var remix_properties = { color: app_properties.supportText_Color } }, - general_BackgroundColor: app_properties.general_BackgroundColor, - support_BackgroundColor: app_properties.support_BackgroundColor, + primary_BackgroundColor: app_properties.primary_BackgroundColor, + secondary_BackgroundColor: app_properties.secondary_BackgroundColor, dropdown: { background: app_properties.dropdown_BackgroundColor, border: app_properties.dropdown_BorderColor, @@ -217,7 +277,7 @@ var remix_properties = { treeview: { color: app_properties.mainText_Color, highlightedLine: { - background: app_properties.support_BackgroundColor + background: app_properties.secondary_BackgroundColor } } }, @@ -226,16 +286,16 @@ var remix_properties = { EDITOR ************************** */ editor: { - background: app_properties.general_BackgroundColor, + background: app_properties.primary_BackgroundColor, color: app_properties.mainText_Color, gutter: { - background: app_properties.support_BackgroundColor, + background: app_properties.secondary_BackgroundColor, highlightedNumber: { - background: app_properties.support_BackgroundColor // support_BackgroundColor + background: app_properties.secondary_BackgroundColor // secondary_BackgroundColor }, }, navTabs: { - background: app_properties.support_BackgroundColor, + background: app_properties.secondary_BackgroundColor, color: app_properties.mainText_Color, }, icons: { @@ -246,11 +306,11 @@ var remix_properties = { }, code: { highlightedLine: { - background: app_properties.support_BackgroundColor //support_BackgroundColor + background: app_properties.secondary_BackgroundColor //secondary_BackgroundColor }, debuggerMode: { highlightedArea: { - background: app_properties.support_BackgroundColor // same as Debug button in Terminal window + background: app_properties.secondary_BackgroundColor // same as Debug button in Terminal window } } } @@ -261,7 +321,7 @@ var remix_properties = { ************************** */ terminal: { menu: { - background: app_properties.support_BackgroundColor, + background: app_properties.secondary_BackgroundColor, color: app_properties.mainText_Color, icons: { color: app_properties.icon_Color, @@ -282,31 +342,32 @@ var remix_properties = { }, }, terminalWindow: { - background: css_properties.colors.veryLightGrey, - color: '', + background: app_properties.dark_BackgroundColor, logo: { - 'url': '', + url: '', }, infoLog: { - 'color': '' // fonts/color + color: app_properties.mainText_Color, }, errorLog: { - 'color': '' // same as border in errorMessage in rightPanel/compileTab @TODO + color: app_properties.errorText_Color, }, transactionLog: { title: { - 'color': '' + color: app_properties.warningText_Color, }, text: { - 'color': '' + color: app_properties.supportText_Color, }, detailsButton: { - 'background-color': '', - 'color': '' + background: app_properties.secondaryButton_BackgroundColor, + border: app_properties.secondaryButton_BorderColor, + color: app_properties.secondaryButton_TextColor }, debugButton: { - background: app_properties.support_BackgroundColor, - 'color': '' + background: app_properties.warningButton_BackgroundColor, + border: app_properties.warningButton_BorderColor, + color: app_properties.warningButton_TextColor } } } @@ -316,7 +377,7 @@ var remix_properties = { RIGHT PANEL ************************** */ rightPanel: { - background: app_properties.general_BackgroundColor, + background: app_properties.primary_BackgroundColor, color: app_properties.mainText_Color, textBox: { background: app_properties.infoBox_BackgroundColor, @@ -335,22 +396,22 @@ var remix_properties = { } }, logo: { - 'url': '' + url: '' }, warningMessage: { - 'border': '', - 'background-color': '', - 'color': '' + background: app_properties.warning_BackgroundColor, + border: app_properties.warning_BorderColor, + color: app_properties.warning_TextColor }, errorMessage: { - 'border': '', // same as font color in terminal error @TODO - 'background-color': '', - 'color': '' + background: app_properties.danger_BackgroundColor, + border: app_properties.danger_BorderColor, + color: app_properties.danger_TextColor }, successMessage: { - 'border': '', - 'background-color': '', - 'color': '' + background: app_properties.success_BackgroundColor, + border: app_properties.success_BorderColor, + color: app_properties.success_TextColor }, dropdown: { background: app_properties.dropdown_BackgroundColor, @@ -365,24 +426,24 @@ var remix_properties = { compileTab: { compileButton: { - background: app_properties.compileButton_BackgroundColor, - border: app_properties.compileButton_BorderColor, - color: app_properties.compileButton_TextColor, + background: app_properties.primaryButton_BackgroundColor, + border: app_properties.primaryButton_BorderColor, + color: app_properties.primaryButton_TextColor, }, detailsButton: { - background: app_properties.detailsButton_BackgroundColor, - border: app_properties.detailsButton_BorderColor, - color: app_properties.detailsButton_TextColor, + background: app_properties.secondaryButton_BackgroundColor, + border: app_properties.secondaryButton_BorderColor, + color: app_properties.secondaryButton_TextColor, }, PublishButton: { - background: app_properties.publishButton_BackgroundColor, - border: app_properties.publishButton_BorderColor, - color: app_properties.publishButton_TextColor, + background: app_properties.secondaryButton_BackgroundColor, + border: app_properties.secondaryButton_BorderColor, + color: app_properties.secondaryButton_TextColor, }, detailsModalDialog: { - background: app_properties.general_BackgroundColor, + background: app_properties.primary_BackgroundColor, header: { - background: app_properties.support_BackgroundColor, + background: app_properties.secondary_BackgroundColor, color: app_properties.mainText_Color, }, infoTextBox: { // already in rightPanel general theme @@ -419,20 +480,22 @@ var remix_properties = { border: app_properties.createButton_BorderColor, color: app_properties.createButton_TextColor }, - instance_callButton: { - background: app_properties.instance_callButton_BackgroundColor, - border: app_properties.instance_callButton_BorderColor, - color: app_properties.instance_callButton_TextColor - }, - instance_transactButton: { - background: app_properties.instance_transactButton_BackgroundColor, - border: app_properties.instance_transactButton_BorderColor, - color: app_properties.instance_transactButton_TextColor - }, - instance_transactPayableButton: { - background: app_properties.instance_transactPayableButton_BackgroundColor, - border: app_properties.instance_transactPayableButton_BorderColor, - color: app_properties.instance_transactPayableButton_TextColor + instanceButtons: { + callButton: { + background: app_properties.callButton_BackgroundColor, + border: app_properties.callButton_BorderColor, + color: app_properties.callButton_TextColor + }, + transactButton: { + background: app_properties.transactButton_BackgroundColor, + border: app_properties.transactButton_BorderColor, + color: app_properties.transactButton_TextColor + }, + transactPayableButton: { + background: app_properties.transactPayableButton_BackgroundColor, + border: app_properties.transactPayableButton_BorderColor, + color: app_properties.transactPayableButton_TextColor + } }, copyToClipboard: { color: app_properties.icon_Color, @@ -452,9 +515,9 @@ var remix_properties = { debuggerTab: { buttons: { - debuggerButton_TextColor: css_properties.colors.black, - debuggerButton_BackgroundColor: css_properties.colors.veryLightGrey, - debuggerButton_BorderColor: css_properties.colors.veryLightGrey, + debuggerButton_TextColor: app_properties.secondaryButton_TextColor, + debuggerButton_BackgroundColor: app_properties.secondaryButton_BackgroundColor, + debuggerButton_BorderColor: app_properties.secondaryButton_BorderColor, icons: { color: app_properties.icon_Color, hover: { @@ -468,7 +531,7 @@ var remix_properties = { color: app_properties.dropdown_TextColor, instructions: { highlightedKey: { - background: app_properties.support_BackgroundColor + background: app_properties.secondary_BackgroundColor } }, solidityState: { @@ -481,9 +544,9 @@ var remix_properties = { analysisTab: { buttons: { - runButton_TextColor: css_properties.colors.black, - runButton_BackgroundColor: css_properties.colors.veryLightGrey, - runButton_BorderColor: css_properties.colors.veryLightGrey + runButton_TextColor: app_properties.primaryButton_TextColor, + runButton_BackgroundColor: app_properties.primaryButton_BackgroundColor, + runButton_BorderColor: app_properties.primaryButton_BorderColor }, textBox: { // already in rightPanel general theme background: app_properties.infoBox_BackgroundColor, @@ -491,9 +554,9 @@ var remix_properties = { color: app_properties.infoBox_TextColor }, warningMessage: { // already in rightPanel general theme - 'border': '', - 'background-color': '', - 'color': '' + background: app_properties.warning_BackgroundColor, + border: app_properties.warning_BorderColor, + color: app_properties.warning_TextColor } }, @@ -519,13 +582,13 @@ var elementColors = { BUTTONS ----------------------- */ // DROPDOWN - dropdown_TextColor: app_properties.dropdown_TextColor, - dropdown_BackgroundColor: app_properties.dropdown_BackgroundColor, - dropdown_BorderColor: app_properties.dropdown_BorderColor, + dropdown_TextColor: css_properties.colors.black, + dropdown_BackgroundColor: css_properties.colors.white, + dropdown_BorderColor: css_properties.colors.veryLightGrey, // BUTTON - button_TextColor: app_properties.element_TextColor, - button_BorderColor: app_properties.element_BorderColor, + button_TextColor: css_properties.element_TextColor, + button_BorderColor: css_properties.colors.veryLightGrey, rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' @@ -591,6 +654,7 @@ var elementColors = { var buttons = { 'button': ` + margin : 1px; background-color : ${css_properties.colors.veryLightGrey}; border : .3px solid ${css_properties.colors.veryLightGrey}; color : ${css_properties.colors.black}; From e1f21f31a8103aa7d8a0a5355059c871e194e200 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Fri, 29 Sep 2017 04:21:48 +0100 Subject: [PATCH 08/16] Update style guide - RightPanel etc. --- src/ui/styles/style-guide.js | 528 ++++++++++++++++++++--------------- 1 file changed, 308 insertions(+), 220 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index ed1174a440..1688b57771 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -55,7 +55,8 @@ function styleGuide () { BORDERS ************************** */ borders: { - borderRadius: '3px' + primary_borderRadius: '3px', + secondary_borderRadius: '5px' } } @@ -73,6 +74,11 @@ function styleGuide () { primary_BackgroundColor: css_properties.colors.white, secondary_BackgroundColor: css_properties.colors.backgroundBlue, dark_BackgroundColor: css_properties.colors.veryLightGrey, + /**************************** + RESIZING + ************************** */ + ghostBar: css_properties.colors.lightBlue, + draggingBar: css_properties.colors.lightBlue, /**************************** TEXT COLORS ************************** */ @@ -89,17 +95,17 @@ function styleGuide () { /**************************** MESSAGES ************************** */ - // success + // Success success_TextColor: css_properties.colors.black, success_BackgroundColor: css_properties.colors.lightGreen, success_BorderColor: css_properties.colors.green, - // danger + // Danger danger_TextColor: css_properties.colors.black, danger_BackgroundColor: css_properties.colors.lightRed, danger_BorderColor: css_properties.colors.red, - // warning + // Warning warning_TextColor: css_properties.colors.black, warning_BackgroundColor: css_properties.colors.lightOrange, warning_BorderColor: css_properties.colors.orange, @@ -119,11 +125,11 @@ function styleGuide () { input_BorderColor: css_properties.colors.veryLightGrey, /**************************** - INFO BOX + SOLID BORDER BOX ************************** */ - infoBox_TextColor: css_properties.colors.black, - infoBox_BackgroundColor: css_properties.colors.white, - infoBox_BorderColor: css_properties.colors.veryLightGrey, + solidBorderBox_TextColor: css_properties.colors.black, + solidBorderBox_BackgroundColor: css_properties.colors.violet, + solidBorderBox_BorderColor: css_properties.colors.veryLightGrey, /**************************** BUTTONS @@ -190,6 +196,7 @@ function styleGuide () { transactPayableButton_BackgroundColor: css_properties.colors.white, transactPayableButton_BorderColor: css_properties.colors.violet, + // Run Tab (Right panel) atAddressButton_TextColor: css_properties.colors.black, atAddressButton_BackgroundColor: css_properties.colors.lightGreen, @@ -204,8 +211,84 @@ function styleGuide () { runButton_BackgroundColor: css_properties.colors.veryLightGrey, runButton_BorderColor: css_properties.colors.veryLightGrey, - // Support Tab (Right panel) - } + /**************************** + UI ELEMENTS + ************************** */ + + uiElements: { + + solidBorderBox: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${css_properties.borders.primary_borderRadius}; + font-size : 12px; + padding : 10px 15px; + line-height : 20px; + overflow : hidden; + word-break : break-word; + width : 100%; + `, + + dottedBorderBox: (opts = {}) => ` + background-color : ${opts.BackgroundColor}}; + border : .2em dotted ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${css_properties.borders.secondary_borderRadius}; + line-height : 20px; + padding : 8px 15px; + margin-bottom : 1em; + overflow : hidden; + word-break : break-word; + `, + + inputField: (opts = {}) =>` + border : 1px solid ${css_properties.colors.veryLightGrey}; + height : 25px; + width : 250px; + border-radius : 3px; + padding : 0 8px; + overflow : hidden; + word-break : normal; + `, + + dropdown: (opts = {}) => ` + background-color : ${opts.BackgroundColor}}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + font-size : 12px; + font-weight : bold; + padding : 0 8px; + text-decoration : none; + cursor : pointer; + border-radius : 3px; + height : 25px; + width : 250px; + text-align : center; + overflow : hidden; + word-break : normal; + `, + + button: (opts = {}) => ` + margin : 1px; + background-color : ${css_properties.colors.veryLightGrey}; + border : .3px solid ${css_properties.colors.veryLightGrey}; + color : ${css_properties.colors.black}; + display : flex; + align-items : center; + justify-content : center; + border-radius : 3px; + cursor : pointer; + min-height : 25px; + max-height : 25px; + width : 70px; + min-width : 70px; + font-size : 12px; + overflow : hidden; + word-break : normal; + ` + } +} /* -------------------------------------------------------------------------- @@ -235,15 +318,15 @@ var remix_properties = { border: app_properties.dropdown_BorderColor, color: app_properties.dropdown_TextColor }, - textBox: { - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor + solidBorderBox: { + background: app_properties.solidBorderBox_BackgroundColor, + border: app_properties.solidBorderBox_BorderColor, + color: app_properties.solidBorderBox_TextColor }, infoTextBox: { - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor + background: app_properties.solidBorderBox_BackgroundColor, + border: app_properties.solidBorderBox_BorderColor, + color: app_properties.solidBorderBox_TextColor }, inputField: { background: app_properties.input_BackgroundColor, @@ -323,6 +406,11 @@ var remix_properties = { menu: { background: app_properties.secondary_BackgroundColor, color: app_properties.mainText_Color, + inputField: { + background: app_properties.input_BackgroundColor, + border: app_properties.input_BorderColor, + color: app_properties.input_TextColor + }, icons: { color: app_properties.icon_Color, hover: { @@ -377,203 +465,203 @@ var remix_properties = { RIGHT PANEL ************************** */ rightPanel: { - background: app_properties.primary_BackgroundColor, - color: app_properties.mainText_Color, - textBox: { - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor - }, - infoTextBox: { - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor - }, - togglePannel: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - logo: { - url: '' - }, - warningMessage: { - background: app_properties.warning_BackgroundColor, - border: app_properties.warning_BorderColor, - color: app_properties.warning_TextColor - }, - errorMessage: { - background: app_properties.danger_BackgroundColor, - border: app_properties.danger_BorderColor, - color: app_properties.danger_TextColor - }, - successMessage: { - background: app_properties.success_BackgroundColor, - border: app_properties.success_BorderColor, - color: app_properties.success_TextColor - }, - dropdown: { - background: app_properties.dropdown_BackgroundColor, - border: app_properties.dropdown_BorderColor, - color: app_properties.dropdown_TextColor - }, - inputField: { - background: app_properties.input_BackgroundColor, - border: app_properties.input_BorderColor, - color: app_properties.input_TextColor - }, + backgroundColor_Panel: app_properties.primary_BackgroundColor, + backgroundColor_Tab: app_properties.secondary_BackgroundColor, + + text_Primary: app_properties.mainText_Color, + text_Secondary: app_properties.supportText_Color, + + bar_Ghost: app_properties.ghostBar, + bar_Dragging: app_properties.draggingBar, + + icon_Color_TogglePanel: app_properties.icon_Color, + icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, + + /* :::::::::::::: + COMPILE TAB + ::::::::::::::: */ compileTab: { - compileButton: { - background: app_properties.primaryButton_BackgroundColor, - border: app_properties.primaryButton_BorderColor, - color: app_properties.primaryButton_TextColor, - }, - detailsButton: { - background: app_properties.secondaryButton_BackgroundColor, - border: app_properties.secondaryButton_BorderColor, - color: app_properties.secondaryButton_TextColor, - }, - PublishButton: { - background: app_properties.secondaryButton_BackgroundColor, - border: app_properties.secondaryButton_BorderColor, - color: app_properties.secondaryButton_TextColor, - }, - detailsModalDialog: { - background: app_properties.primary_BackgroundColor, - header: { - background: app_properties.secondary_BackgroundColor, - color: app_properties.mainText_Color, - }, - infoTextBox: { // already in rightPanel general theme - background: app_properties.element_BackgroundColor, - border: app_properties.element_BorderColor, - color: app_properties.element_TextColor, - copyToClipboard: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - icons: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - title: { - color: app_properties.mainText_Color - } - } - } + + button_Compile_BackgroundColor: app_properties.primaryButton_BackgroundColor, + button_Compile_BorderColor: app_properties.primaryButton_BorderColor, + button_Compile_Color: app_properties.primaryButton_TextColor, + + button_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor, + button_Details_BorderColor: app_properties.secondaryButton_BorderColor, + button_Details_Color: app_properties.secondaryButton_TextColor, + + button_Publish_BackgroundColor: app_properties.secondaryButton_BackgroundColor, + button_Publish_BorderColor: app_properties.secondaryButton_BorderColor, + button_Publish_Color: app_properties.secondaryButton_TextColor, + + compileContract_Dropdown: app_properties.uiElements.dropdown({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + compileContainerBox: app_properties.uiElements.solidBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + modalDialog_Details_BackgroundColor_Primary: app_properties.primary_BackgroundColor, + modalDialog_Details_Header_BackgroundColor: app_properties.secondary_BackgroundColor, + modalDialog_Details_Header_Color: app_properties.mainText_Color, + modalDialog_Details_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + modalDialog_Details_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor, + modalDialog_Details_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor, + modalDialog_Details_CopyToClipboard_Icon_Color: app_properties.icon_Color, + modalDialog_Details_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor, + + message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, + message_Warning_BorderColor: app_properties.warning_BorderColor, + message_Warning_Color: app_properties.warning_TextColor, + + message_Error_BackgroundColor: app_properties.danger_BackgroundColor, + message_Error_BorderColor: app_properties.danger_BorderColor, + message_Error_Color: app_properties.danger_TextColor, + + message_Success_BackgroundColor: app_properties.success_BackgroundColor, + message_Success_BorderColor: app_properties.success_BorderColor, + message_Success_Color: app_properties.success_TextColor, + }, + /* :::::::::::::: + RUN TAB + ::::::::::::::: */ runTab: { - atAddressButton: { - background: app_properties.atAddressButton_BackgroundColor, - border: app_properties.atAddressButton_BorderColor, - color: app_properties.atAddressButton_TextColor - }, - createButton: { - background: app_properties.createButton_BackgroundColor, - border: app_properties.createButton_BorderColor, - color: app_properties.createButton_TextColor - }, - instanceButtons: { - callButton: { - background: app_properties.callButton_BackgroundColor, - border: app_properties.callButton_BorderColor, - color: app_properties.callButton_TextColor - }, - transactButton: { - background: app_properties.transactButton_BackgroundColor, - border: app_properties.transactButton_BorderColor, - color: app_properties.transactButton_TextColor - }, - transactPayableButton: { - background: app_properties.transactPayableButton_BackgroundColor, - border: app_properties.transactPayableButton_BorderColor, - color: app_properties.transactPayableButton_TextColor - } - }, - copyToClipboard: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - } + + instanceBox: app_properties.uiElements.solidBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + runTab_Dropdown: app_properties.uiElements.dropdown({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + inputField_BackgroundColor: app_properties.input_BackgroundColor, + inputField_BorderColor: app_properties.input_BorderColor, + inputField_Color: app_properties.input_TextColor, + + atAddressButton_BackgroundColor: app_properties.atAddressButton_BackgroundColor, + atAddressButton_BorderColor: app_properties.atAddressButton_BorderColor, + atAddressButton_Color: app_properties.atAddressButton_TextColor, + + createButton_BackgroundColor: app_properties.createButton_BackgroundColor, + createButton_BorderColor: app_properties.createButton_BorderColor, + createButton_Color: app_properties.createButton_TextColor, + + instanceButtons_Call_BackgroundColor: app_properties.callButton_BackgroundColor, + instanceButtons_Call_BorderColor: app_properties.callButton_BorderColor, + instanceButtons_Call_Color: app_properties.callButton_TextColor, + + instanceButtons_Transact_BackgroundColor: app_properties.transactButton_BackgroundColor, + instanceButtons_Transact_BorderColor: app_properties.transactButton_BorderColor, + instanceButtons_Transact_Color: app_properties.transactButton_TextColor, + + instanceButtons_transactPayable_BackgroundColor: app_properties.transactPayableButton_BackgroundColor, + instanceButtons_transactPayable_BorderColor: app_properties.transactPayableButton_BorderColor, + instanceButtons_transactPayable_Color: app_properties.transactPayableButton_TextColor, + + instance_copyToClipboard_Icon_Color: app_properties.icon_Color, + instance_copyToClipboard_Icon__HoverColor: app_properties.icon_HoverColor, + }, + /* :::::::::::::: + SETTINGS TAB + ::::::::::::::: */ settingsTab: { - infoTextBox: { - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor, - } + + solidityVersionInfoBox: app_properties.uiElements.dottedBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + selectCompiler_Dropdown: app_properties.uiElements.dropdown({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + }, + /* :::::::::::::: + DEBUGGER TAB + ::::::::::::::: */ debuggerTab: { - buttons: { - debuggerButton_TextColor: app_properties.secondaryButton_TextColor, - debuggerButton_BackgroundColor: app_properties.secondaryButton_BackgroundColor, - debuggerButton_BorderColor: app_properties.secondaryButton_BorderColor, - icons: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - } - }, - dropdowns: { - background: app_properties.dropdown_BackgroundColor, - border: app_properties.dropdown_BorderColor, - color: app_properties.dropdown_TextColor, - instructions: { - highlightedKey: { - background: app_properties.secondary_BackgroundColor - } - }, - solidityState: { - label: { - color: app_properties.supportText_Color - } - } - } + + button_Debugger_BackgroundColor: app_properties.secondaryButton_BackgroundColor, + button_Debugger_BorderColor: app_properties.secondaryButton_BorderColor, + button_Debugger_Color: app_properties.secondaryButton_TextColor, + + button_Debugger_icon_Color: app_properties.icon_Color, + button_Debugger_icon_HoverColor: app_properties.icon_HoverColor, + + debuggerDropdown: app_properties.uiElements.dropdown({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + inputField_BackgroundColor: app_properties.input_BackgroundColor, + inputField_BorderColor: app_properties.input_BorderColor, + inputField_Color: app_properties.input_TextColor, + + debuggerDropdowns_Instructions_Highlight_BackgroundColor: app_properties.secondary_BackgroundColor + }, + /* :::::::::::::: + ANALYSIS TAB + ::::::::::::::: */ analysisTab: { - buttons: { - runButton_TextColor: app_properties.primaryButton_TextColor, - runButton_BackgroundColor: app_properties.primaryButton_BackgroundColor, - runButton_BorderColor: app_properties.primaryButton_BorderColor - }, - textBox: { // already in rightPanel general theme - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor - }, - warningMessage: { // already in rightPanel general theme - background: app_properties.warning_BackgroundColor, - border: app_properties.warning_BorderColor, - color: app_properties.warning_TextColor - } + + button_Run_BackgroundColor: app_properties.primaryButton_BackgroundColor, + button_Run_BorderColor: app_properties.primaryButton_BorderColor, + button_Run_Color: app_properties.primaryButton_TextColor, + + analysisContainerBox: app_properties.uiElements.solidBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor, + }), + + message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, + message_Warning_BorderColor: app_properties.warning_BorderColor, + message_Warning_Color: app_properties.warning_TextColor + }, + /* :::::::::::::: + SUPPORT TAB + ::::::::::::::: */ supportTab: { - textBox: { // already in rightPanel general theme - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor - }, - infoTextBox: { // already in rightPanel general theme - background: app_properties.infoBox_BackgroundColor, - border: app_properties.infoBox_BorderColor, - color: app_properties.infoBox_TextColor - } + + iframeContainerBox: app_properties.uiElements.solidBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + supportInfoBox: app_properties.uiElements.dottedBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }) + } - } + } } @@ -646,43 +734,43 @@ var elementColors = { text-align : center; overflow : hidden; word-break : normal; - ` - } - /* -------------------------------------------------------------------------- - BUTTONS - -------------------------------------------------------------------------- */ - var buttons = { + `, 'button': ` - margin : 1px; - background-color : ${css_properties.colors.veryLightGrey}; - border : .3px solid ${css_properties.colors.veryLightGrey}; - color : ${css_properties.colors.black}; - display : flex; - align-items : center; - justify-content : center; - border-radius : 3px; - cursor : pointer; - min-height : 25px; - max-height : 25px; - width : 70px; - min-width : 70px; - font-size : 12px; - overflow : hidden; - word-break : normal; + margin : 1px; + background-color : ${css_properties.colors.veryLightGrey}; + border : .3px solid ${css_properties.colors.veryLightGrey}; + color : ${css_properties.colors.black}; + display : flex; + align-items : center; + justify-content : center; + border-radius : 3px; + cursor : pointer; + min-height : 25px; + max-height : 25px; + width : 70px; + min-width : 70px; + font-size : 12px; + overflow : hidden; + word-break : normal; `, 'button:hover': ` - opacity : 0.8; + opacity : 0.8; ` - } + return { colors: css_properties.colors, + leftPanel: remix_properties.leftPanel, + editor: remix_properties.editor, + terminal: remix_properties.terminal, + rightPanel: remix_properties.rightPanel, + elementColors: elementColors, dropdown: uiElements['dropdown'], - button: buttons['button'], + button: uiElements['button'], inputField: uiElements['input'], infoTextBox: uiElements['info-text-box'], displayBox: uiElements['display-box'] From f54f037b011246ea896534ad452d21cc81559a42 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Sat, 30 Sep 2017 05:32:09 +0100 Subject: [PATCH 09/16] Update whole remix_properties in Syle guide --- src/ui/styles/style-guide.js | 458 ++++++++++++++--------------------- 1 file changed, 185 insertions(+), 273 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 1688b57771..b2fdaa05ab 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -11,9 +11,9 @@ function styleGuide () { -------------------------------------------------------------------------- */ var css_properties = { - /**************************** - COLORS - ************************** */ + /******************************************************** + COLORS + ******************************************************** */ colors: { // BASIC COLORS (B&W and transparent) transparent: 'transparent', @@ -44,16 +44,16 @@ function styleGuide () { violet: 'hsla(240, 64%, 68%, 1)' }, - /**************************** - FONT - ************************** */ + /******************************************************** + FONTS + ******************************************************** */ fonts: { font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', }, - /**************************** - BORDERS - ************************** */ + /******************************************************** + BORDERS + ******************************************************** */ borders: { primary_borderRadius: '3px', secondary_borderRadius: '5px' @@ -68,33 +68,36 @@ function styleGuide () { var app_properties = { - /**************************** - BACKGROUND COLORS - ************************** */ + /******************************************************** + BACKGROUND COLORS + ******************************************************** */ primary_BackgroundColor: css_properties.colors.white, secondary_BackgroundColor: css_properties.colors.backgroundBlue, dark_BackgroundColor: css_properties.colors.veryLightGrey, - /**************************** - RESIZING - ************************** */ + + /******************************************************** + RESIZING + ******************************************************** */ ghostBar: css_properties.colors.lightBlue, draggingBar: css_properties.colors.lightBlue, - /**************************** - TEXT COLORS - ************************** */ + + /******************************************************** + TEXT COLORS + ******************************************************** */ mainText_Color: css_properties.colors.black, supportText_Color: css_properties.colors.grey, errorText_Color: css_properties.colors.red, warningText_Color: css_properties.colors.orange, - /**************************** - ICONS - ************************** */ + + /******************************************************** + ICONS + ******************************************************** */ icon_Color: css_properties.colors.black, icon_HoverColor: css_properties.colors.orange, - /**************************** - MESSAGES - ************************** */ + /******************************************************** + MESSAGES + ******************************************************** */ // Success success_TextColor: css_properties.colors.black, success_BackgroundColor: css_properties.colors.lightGreen, @@ -110,30 +113,30 @@ function styleGuide () { warning_BackgroundColor: css_properties.colors.lightOrange, warning_BorderColor: css_properties.colors.orange, - /**************************** - DROPDOWN - ************************** */ + /******************************************************** + DROPDOWN + ******************************************************** */ dropdown_TextColor: css_properties.colors.black, dropdown_BackgroundColor: css_properties.colors.white, dropdown_BorderColor: css_properties.colors.veryLightGrey, - /**************************** - INPUT - ************************** */ + /******************************************************** + INPUT + ******************************************************** */ input_TextColor: css_properties.colors.black, input_BackgroundColor: css_properties.colors.white, input_BorderColor: css_properties.colors.veryLightGrey, - /**************************** - SOLID BORDER BOX - ************************** */ + /******************************************************** + SOLID BORDER BOX + ******************************************************** */ solidBorderBox_TextColor: css_properties.colors.black, solidBorderBox_BackgroundColor: css_properties.colors.violet, solidBorderBox_BorderColor: css_properties.colors.veryLightGrey, - /**************************** - BUTTONS - ************************** */ + /******************************************************** + BUTTONS + ******************************************************** */ /* ................. PRIMARY @@ -183,37 +186,22 @@ function styleGuide () { // CALL callButton_TextColor: css_properties.colors.black, - callButton_BackgroundColor: css_properties.colors.white, - callButton_BorderColor: css_properties.colors.blue, + callButton_BackgroundColor: css_properties.colors.lightBlue, + callButton_BorderColor: css_properties.colors.lightBlue, // TRANSACTION transactButton_TextColor: css_properties.colors.black, - transactButton_BackgroundColor: css_properties.colors.white, - transactButton_BorderColor: css_properties.colors.pink, + transactButton_BackgroundColor: css_properties.colors.lightRed, + transactButton_BorderColor: css_properties.colors.lightRed, // PAYABLE TRANSACTION transactPayableButton_TextColor: css_properties.colors.black, - transactPayableButton_BackgroundColor: css_properties.colors.white, - transactPayableButton_BorderColor: css_properties.colors.violet, - - - // Run Tab (Right panel) - atAddressButton_TextColor: css_properties.colors.black, - atAddressButton_BackgroundColor: css_properties.colors.lightGreen, - atAddressButton_BorderColor: css_properties.colors.lightGreen, - - createButton_TextColor: css_properties.colors.black, - createButton_BackgroundColor: css_properties.colors.lightRed, - createButton_BorderColor: css_properties.colors.lightRed, + transactPayableButton_BackgroundColor: css_properties.colors.red, + transactPayableButton_BorderColor: css_properties.colors.red, - // Analysis Tab (Right panel) - runButton_TextColor: css_properties.colors.black, - runButton_BackgroundColor: css_properties.colors.veryLightGrey, - runButton_BorderColor: css_properties.colors.veryLightGrey, - - /**************************** - UI ELEMENTS - ************************** */ + /******************************************************** + UI ELEMENTS + ******************************************************** */ uiElements: { @@ -243,10 +231,12 @@ function styleGuide () { `, inputField: (opts = {}) =>` - border : 1px solid ${css_properties.colors.veryLightGrey}; + background-color : ${opts.BackgroundColor}}; + border : .2em dotted ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${css_properties.borders.secondary_borderRadius}; height : 25px; width : 250px; - border-radius : 3px; padding : 0 8px; overflow : hidden; word-break : normal; @@ -292,178 +282,105 @@ function styleGuide () { /* -------------------------------------------------------------------------- - REMIX PROPERTIES + REMIX PROPERTIES -------------------------------------------------------------------------- */ var remix_properties = { - /**************************** - REMIX GENERAL - ************************** */ - remix: { - text: { - font: css_properties.fonts.font, - mainText: { - color: app_properties.mainText_Color - }, - supportText: { - color: app_properties.supportText_Color - } - }, - primary_BackgroundColor: app_properties.primary_BackgroundColor, - secondary_BackgroundColor: app_properties.secondary_BackgroundColor, - dropdown: { - background: app_properties.dropdown_BackgroundColor, - border: app_properties.dropdown_BorderColor, - color: app_properties.dropdown_TextColor - }, - solidBorderBox: { - background: app_properties.solidBorderBox_BackgroundColor, - border: app_properties.solidBorderBox_BorderColor, - color: app_properties.solidBorderBox_TextColor - }, - infoTextBox: { - background: app_properties.solidBorderBox_BackgroundColor, - border: app_properties.solidBorderBox_BorderColor, - color: app_properties.solidBorderBox_TextColor - }, - inputField: { - background: app_properties.input_BackgroundColor, - border: app_properties.input_BorderColor, - color: app_properties.input_TextColor - }, - copyToClipboard: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - } - }, +/******************************************************** + REMIX GENERAL +/******************************************************** */ + remix: {}, - /**************************** - LEFT PANEL (FILE PANEL) - ************************** */ +/******************************************************** + LEFT PANEL (FILE PANEL) +/******************************************************** */ leftPanel: { - icons: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - togglePannel: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - treeview: { - color: app_properties.mainText_Color, - highlightedLine: { - background: app_properties.secondary_BackgroundColor - } - } + + backgroundColor_Panel: app_properties.primary_BackgroundColor, + backgroundColor_FileExplorer: app_properties.secondary_BackgroundColor, + + text_Primary: app_properties.mainText_Color, + text_Secondary: app_properties.supportText_Color, + + bar_Ghost: app_properties.ghostBar, + bar_Dragging: app_properties.draggingBar, + + icon_Color_Menu: app_properties.icon_Color, + icon_HoverColor_Menu: app_properties.icon_HoverColor, + + icon_Color_TogglePanel: app_properties.icon_Color, + icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, + }, - /**************************** - EDITOR - ************************** */ +/******************************************************** + EDITOR +/******************************************************** */ editor: { - background: app_properties.primary_BackgroundColor, - color: app_properties.mainText_Color, - gutter: { - background: app_properties.secondary_BackgroundColor, - highlightedNumber: { - background: app_properties.secondary_BackgroundColor // secondary_BackgroundColor - }, - }, - navTabs: { - background: app_properties.secondary_BackgroundColor, - color: app_properties.mainText_Color, - }, - icons: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - code: { - highlightedLine: { - background: app_properties.secondary_BackgroundColor //secondary_BackgroundColor - }, - debuggerMode: { - highlightedArea: { - background: app_properties.secondary_BackgroundColor // same as Debug button in Terminal window - } - } - } + + backgroundColor_Panel: app_properties.primary_BackgroundColor, + backgroundColor_Tabs_Highlights: app_properties.secondary_BackgroundColor, + backgroundColor_DebuggerMode: app_properties.secondary_BackgroundColor, + + text_Primary: app_properties.mainText_Color, + text_Editor: '', + + icon_Color_Editor: app_properties.icon_Color, + icon_HoverColor_Editor: app_properties.icon_HoverColor, + }, - /**************************** - TERMINAL - ************************** */ +/******************************************************** + TERMINAL +/******************************************************** */ terminal: { - menu: { - background: app_properties.secondary_BackgroundColor, - color: app_properties.mainText_Color, - inputField: { - background: app_properties.input_BackgroundColor, - border: app_properties.input_BorderColor, - color: app_properties.input_TextColor - }, - icons: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - dropdown: { - background: app_properties.dropdown_BackgroundColor, - border: app_properties.dropdown_BorderColor, - color: app_properties.dropdown_TextColor - }, - togglePannel: { - color: app_properties.icon_Color, - hover: { - color: app_properties.icon_Color - } - }, - }, - terminalWindow: { - background: app_properties.dark_BackgroundColor, - logo: { - url: '', - }, - infoLog: { - color: app_properties.mainText_Color, - }, - errorLog: { - color: app_properties.errorText_Color, - }, - transactionLog: { - title: { - color: app_properties.warningText_Color, - }, - text: { - color: app_properties.supportText_Color, - }, - detailsButton: { - background: app_properties.secondaryButton_BackgroundColor, - border: app_properties.secondaryButton_BorderColor, - color: app_properties.secondaryButton_TextColor - }, - debugButton: { - background: app_properties.warningButton_BackgroundColor, - border: app_properties.warningButton_BorderColor, - color: app_properties.warningButton_TextColor - } - } - } + + backgroundColor_Menu: app_properties.secondary_BackgroundColor, + backgroundColor_Terminal: app_properties.dark_BackgroundColor, + + text_Primary: app_properties.mainText_Color, + text_Secondary: app_properties.supportText_Color, + text_InfoLog: app_properties.mainText_Color, + text_ErrorLog: app_properties.errorText_Color, + text_Title_TransactionLog: app_properties.warningText_Color, + text_Regular_TransactionLog: app_properties.supportText_Color, + + icon_Color_TogglePanel: app_properties.icon_Color, + icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, + + bar_Ghost: app_properties.ghostBar, + bar_Dragging: app_properties.draggingBar, + + icon_Color_Menu: app_properties.icon_Color, + icon_HoverColor_Menu: app_properties.icon_HoverColor, + + input_Search_MenuBar: app_properties.uiElements.inputField({ + BackgroundColor: app_properties.input_BackgroundColor, + BorderColor: app_properties.input_BorderColor, + Color: app_properties.input_TextColor + }), + + dropdown_Filter_MenuBar: app_properties.uiElements.dropdown({ + BackgroundColor: app_properties.dropdown_BackgroundColor, + BorderColor: app_properties.dropdown_BorderColor, + Color: app_properties.dropdown_TextColor + }), + + button_Log_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor, + button_Details_BorderColor: app_properties.secondaryButton_BorderColor, + button_Details_Color: app_properties.secondaryButton_TextColor, + + button_Log_Debug_BackgroundColor: app_properties.warningButton_BackgroundColor, + button_Debug_BorderColor: app_properties.warningButton_BorderColor, + button_Debug_Color: app_properties.warningButton_TextColor, + }, - /**************************** - RIGHT PANEL - ************************** */ +/******************************************************** + RIGHT PANEL +/******************************************************** */ rightPanel: { backgroundColor_Panel: app_properties.primary_BackgroundColor, @@ -495,13 +412,13 @@ var remix_properties = { button_Publish_BorderColor: app_properties.secondaryButton_BorderColor, button_Publish_Color: app_properties.secondaryButton_TextColor, - compileContract_Dropdown: app_properties.uiElements.dropdown({ + dropdown_CompileContract: app_properties.uiElements.dropdown({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), - compileContainerBox: app_properties.uiElements.solidBorderBox({ + box_CompileContainer: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor @@ -535,44 +452,43 @@ var remix_properties = { ::::::::::::::: */ runTab: { - instanceBox: app_properties.uiElements.solidBorderBox({ + box_Instance: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), - runTab_Dropdown: app_properties.uiElements.dropdown({ + dropdown_RunTab: app_properties.uiElements.dropdown({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, + BorderColor: app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), - inputField_BackgroundColor: app_properties.input_BackgroundColor, - inputField_BorderColor: app_properties.input_BorderColor, - inputField_Color: app_properties.input_TextColor, - - atAddressButton_BackgroundColor: app_properties.atAddressButton_BackgroundColor, - atAddressButton_BorderColor: app_properties.atAddressButton_BorderColor, - atAddressButton_Color: app_properties.atAddressButton_TextColor, - - createButton_BackgroundColor: app_properties.createButton_BackgroundColor, - createButton_BorderColor: app_properties.createButton_BorderColor, - createButton_Color: app_properties.createButton_TextColor, - - instanceButtons_Call_BackgroundColor: app_properties.callButton_BackgroundColor, - instanceButtons_Call_BorderColor: app_properties.callButton_BorderColor, - instanceButtons_Call_Color: app_properties.callButton_TextColor, - - instanceButtons_Transact_BackgroundColor: app_properties.transactButton_BackgroundColor, - instanceButtons_Transact_BorderColor: app_properties.transactButton_BorderColor, - instanceButtons_Transact_Color: app_properties.transactButton_TextColor, - - instanceButtons_transactPayable_BackgroundColor: app_properties.transactPayableButton_BackgroundColor, - instanceButtons_transactPayable_BorderColor: app_properties.transactPayableButton_BorderColor, - instanceButtons_transactPayable_Color: app_properties.transactPayableButton_TextColor, + input_RunTab: app_properties.uiElements.inputField({ + BackgroundColor: app_properties.input_BackgroundColor, + BorderColor: app_properties.input_BorderColor, + Color: app_properties.input_TextColor + }), - instance_copyToClipboard_Icon_Color: app_properties.icon_Color, - instance_copyToClipboard_Icon__HoverColor: app_properties.icon_HoverColor, + button_atAddress_BackgroundColor: app_properties.primaryButton_BackgroundColor, + button_atAddress_BorderColor: app_properties.primaryButton_BorderColor, + button_atAddress_Color: app_properties.primaryButton_TextColor, + button_Create_BackgroundColor: app_properties.primaryButton_BackgroundColor, + button_Create_BorderColor: app_properties.primaryButton_BorderColor, + button_Create_Color: app_properties.primaryButton_TextColor, + + button_Instance_Call_BackgroundColor: app_properties.callButton_BackgroundColor, + button_Instance_Call_BorderColor: app_properties.callButton_BorderColor, + button_Instance_Call_Color: app_properties.callButton_TextColor, + button_Instance_Transact_BackgroundColor: app_properties.transactButton_BackgroundColor, + button_Instance_Transact_BorderColor: app_properties.transactButton_BorderColor, + button_Instance_Transact_Color: app_properties.transactButton_TextColor, + button_Instance_TransactPayable_BackgroundColor: app_properties.transactPayableButton_BackgroundColor, + button_Instance_TransactPayable_BorderColor: app_properties.transactPayableButton_BorderColor, + button_Instance_TransactPayable_Color: app_properties.transactPayableButton_TextColor, + + icon_Color_Instance_CopyToClipboard: app_properties.icon_Color, + icon_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor, }, @@ -581,13 +497,13 @@ var remix_properties = { ::::::::::::::: */ settingsTab: { - solidityVersionInfoBox: app_properties.uiElements.dottedBorderBox({ + box_SolidityVersionInfo: app_properties.uiElements.dottedBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), - selectCompiler_Dropdown: app_properties.uiElements.dropdown({ + dropdown_SelectCompiler: app_properties.uiElements.dropdown({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor @@ -630,7 +546,7 @@ var remix_properties = { button_Run_BorderColor: app_properties.primaryButton_BorderColor, button_Run_Color: app_properties.primaryButton_TextColor, - analysisContainerBox: app_properties.uiElements.solidBorderBox({ + box_AnalysisContainer: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor, @@ -647,13 +563,13 @@ var remix_properties = { ::::::::::::::: */ supportTab: { - iframeContainerBox: app_properties.uiElements.solidBorderBox({ + box_IframeContainer: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), - supportInfoBox: app_properties.uiElements.dottedBorderBox({ + box_SupportInfo: app_properties.uiElements.dottedBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor @@ -665,6 +581,14 @@ var remix_properties = { } +/* //////////////////////////////////////////////////// +/////////////////////////////////////////////////////// + +TO BE DELETED (START) + +/////////////////////////////////////////////////////// +//////////////////////////////////////////////////// */ + var elementColors = { /* ----------------------- BUTTONS @@ -760,6 +684,13 @@ var elementColors = { ` } + /* //////////////////////////////////////////////////// + /////////////////////////////////////////////////////// + + TO BE DELETED (FINISH) + + /////////////////////////////////////////////////////// + //////////////////////////////////////////////////// */ return { colors: css_properties.colors, @@ -776,22 +707,3 @@ var elementColors = { displayBox: uiElements['display-box'] } } - -/* - -COMMENTS - -1. most css properties can take many or infinite amounf of different values -=> so we define a set of concrete values that we use: -- variable just for plain colors (later also fonts, widths, paddings, border radiuses...) - -2. we define certain semantic names that make sense in the context of our app -=> so we can use the values used in (1.) e.g. like 'color_red' and assign it to e.g. -- highlightColor: color_red -- borderColor: color_white -- ... - -3. we define a nested object that represents the component hierarchy that -makes up our app and use semantic names defined under (2.) - -*/ From b7f8f151a5cb6aa94e13dde76b70c263b40f4c6b Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Mon, 2 Oct 2017 05:13:58 +0100 Subject: [PATCH 10/16] Start adding styleguide to csjs --- src/ui/styles/style-guide.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index b2fdaa05ab..9a4383f04c 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -71,9 +71,10 @@ function styleGuide () { /******************************************************** BACKGROUND COLORS ******************************************************** */ - primary_BackgroundColor: css_properties.colors.white, - secondary_BackgroundColor: css_properties.colors.backgroundBlue, + primary_BackgroundColor: css_properties.colors.red, + secondary_BackgroundColor: css_properties.colors.blue, dark_BackgroundColor: css_properties.colors.veryLightGrey, + light_BackgroundColor: css_properties.colors.white, /******************************************************** RESIZING @@ -117,7 +118,7 @@ function styleGuide () { DROPDOWN ******************************************************** */ dropdown_TextColor: css_properties.colors.black, - dropdown_BackgroundColor: css_properties.colors.white, + dropdown_BackgroundColor: css_properties.colors.violet, dropdown_BorderColor: css_properties.colors.veryLightGrey, /******************************************************** @@ -219,7 +220,7 @@ function styleGuide () { `, dottedBorderBox: (opts = {}) => ` - background-color : ${opts.BackgroundColor}}; + background-color : ${opts.BackgroundColor}; border : .2em dotted ${opts.BorderColor}; color : ${opts.Color}; border-radius : ${css_properties.borders.secondary_borderRadius}; @@ -230,9 +231,9 @@ function styleGuide () { word-break : break-word; `, - inputField: (opts = {}) =>` - background-color : ${opts.BackgroundColor}}; - border : .2em dotted ${opts.BorderColor}; + inputField: (opts = {}) => ` + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; color : ${opts.Color}; border-radius : ${css_properties.borders.secondary_borderRadius}; height : 25px; @@ -243,7 +244,7 @@ function styleGuide () { `, dropdown: (opts = {}) => ` - background-color : ${opts.BackgroundColor}}; + background-color : ${opts.BackgroundColor}; border : 1px solid ${opts.BorderColor}; color : ${opts.Color}; font-size : 12px; @@ -321,10 +322,12 @@ var remix_properties = { editor: { backgroundColor_Panel: app_properties.primary_BackgroundColor, + backgroundColor_Editor: app_properties.light_BackgroundColor, backgroundColor_Tabs_Highlights: app_properties.secondary_BackgroundColor, - backgroundColor_DebuggerMode: app_properties.secondary_BackgroundColor, + backgroundColor_DebuggerMode: app_properties.warning_BackgroundColor, text_Primary: app_properties.mainText_Color, + text_Secondary: app_properties.supportText_Color, text_Editor: '', icon_Color_Editor: app_properties.icon_Color, @@ -694,11 +697,14 @@ var elementColors = { return { colors: css_properties.colors, + borders: css_properties.borders, leftPanel: remix_properties.leftPanel, editor: remix_properties.editor, terminal: remix_properties.terminal, rightPanel: remix_properties.rightPanel, + app_properties: app_properties, + elementColors: elementColors, dropdown: uiElements['dropdown'], button: uiElements['button'], From f7511bd36ab7d312338c4d40c4de827b0e71c7e4 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Tue, 3 Oct 2017 00:24:40 +0100 Subject: [PATCH 11/16] First draft - themeable Remix --- src/ui/ButtonNavigator.js | 12 +- src/ui/CodeListView.js | 13 +- src/ui/DropdownPanel.js | 10 +- src/ui/TxBrowser.js | 8 +- src/ui/styles/style-guide.js | 352 ++++++++++++++--------------------- 5 files changed, 168 insertions(+), 227 deletions(-) diff --git a/src/ui/ButtonNavigator.js b/src/ui/ButtonNavigator.js index afc0984256..80c1ec562d 100644 --- a/src/ui/ButtonNavigator.js +++ b/src/ui/ButtonNavigator.js @@ -14,24 +14,24 @@ var css = csjs` .stepButtons { width: 100%; display: flex; - justify-content: center + justify-content: center; } .stepButton { - ${styles.button} + ${styles.rightPanel.debuggerTab.button_Debugger} } .jumpButtons { width: 100%; display: flex; - justify-content: center + justify-content: center; } .jumpButton { - ${styles.button} + ${styles.rightPanel.debuggerTab.button_Debugger} } .navigator { - color: ${styles.colors.black} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; } .navigator:hover { - color: ${styles.colors.orange} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; } ` diff --git a/src/ui/CodeListView.js b/src/ui/CodeListView.js index 309367b21a..6130c2e5b4 100644 --- a/src/ui/CodeListView.js +++ b/src/ui/CodeListView.js @@ -4,7 +4,18 @@ var yo = require('yo-yo') var ui = require('../helpers/ui') var DropdownPanel = require('./DropdownPanel') var EventManager = require('../lib/eventManager') +var csjs = require('csjs-inject') +var styleGuide = require('./styles/style-guide') +var styles = styleGuide() +var css = csjs` + .instructions { + ${styles.rightPanel.debuggerTab.box_Debugger} + width: 75%; + overflow-y: scroll; + max-height: 250px; + } +` function CodeListView (_parent, _codeManager) { this.event = new EventManager() this.parent = _parent @@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () { var codeView = this.code.map(function (item, i) { return yo`
${item}
` }) - return yo`
+ return yo`
${codeView}
` } diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index 29546fcbec..225469d157 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -13,25 +13,25 @@ var styles = styleGuide() var css = csjs` .title { margin-top: 10px; - ${styles.dropdown} + ${styles.rightPanel.debuggerTab.dropdown_Debugger} display: flex; align-items: center; } .name { - color: ${styles.colors.black}; font-weight: bold; } .icon { - color: ${styles.colors.black}; + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; margin-right: 5%; } .eyeButton { - ${styles.button} + ${styles.rightPanel.debuggerTab.button_Debugger} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; margin: 3px; float: right; } .eyeButton:hover { - color: ${styles.colors.orange}; + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; } ` diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index 662d1fec52..c2db3da118 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -25,7 +25,7 @@ var css = csjs` justify-content: center; } .txinput { - ${styles.inputField} + ${styles.rightPanel.debuggerTab.input_Debugger} min-width: 30px; margin: 3px; } @@ -35,11 +35,11 @@ var css = csjs` justify-content: center; } .txbutton { - ${styles.button} - color: ${styles.colors.black}; + ${styles.rightPanel.debuggerTab.button_Debugger} + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color}; } .txbutton:hover { - color: ${styles.colors.orange}; + color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor}; } .txinfo { margin-top: 5px; diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 9a4383f04c..4ffec81d33 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -71,8 +71,8 @@ function styleGuide () { /******************************************************** BACKGROUND COLORS ******************************************************** */ - primary_BackgroundColor: css_properties.colors.red, - secondary_BackgroundColor: css_properties.colors.blue, + primary_BackgroundColor: css_properties.colors.white, + secondary_BackgroundColor: css_properties.colors.backgroundBlue, dark_BackgroundColor: css_properties.colors.veryLightGrey, light_BackgroundColor: css_properties.colors.white, @@ -118,7 +118,7 @@ function styleGuide () { DROPDOWN ******************************************************** */ dropdown_TextColor: css_properties.colors.black, - dropdown_BackgroundColor: css_properties.colors.violet, + dropdown_BackgroundColor: css_properties.colors.white, dropdown_BorderColor: css_properties.colors.veryLightGrey, /******************************************************** @@ -132,7 +132,7 @@ function styleGuide () { SOLID BORDER BOX ******************************************************** */ solidBorderBox_TextColor: css_properties.colors.black, - solidBorderBox_BackgroundColor: css_properties.colors.violet, + solidBorderBox_BackgroundColor: css_properties.colors.white, solidBorderBox_BorderColor: css_properties.colors.veryLightGrey, /******************************************************** @@ -262,9 +262,9 @@ function styleGuide () { button: (opts = {}) => ` margin : 1px; - background-color : ${css_properties.colors.veryLightGrey}; - border : .3px solid ${css_properties.colors.veryLightGrey}; - color : ${css_properties.colors.black}; + background-color : ${opts.BackgroundColor}; + border : .3px solid ${opts.BorderColor}; + color : ${opts.Color}; display : flex; align-items : center; justify-content : center; @@ -292,7 +292,20 @@ var remix_properties = { /******************************************************** REMIX GENERAL /******************************************************** */ - remix: {}, + remix: { + + modalDialog_BackgroundColor_Primary: app_properties.primary_BackgroundColor, + modalDialog_text_Primary: app_properties.mainText_Color, + modalDialog_text_Secondary: app_properties.supportText_Color, + modalDialog_Header_Footer_BackgroundColor: app_properties.secondary_BackgroundColor, + modalDialog_Header_Footer_Color: app_properties.mainText_Color, + modalDialog_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + modalDialog_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor, + modalDialog_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor, + modalDialog_CopyToClipboard_Icon_Color: app_properties.icon_Color, + modalDialog_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor + + }, /******************************************************** LEFT PANEL (FILE PANEL) @@ -345,20 +358,22 @@ var remix_properties = { text_Primary: app_properties.mainText_Color, text_Secondary: app_properties.supportText_Color, - text_InfoLog: app_properties.mainText_Color, + text_RegularLog: app_properties.mainText_Color, + text_InfoLog: app_properties.supportText_Color, text_ErrorLog: app_properties.errorText_Color, text_Title_TransactionLog: app_properties.warningText_Color, text_Regular_TransactionLog: app_properties.supportText_Color, icon_Color_TogglePanel: app_properties.icon_Color, icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, + icon_Color_Menu: app_properties.icon_Color, + icon_HoverColor_Menu: app_properties.icon_HoverColor, + icon_Color_CopyToClipboard: app_properties.icon_Color, + icon_HoverColor_CopyToClipboard: app_properties.icon_HoverColor, bar_Ghost: app_properties.ghostBar, bar_Dragging: app_properties.draggingBar, - icon_Color_Menu: app_properties.icon_Color, - icon_HoverColor_Menu: app_properties.icon_HoverColor, - input_Search_MenuBar: app_properties.uiElements.inputField({ BackgroundColor: app_properties.input_BackgroundColor, BorderColor: app_properties.input_BorderColor, @@ -371,13 +386,17 @@ var remix_properties = { Color: app_properties.dropdown_TextColor }), - button_Log_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor, - button_Details_BorderColor: app_properties.secondaryButton_BorderColor, - button_Details_Color: app_properties.secondaryButton_TextColor, + button_Log_Debug: app_properties.uiElements.button({ + BackgroundColor: app_properties.warningButton_BackgroundColor, + BorderColor: app_properties.warningButton_BorderColor, + Color: app_properties.warningButton_TextColor + }), - button_Log_Debug_BackgroundColor: app_properties.warningButton_BackgroundColor, - button_Debug_BorderColor: app_properties.warningButton_BorderColor, - button_Debug_Color: app_properties.warningButton_TextColor, + button_Log_Details: app_properties.uiElements.button({ + BackgroundColor: app_properties.secondaryButton_BackgroundColor, + BorderColor: app_properties.secondaryButton_BorderColor, + Color: app_properties.secondaryButton_TextColor + }) }, @@ -388,6 +407,7 @@ var remix_properties = { backgroundColor_Panel: app_properties.primary_BackgroundColor, backgroundColor_Tab: app_properties.secondary_BackgroundColor, + BackgroundColor_Pre: app_properties.light_BackgroundColor, text_Primary: app_properties.mainText_Color, text_Secondary: app_properties.supportText_Color, @@ -398,27 +418,45 @@ var remix_properties = { icon_Color_TogglePanel: app_properties.icon_Color, icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, + message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, + message_Warning_BorderColor: app_properties.warning_BorderColor, + message_Warning_Color: app_properties.warning_TextColor, + + message_Error_BackgroundColor: app_properties.danger_BackgroundColor, + message_Error_BorderColor: app_properties.danger_BorderColor, + message_Error_Color: app_properties.danger_TextColor, + + message_Success_BackgroundColor: app_properties.success_BackgroundColor, + message_Success_BorderColor: app_properties.success_BorderColor, + message_Success_Color: app_properties.success_TextColor, + /* :::::::::::::: COMPILE TAB ::::::::::::::: */ compileTab: { - button_Compile_BackgroundColor: app_properties.primaryButton_BackgroundColor, - button_Compile_BorderColor: app_properties.primaryButton_BorderColor, - button_Compile_Color: app_properties.primaryButton_TextColor, + button_Compile: app_properties.uiElements.button({ + BackgroundColor: app_properties.primaryButton_BackgroundColor, + BorderColor: app_properties.primaryButton_BorderColor, + Color: app_properties.primaryButton_TextColor + }), - button_Details_BackgroundColor: app_properties.secondaryButton_BackgroundColor, - button_Details_BorderColor: app_properties.secondaryButton_BorderColor, - button_Details_Color: app_properties.secondaryButton_TextColor, + button_Details: app_properties.uiElements.button({ + BackgroundColor: app_properties.secondaryButton_BackgroundColor, + BorderColor: app_properties.secondaryButton_BorderColor, + Color: app_properties.secondaryButton_TextColor + }), - button_Publish_BackgroundColor: app_properties.secondaryButton_BackgroundColor, - button_Publish_BorderColor: app_properties.secondaryButton_BorderColor, - button_Publish_Color: app_properties.secondaryButton_TextColor, + button_Publish: app_properties.uiElements.button({ + BackgroundColor: app_properties.secondaryButton_BackgroundColor, + BorderColor: app_properties.secondaryButton_BorderColor, + Color: app_properties.secondaryButton_TextColor + }), dropdown_CompileContract: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor + BackgroundColor: app_properties.dropdown_BackgroundColor, + BorderColor: app_properties.dropdown_BorderColor, + Color: app_properties.dropdown_TextColor }), box_CompileContainer: app_properties.uiElements.solidBorderBox({ @@ -427,26 +465,7 @@ var remix_properties = { Color: app_properties.solidBorderBox_TextColor }), - modalDialog_Details_BackgroundColor_Primary: app_properties.primary_BackgroundColor, - modalDialog_Details_Header_BackgroundColor: app_properties.secondary_BackgroundColor, - modalDialog_Details_Header_Color: app_properties.mainText_Color, - modalDialog_Details_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - modalDialog_Details_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor, - modalDialog_Details_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor, - modalDialog_Details_CopyToClipboard_Icon_Color: app_properties.icon_Color, - modalDialog_Details_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor, - - message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, - message_Warning_BorderColor: app_properties.warning_BorderColor, - message_Warning_Color: app_properties.warning_TextColor, - - message_Error_BackgroundColor: app_properties.danger_BackgroundColor, - message_Error_BorderColor: app_properties.danger_BorderColor, - message_Error_Color: app_properties.danger_TextColor, - - message_Success_BackgroundColor: app_properties.success_BackgroundColor, - message_Success_BorderColor: app_properties.success_BorderColor, - message_Success_Color: app_properties.success_TextColor, + icon_WarnCompilation_Color: app_properties.warning_BackgroundColor, }, @@ -455,16 +474,16 @@ var remix_properties = { ::::::::::::::: */ runTab: { - box_Instance: app_properties.uiElements.solidBorderBox({ + box_RunTab: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), dropdown_RunTab: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor: app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor + BackgroundColor: app_properties.dropdown_BackgroundColor, + BorderColor: app_properties.dropdown_BorderColor, + Color: app_properties.dropdown_TextColor }), input_RunTab: app_properties.uiElements.inputField({ @@ -473,22 +492,41 @@ var remix_properties = { Color: app_properties.input_TextColor }), - button_atAddress_BackgroundColor: app_properties.primaryButton_BackgroundColor, - button_atAddress_BorderColor: app_properties.primaryButton_BorderColor, - button_atAddress_Color: app_properties.primaryButton_TextColor, - button_Create_BackgroundColor: app_properties.primaryButton_BackgroundColor, - button_Create_BorderColor: app_properties.primaryButton_BorderColor, - button_Create_Color: app_properties.primaryButton_TextColor, - - button_Instance_Call_BackgroundColor: app_properties.callButton_BackgroundColor, - button_Instance_Call_BorderColor: app_properties.callButton_BorderColor, - button_Instance_Call_Color: app_properties.callButton_TextColor, - button_Instance_Transact_BackgroundColor: app_properties.transactButton_BackgroundColor, - button_Instance_Transact_BorderColor: app_properties.transactButton_BorderColor, - button_Instance_Transact_Color: app_properties.transactButton_TextColor, - button_Instance_TransactPayable_BackgroundColor: app_properties.transactPayableButton_BackgroundColor, - button_Instance_TransactPayable_BorderColor: app_properties.transactPayableButton_BorderColor, - button_Instance_TransactPayable_Color: app_properties.transactPayableButton_TextColor, + box_Instance: app_properties.uiElements.solidBorderBox({ + BackgroundColor: app_properties.solidBorderBox_BackgroundColor, + BorderColor:app_properties.solidBorderBox_BorderColor, + Color: app_properties.solidBorderBox_TextColor + }), + + button_atAddress: app_properties.uiElements.button({ + BackgroundColor: app_properties.primaryButton_BackgroundColor, + BorderColor: app_properties.primaryButton_BorderColor, + Color: app_properties.primaryButton_TextColor + }), + + button_Create: app_properties.uiElements.button({ + BackgroundColor: app_properties.primaryButton_BackgroundColor, + BorderColor: app_properties.primaryButton_BorderColor, + Color: app_properties.primaryButton_TextColor + }), + + button_Instance_Call: app_properties.uiElements.button({ + BackgroundColor: app_properties.callButton_BackgroundColor, + BorderColor: app_properties.callButton_BorderColor, + Color: app_properties.callButton_TextColor + }), + + button_Instance_Transact: app_properties.uiElements.button({ + BackgroundColor: app_properties.transactButton_BackgroundColor, + BorderColor: app_properties.transactButton_BorderColor, + Color: app_properties.transactButton_TextColor + }), + + button_Instance_TransactPayable: app_properties.uiElements.button({ + BackgroundColor: app_properties.transactPayableButton_BackgroundColor, + BorderColor: app_properties.transactPayableButton_BorderColor, + Color: app_properties.transactPayableButton_TextColor + }), icon_Color_Instance_CopyToClipboard: app_properties.icon_Color, icon_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor, @@ -507,9 +545,9 @@ var remix_properties = { }), dropdown_SelectCompiler: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor + BackgroundColor: app_properties.dropdown_BackgroundColor, + BorderColor: app_properties.dropdown_BorderColor, + Color: app_properties.dropdown_TextColor }), }, @@ -519,22 +557,35 @@ var remix_properties = { ::::::::::::::: */ debuggerTab: { - button_Debugger_BackgroundColor: app_properties.secondaryButton_BackgroundColor, - button_Debugger_BorderColor: app_properties.secondaryButton_BorderColor, - button_Debugger_Color: app_properties.secondaryButton_TextColor, + text_Primary: app_properties.mainText_Color, + text_Secondary: app_properties.supportText_Color, - button_Debugger_icon_Color: app_properties.icon_Color, - button_Debugger_icon_HoverColor: app_properties.icon_HoverColor, - - debuggerDropdown: app_properties.uiElements.dropdown({ + box_Debugger: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, BorderColor:app_properties.solidBorderBox_BorderColor, Color: app_properties.solidBorderBox_TextColor }), - inputField_BackgroundColor: app_properties.input_BackgroundColor, - inputField_BorderColor: app_properties.input_BorderColor, - inputField_Color: app_properties.input_TextColor, + button_Debugger: app_properties.uiElements.button({ + BackgroundColor: app_properties.primaryButton_BackgroundColor, + BorderColor: app_properties.primaryButton_BorderColor, + Color: app_properties.primaryButton_TextColor + }), + + button_Debugger_icon_Color: app_properties.icon_Color, + button_Debugger_icon_HoverColor: app_properties.icon_HoverColor, + + dropdown_Debugger: app_properties.uiElements.dropdown({ + BackgroundColor: app_properties.dropdown_BackgroundColor, + BorderColor: app_properties.dropdown_BorderColor, + Color: app_properties.dropdown_TextColor + }), + + input_Debugger: app_properties.uiElements.inputField({ + BackgroundColor: app_properties.input_BackgroundColor, + BorderColor: app_properties.input_BorderColor, + Color: app_properties.input_TextColor + }), debuggerDropdowns_Instructions_Highlight_BackgroundColor: app_properties.secondary_BackgroundColor @@ -545,9 +596,11 @@ var remix_properties = { ::::::::::::::: */ analysisTab: { - button_Run_BackgroundColor: app_properties.primaryButton_BackgroundColor, - button_Run_BorderColor: app_properties.primaryButton_BorderColor, - button_Run_Color: app_properties.primaryButton_TextColor, + button_Run_AnalysisTab: app_properties.uiElements.button({ + BackgroundColor: app_properties.primaryButton_BackgroundColor, + BorderColor: app_properties.primaryButton_BorderColor, + Color: app_properties.primaryButton_TextColor + }), box_AnalysisContainer: app_properties.uiElements.solidBorderBox({ BackgroundColor: app_properties.solidBorderBox_BackgroundColor, @@ -555,10 +608,6 @@ var remix_properties = { Color: app_properties.solidBorderBox_TextColor, }), - message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, - message_Warning_BorderColor: app_properties.warning_BorderColor, - message_Warning_Color: app_properties.warning_TextColor - }, /* :::::::::::::: @@ -583,133 +632,14 @@ var remix_properties = { } } - -/* //////////////////////////////////////////////////// -/////////////////////////////////////////////////////// - -TO BE DELETED (START) - -/////////////////////////////////////////////////////// -//////////////////////////////////////////////////// */ - -var elementColors = { - /* ----------------------- - BUTTONS - ----------------------- */ - // DROPDOWN - dropdown_TextColor: css_properties.colors.black, - dropdown_BackgroundColor: css_properties.colors.white, - dropdown_BorderColor: css_properties.colors.veryLightGrey, - - // BUTTON - button_TextColor: css_properties.element_TextColor, - button_BorderColor: css_properties.colors.veryLightGrey, - rightPanel_compileTab_compileButton_BackgroundColor: 'hsla(0, 0%, 40%, .2)', - rightPanel_compileTab_otherButtons_BackgroundColor: 'hsla(0, 0%, 40%, .2)' - -} - /* -------------------------------------------------------------------------- - UI ELEMENTS - -------------------------------------------------------------------------- */ - var uiElements = { - - 'display-box': ` - font-size : 12px; - padding : 10px 15px; - line-height : 20px; - background : ${css_properties.colors.white}; - border-radius : 3px; - border : 1px solid ${css_properties.colors.veryLightGrey}; - overflow : hidden; - word-break : break-word; - width : 100%; - `, - - 'info-text-box': ` - background-color : ${css_properties.colors.white}; - line-height : 20px; - border : .2em dotted ${css_properties.colors.lightGrey}; - padding : 8px 15px; - border-radius : 5px; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; - `, - - 'input': ` - border : 1px solid ${css_properties.colors.veryLightGrey}; - height : 25px; - width : 250px; - border-radius : 3px; - padding : 0 8px; - overflow : hidden; - word-break : normal; - `, - - 'dropdown': ` - color : ${css_properties.colors.black}; - background-color : ${css_properties.colors.white}; - border : 1px solid ${css_properties.colors.veryLightGrey}; - font-size : 12px; - font-weight : bold; - padding : 0 8px; - text-decoration : none; - cursor : pointer; - border-radius : 3px; - height : 25px; - width : 250px; - text-align : center; - overflow : hidden; - word-break : normal; - `, - - 'button': ` - margin : 1px; - background-color : ${css_properties.colors.veryLightGrey}; - border : .3px solid ${css_properties.colors.veryLightGrey}; - color : ${css_properties.colors.black}; - display : flex; - align-items : center; - justify-content : center; - border-radius : 3px; - cursor : pointer; - min-height : 25px; - max-height : 25px; - width : 70px; - min-width : 70px; - font-size : 12px; - overflow : hidden; - word-break : normal; - `, - - 'button:hover': ` - opacity : 0.8; - ` - } - - /* //////////////////////////////////////////////////// - /////////////////////////////////////////////////////// - - TO BE DELETED (FINISH) - - /////////////////////////////////////////////////////// - //////////////////////////////////////////////////// */ - return { colors: css_properties.colors, + app_properties: app_properties, borders: css_properties.borders, leftPanel: remix_properties.leftPanel, editor: remix_properties.editor, terminal: remix_properties.terminal, rightPanel: remix_properties.rightPanel, - - app_properties: app_properties, - - elementColors: elementColors, - dropdown: uiElements['dropdown'], - button: uiElements['button'], - inputField: uiElements['input'], - infoTextBox: uiElements['info-text-box'], - displayBox: uiElements['display-box'] + remix: remix_properties.remix } } From 7a2a5d87bc1cc1ff4ee89908a892a847b1929072 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Wed, 4 Oct 2017 00:47:50 +0100 Subject: [PATCH 12/16] Small fixes to Style guide --- src/ui/styles/style-guide.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 4ffec81d33..32d51d3b46 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -142,16 +142,16 @@ function styleGuide () { /* ................. PRIMARY .................. */ - primaryButton_TextColor: css_properties.colors.white, - primaryButton_BackgroundColor: css_properties.colors.blue, - primaryButton_BorderColor: css_properties.colors.blue, + primaryButton_TextColor: css_properties.colors.black, + primaryButton_BackgroundColor: css_properties.colors.lightBlue, + primaryButton_BorderColor: css_properties.colors.lightBlue, /* ................. SECONDARY .................. */ secondaryButton_TextColor: css_properties.colors.black, - secondaryButton_BackgroundColor: css_properties.colors.lightGrey, - secondaryButton_BorderColor: css_properties.colors.lightGrey, + secondaryButton_BackgroundColor: css_properties.colors.veryLightGrey, + secondaryButton_BorderColor: css_properties.colors.veryLightGrey, /* ................. SUCCESS @@ -567,9 +567,9 @@ var remix_properties = { }), button_Debugger: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor + BackgroundColor: app_properties.secondaryButton_BackgroundColor, + BorderColor: app_properties.secondaryButton_BorderColor, + Color: app_properties.secondaryButton_TextColor }), button_Debugger_icon_Color: app_properties.icon_Color, From 6f830b63b1d143be93987eeb58e669a081a8a538 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 4 Oct 2017 17:48:51 +0200 Subject: [PATCH 13/16] standard --- src/ui/BasicPanel.js | 2 - src/ui/DropdownPanel.js | 1 - src/ui/styles/style-guide.js | 979 +++++++++++++++++------------------ 3 files changed, 481 insertions(+), 501 deletions(-) diff --git a/src/ui/BasicPanel.js b/src/ui/BasicPanel.js index afa9ee88c1..ac3562b9fd 100644 --- a/src/ui/BasicPanel.js +++ b/src/ui/BasicPanel.js @@ -4,8 +4,6 @@ var yo = require('yo-yo') var ui = require('../helpers/ui') var csjs = require('csjs-inject') -var styleGuide = require('./styles/style-guide') -var styles = styleGuide() var css = csjs` .container { diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js index 225469d157..f1328f1aca 100644 --- a/src/ui/DropdownPanel.js +++ b/src/ui/DropdownPanel.js @@ -2,7 +2,6 @@ var yo = require('yo-yo') var ui = require('../helpers/ui') var styleDropdown = require('./styles/dropdownPanel') -var basicStyles = require('./styles/basicStyles') var TreeView = require('./TreeView') var EventManager = require('../lib/eventManager') diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 32d51d3b46..36a32abb17 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -3,17 +3,15 @@ module.exports = styleGuide function styleGuide () { - /* -------------------------------------------------------------------------- CSS PROPERTIES -------------------------------------------------------------------------- */ - var css_properties = { - - /******************************************************** - COLORS - ******************************************************** */ + var cssProperties = { + /* ------------------------------------------------------ + COLORS + ------------------------------------------------------ */ colors: { // BASIC COLORS (B&W and transparent) transparent: 'transparent', @@ -44,16 +42,16 @@ function styleGuide () { violet: 'hsla(240, 64%, 68%, 1)' }, - /******************************************************** - FONTS - ******************************************************** */ + /* ------------------------------------------------------ + FONTS + ------------------------------------------------------ */ fonts: { - font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', + font: '14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif' }, - /******************************************************** - BORDERS - ******************************************************** */ + /* ------------------------------------------------------ + BORDERS + ------------------------------------------------------ */ borders: { primary_borderRadius: '3px', secondary_borderRadius: '5px' @@ -66,580 +64,565 @@ function styleGuide () { -------------------------------------------------------------------------- */ - var app_properties = { - - /******************************************************** - BACKGROUND COLORS - ******************************************************** */ - primary_BackgroundColor: css_properties.colors.white, - secondary_BackgroundColor: css_properties.colors.backgroundBlue, - dark_BackgroundColor: css_properties.colors.veryLightGrey, - light_BackgroundColor: css_properties.colors.white, - - /******************************************************** - RESIZING - ******************************************************** */ - ghostBar: css_properties.colors.lightBlue, - draggingBar: css_properties.colors.lightBlue, - - /******************************************************** - TEXT COLORS - ******************************************************** */ - mainText_Color: css_properties.colors.black, - supportText_Color: css_properties.colors.grey, - errorText_Color: css_properties.colors.red, - warningText_Color: css_properties.colors.orange, - - /******************************************************** - ICONS - ******************************************************** */ - icon_Color: css_properties.colors.black, - icon_HoverColor: css_properties.colors.orange, - - /******************************************************** - MESSAGES - ******************************************************** */ + var appProperties = { + /* ------------------------------------------------------ + BACKGROUND COLORS + ------------------------------------------------------ */ + primary_BackgroundColor: cssProperties.colors.white, + secondary_BackgroundColor: cssProperties.colors.backgroundBlue, + dark_BackgroundColor: cssProperties.colors.veryLightGrey, + light_BackgroundColor: cssProperties.colors.white, + + /* ------------------------------------------------------ + RESIZING + ******************************************************** */ + ghostBar: cssProperties.colors.lightBlue, + draggingBar: cssProperties.colors.lightBlue, + + /* ------------------------------------------------------ + TEXT COLORS + ******************************************************** */ + mainText_Color: cssProperties.colors.black, + supportText_Color: cssProperties.colors.grey, + errorText_Color: cssProperties.colors.red, + warningText_Color: cssProperties.colors.orange, + + /* ------------------------------------------------------ + ICONS + ******************************************************** */ + icon_Color: cssProperties.colors.black, + icon_HoverColor: cssProperties.colors.orange, + + /* ------------------------------------------------------ + MESSAGES + ******************************************************** */ // Success - success_TextColor: css_properties.colors.black, - success_BackgroundColor: css_properties.colors.lightGreen, - success_BorderColor: css_properties.colors.green, + success_TextColor: cssProperties.colors.black, + success_BackgroundColor: cssProperties.colors.lightGreen, + success_BorderColor: cssProperties.colors.green, // Danger - danger_TextColor: css_properties.colors.black, - danger_BackgroundColor: css_properties.colors.lightRed, - danger_BorderColor: css_properties.colors.red, + danger_TextColor: cssProperties.colors.black, + danger_BackgroundColor: cssProperties.colors.lightRed, + danger_BorderColor: cssProperties.colors.red, // Warning - warning_TextColor: css_properties.colors.black, - warning_BackgroundColor: css_properties.colors.lightOrange, - warning_BorderColor: css_properties.colors.orange, - - /******************************************************** - DROPDOWN - ******************************************************** */ - dropdown_TextColor: css_properties.colors.black, - dropdown_BackgroundColor: css_properties.colors.white, - dropdown_BorderColor: css_properties.colors.veryLightGrey, - - /******************************************************** - INPUT - ******************************************************** */ - input_TextColor: css_properties.colors.black, - input_BackgroundColor: css_properties.colors.white, - input_BorderColor: css_properties.colors.veryLightGrey, - - /******************************************************** - SOLID BORDER BOX - ******************************************************** */ - solidBorderBox_TextColor: css_properties.colors.black, - solidBorderBox_BackgroundColor: css_properties.colors.white, - solidBorderBox_BorderColor: css_properties.colors.veryLightGrey, - - /******************************************************** - BUTTONS - ******************************************************** */ + warning_TextColor: cssProperties.colors.black, + warning_BackgroundColor: cssProperties.colors.lightOrange, + warning_BorderColor: cssProperties.colors.orange, + + /* ------------------------------------------------------ + DROPDOWN + ******************************************************** */ + dropdown_TextColor: cssProperties.colors.black, + dropdown_BackgroundColor: cssProperties.colors.white, + dropdown_BorderColor: cssProperties.colors.veryLightGrey, + + /* ------------------------------------------------------ + INPUT + ******************************************************** */ + input_TextColor: cssProperties.colors.black, + input_BackgroundColor: cssProperties.colors.white, + input_BorderColor: cssProperties.colors.veryLightGrey, + + /* ------------------------------------------------------ + SOLID BORDER BOX + ******************************************************** */ + solidBorderBox_TextColor: cssProperties.colors.black, + solidBorderBox_BackgroundColor: cssProperties.colors.white, + solidBorderBox_BorderColor: cssProperties.colors.veryLightGrey, + + /* ------------------------------------------------------ + BUTTONS + ******************************************************** */ /* ................. PRIMARY .................. */ - primaryButton_TextColor: css_properties.colors.black, - primaryButton_BackgroundColor: css_properties.colors.lightBlue, - primaryButton_BorderColor: css_properties.colors.lightBlue, + primaryButton_TextColor: cssProperties.colors.black, + primaryButton_BackgroundColor: cssProperties.colors.lightBlue, + primaryButton_BorderColor: cssProperties.colors.lightBlue, /* ................. SECONDARY .................. */ - secondaryButton_TextColor: css_properties.colors.black, - secondaryButton_BackgroundColor: css_properties.colors.veryLightGrey, - secondaryButton_BorderColor: css_properties.colors.veryLightGrey, + secondaryButton_TextColor: cssProperties.colors.black, + secondaryButton_BackgroundColor: cssProperties.colors.veryLightGrey, + secondaryButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. SUCCESS .................. */ - successButton_TextColor: css_properties.colors.white, - successButton_BackgroundColor: css_properties.colors.green, - successButton_BorderColor: css_properties.colors.green, + successButton_TextColor: cssProperties.colors.white, + successButton_BackgroundColor: cssProperties.colors.green, + successButton_BorderColor: cssProperties.colors.green, /* ................. DANGER .................. */ - dangerButton_TextColor: css_properties.colors.white, - dangerButton_BackgroundColor: css_properties.colors.red, - dangerButton_BorderColor: css_properties.colors.red, + dangerButton_TextColor: cssProperties.colors.white, + dangerButton_BackgroundColor: cssProperties.colors.red, + dangerButton_BorderColor: cssProperties.colors.red, /* ................. WARNING .................. */ - warningButton_TextColor: css_properties.colors.white, - warningButton_BackgroundColor: css_properties.colors.orange, - warningButton_BorderColor: css_properties.colors.orange, + warningButton_TextColor: cssProperties.colors.white, + warningButton_BackgroundColor: cssProperties.colors.orange, + warningButton_BorderColor: cssProperties.colors.orange, /* ................. INFO .................. */ - infoButton_TextColor: css_properties.colors.black, - infoButton_BackgroundColor: css_properties.colors.white, - infoButton_BorderColor: css_properties.colors.veryLightGrey, + infoButton_TextColor: cssProperties.colors.black, + infoButton_BackgroundColor: cssProperties.colors.white, + infoButton_BorderColor: cssProperties.colors.veryLightGrey, /* ................. SOLIDITY .................. */ // CALL - callButton_TextColor: css_properties.colors.black, - callButton_BackgroundColor: css_properties.colors.lightBlue, - callButton_BorderColor: css_properties.colors.lightBlue, + callButton_TextColor: cssProperties.colors.black, + callButton_BackgroundColor: cssProperties.colors.lightBlue, + callButton_BorderColor: cssProperties.colors.lightBlue, // TRANSACTION - transactButton_TextColor: css_properties.colors.black, - transactButton_BackgroundColor: css_properties.colors.lightRed, - transactButton_BorderColor: css_properties.colors.lightRed, + transactButton_TextColor: cssProperties.colors.black, + transactButton_BackgroundColor: cssProperties.colors.lightRed, + transactButton_BorderColor: cssProperties.colors.lightRed, // PAYABLE TRANSACTION - transactPayableButton_TextColor: css_properties.colors.black, - transactPayableButton_BackgroundColor: css_properties.colors.red, - transactPayableButton_BorderColor: css_properties.colors.red, + transactPayableButton_TextColor: cssProperties.colors.black, + transactPayableButton_BackgroundColor: cssProperties.colors.red, + transactPayableButton_BorderColor: cssProperties.colors.red, - /******************************************************** - UI ELEMENTS - ******************************************************** */ + /* ------------------------------------------------------ + UI ELEMENTS + ******************************************************** */ uiElements: { - solidBorderBox: (opts = {}) => ` - background-color : ${opts.BackgroundColor}; - border : 1px solid ${opts.BorderColor}; - color : ${opts.Color}; - border-radius : ${css_properties.borders.primary_borderRadius}; - font-size : 12px; - padding : 10px 15px; - line-height : 20px; - overflow : hidden; - word-break : break-word; - width : 100%; + background-color : ${opts.BackgroundColor} + border : 1px solid ${opts.BorderColor} + color : ${opts.Color} + border-radius : ${cssProperties.borders.primary_borderRadius} + font-size : 12px + padding : 10px 15px + line-height : 20px + overflow : hidden + word-break : break-word + width : 100% `, dottedBorderBox: (opts = {}) => ` - background-color : ${opts.BackgroundColor}; - border : .2em dotted ${opts.BorderColor}; - color : ${opts.Color}; - border-radius : ${css_properties.borders.secondary_borderRadius}; - line-height : 20px; - padding : 8px 15px; - margin-bottom : 1em; - overflow : hidden; - word-break : break-word; + background-color : ${opts.BackgroundColor} + border : .2em dotted ${opts.BorderColor} + color : ${opts.Color} + border-radius : ${cssProperties.borders.secondary_borderRadius} + line-height : 20px + padding : 8px 15px + margin-bottom : 1em + overflow : hidden + word-break : break-word `, inputField: (opts = {}) => ` - background-color : ${opts.BackgroundColor}; - border : 1px solid ${opts.BorderColor}; - color : ${opts.Color}; - border-radius : ${css_properties.borders.secondary_borderRadius}; - height : 25px; - width : 250px; - padding : 0 8px; - overflow : hidden; - word-break : normal; + background-color : ${opts.BackgroundColor} + border : 1px solid ${opts.BorderColor} + color : ${opts.Color} + border-radius : ${cssProperties.borders.secondary_borderRadius} + height : 25px + width : 250px + padding : 0 8px + overflow : hidden + word-break : normal `, dropdown: (opts = {}) => ` - background-color : ${opts.BackgroundColor}; - border : 1px solid ${opts.BorderColor}; - color : ${opts.Color}; - font-size : 12px; - font-weight : bold; - padding : 0 8px; - text-decoration : none; - cursor : pointer; - border-radius : 3px; - height : 25px; - width : 250px; - text-align : center; - overflow : hidden; - word-break : normal; + background-color : ${opts.BackgroundColor} + border : 1px solid ${opts.BorderColor} + color : ${opts.Color} + font-size : 12px + font-weight : bold + padding : 0 8px + text-decoration : none + cursor : pointer + border-radius : 3px + height : 25px + width : 250px + text-align : center + overflow : hidden + word-break : normal `, button: (opts = {}) => ` - margin : 1px; - background-color : ${opts.BackgroundColor}; - border : .3px solid ${opts.BorderColor}; - color : ${opts.Color}; - display : flex; - align-items : center; - justify-content : center; - border-radius : 3px; - cursor : pointer; - min-height : 25px; - max-height : 25px; - width : 70px; - min-width : 70px; - font-size : 12px; - overflow : hidden; - word-break : normal; + margin : 1px + background-color : ${opts.BackgroundColor} + border : .3px solid ${opts.BorderColor} + color : ${opts.Color} + display : flex + align-items : center + justify-content : center + border-radius : 3px + cursor : pointer + min-height : 25px + max-height : 25px + width : 70px + min-width : 70px + font-size : 12px + overflow : hidden + word-break : normal ` } -} - -/* -------------------------------------------------------------------------- - - REMIX PROPERTIES - --------------------------------------------------------------------------- */ - -var remix_properties = { - -/******************************************************** - REMIX GENERAL -/******************************************************** */ - remix: { - - modalDialog_BackgroundColor_Primary: app_properties.primary_BackgroundColor, - modalDialog_text_Primary: app_properties.mainText_Color, - modalDialog_text_Secondary: app_properties.supportText_Color, - modalDialog_Header_Footer_BackgroundColor: app_properties.secondary_BackgroundColor, - modalDialog_Header_Footer_Color: app_properties.mainText_Color, - modalDialog_BoxDottedBorder_BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - modalDialog_BoxDottedBorder_BorderColor: app_properties.solidBorderBox_BorderColor, - modalDialog_BoxDottedBorder_Color: app_properties.solidBorderBox_TextColor, - modalDialog_CopyToClipboard_Icon_Color: app_properties.icon_Color, - modalDialog_CopyToClipboard_Icon_HoverColor: app_properties.icon_HoverColor - - }, - -/******************************************************** - LEFT PANEL (FILE PANEL) -/******************************************************** */ - leftPanel: { - - backgroundColor_Panel: app_properties.primary_BackgroundColor, - backgroundColor_FileExplorer: app_properties.secondary_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - - bar_Ghost: app_properties.ghostBar, - bar_Dragging: app_properties.draggingBar, - - icon_Color_Menu: app_properties.icon_Color, - icon_HoverColor_Menu: app_properties.icon_HoverColor, - - icon_Color_TogglePanel: app_properties.icon_Color, - icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, - - }, - -/******************************************************** - EDITOR -/******************************************************** */ - editor: { - - backgroundColor_Panel: app_properties.primary_BackgroundColor, - backgroundColor_Editor: app_properties.light_BackgroundColor, - backgroundColor_Tabs_Highlights: app_properties.secondary_BackgroundColor, - backgroundColor_DebuggerMode: app_properties.warning_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - text_Editor: '', - - icon_Color_Editor: app_properties.icon_Color, - icon_HoverColor_Editor: app_properties.icon_HoverColor, - - }, - -/******************************************************** - TERMINAL -/******************************************************** */ - terminal: { - - backgroundColor_Menu: app_properties.secondary_BackgroundColor, - backgroundColor_Terminal: app_properties.dark_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - text_RegularLog: app_properties.mainText_Color, - text_InfoLog: app_properties.supportText_Color, - text_ErrorLog: app_properties.errorText_Color, - text_Title_TransactionLog: app_properties.warningText_Color, - text_Regular_TransactionLog: app_properties.supportText_Color, - - icon_Color_TogglePanel: app_properties.icon_Color, - icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, - icon_Color_Menu: app_properties.icon_Color, - icon_HoverColor_Menu: app_properties.icon_HoverColor, - icon_Color_CopyToClipboard: app_properties.icon_Color, - icon_HoverColor_CopyToClipboard: app_properties.icon_HoverColor, - - bar_Ghost: app_properties.ghostBar, - bar_Dragging: app_properties.draggingBar, - - input_Search_MenuBar: app_properties.uiElements.inputField({ - BackgroundColor: app_properties.input_BackgroundColor, - BorderColor: app_properties.input_BorderColor, - Color: app_properties.input_TextColor - }), - - dropdown_Filter_MenuBar: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), - - button_Log_Debug: app_properties.uiElements.button({ - BackgroundColor: app_properties.warningButton_BackgroundColor, - BorderColor: app_properties.warningButton_BorderColor, - Color: app_properties.warningButton_TextColor - }), - - button_Log_Details: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }) - - }, - -/******************************************************** - RIGHT PANEL -/******************************************************** */ - rightPanel: { - - backgroundColor_Panel: app_properties.primary_BackgroundColor, - backgroundColor_Tab: app_properties.secondary_BackgroundColor, - BackgroundColor_Pre: app_properties.light_BackgroundColor, - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - - bar_Ghost: app_properties.ghostBar, - bar_Dragging: app_properties.draggingBar, - - icon_Color_TogglePanel: app_properties.icon_Color, - icon_HoverColor_TogglePanel: app_properties.icon_HoverColor, - - message_Warning_BackgroundColor: app_properties.warning_BackgroundColor, - message_Warning_BorderColor: app_properties.warning_BorderColor, - message_Warning_Color: app_properties.warning_TextColor, - - message_Error_BackgroundColor: app_properties.danger_BackgroundColor, - message_Error_BorderColor: app_properties.danger_BorderColor, - message_Error_Color: app_properties.danger_TextColor, - - message_Success_BackgroundColor: app_properties.success_BackgroundColor, - message_Success_BorderColor: app_properties.success_BorderColor, - message_Success_Color: app_properties.success_TextColor, - - /* :::::::::::::: - COMPILE TAB - ::::::::::::::: */ - compileTab: { - - button_Compile: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), - - button_Details: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }), + } - button_Publish: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }), + /* -------------------------------------------------------------------------- - dropdown_CompileContract: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), + REMIX PROPERTIES - box_CompileContainer: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), + -------------------------------------------------------------------------- */ - icon_WarnCompilation_Color: app_properties.warning_BackgroundColor, + var remixProperties = { + /* ------------------------------------------------------ + REMIX GENERAL + /* ------------------------------------------------------ */ + remix: { + modalDialog_BackgroundColor_Primary: appProperties.primary_BackgroundColor, + modalDialog_text_Primary: appProperties.mainText_Color, + modalDialog_text_Secondary: appProperties.supportText_Color, + modalDialog_Header_Footer_BackgroundColor: appProperties.secondary_BackgroundColor, + modalDialog_Header_Footer_Color: appProperties.mainText_Color, + modalDialog_BoxDottedBorder_BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + modalDialog_BoxDottedBorder_BorderColor: appProperties.solidBorderBox_BorderColor, + modalDialog_BoxDottedBorder_Color: appProperties.solidBorderBox_TextColor, + modalDialog_CopyToClipboard_Icon_Color: appProperties.icon_Color, + modalDialog_CopyToClipboard_Icon_HoverColor: appProperties.icon_HoverColor }, - /* :::::::::::::: - RUN TAB - ::::::::::::::: */ - runTab: { - - box_RunTab: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), - - dropdown_RunTab: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), + /* ------------------------------------------------------ + LEFT PANEL (FILE PANEL) + /* ------------------------------------------------------ */ + leftPanel: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_FileExplorer: appProperties.secondary_BackgroundColor, - input_RunTab: app_properties.uiElements.inputField({ - BackgroundColor: app_properties.input_BackgroundColor, - BorderColor: app_properties.input_BorderColor, - Color: app_properties.input_TextColor - }), + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, - box_Instance: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, - button_atAddress: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), + icon_Color_Menu: appProperties.icon_Color, + icon_HoverColor_Menu: appProperties.icon_HoverColor, - button_Create: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), - - button_Instance_Call: app_properties.uiElements.button({ - BackgroundColor: app_properties.callButton_BackgroundColor, - BorderColor: app_properties.callButton_BorderColor, - Color: app_properties.callButton_TextColor - }), - - button_Instance_Transact: app_properties.uiElements.button({ - BackgroundColor: app_properties.transactButton_BackgroundColor, - BorderColor: app_properties.transactButton_BorderColor, - Color: app_properties.transactButton_TextColor - }), - - button_Instance_TransactPayable: app_properties.uiElements.button({ - BackgroundColor: app_properties.transactPayableButton_BackgroundColor, - BorderColor: app_properties.transactPayableButton_BorderColor, - Color: app_properties.transactPayableButton_TextColor - }), - - icon_Color_Instance_CopyToClipboard: app_properties.icon_Color, - icon_HoverColor_Instance_CopyToClipboard: app_properties.icon_HoverColor, + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor }, - /* :::::::::::::: - SETTINGS TAB - ::::::::::::::: */ - settingsTab: { + /* ------------------------------------------------------ + EDITOR + /* ------------------------------------------------------ */ + editor: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_Editor: appProperties.light_BackgroundColor, + backgroundColor_Tabs_Highlights: appProperties.secondary_BackgroundColor, + backgroundColor_DebuggerMode: appProperties.warning_BackgroundColor, - box_SolidityVersionInfo: app_properties.uiElements.dottedBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_Editor: '', - dropdown_SelectCompiler: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor - }), + icon_Color_Editor: appProperties.icon_Color, + icon_HoverColor_Editor: appProperties.icon_HoverColor }, - /* :::::::::::::: - DEBUGGER TAB - ::::::::::::::: */ - debuggerTab: { - - text_Primary: app_properties.mainText_Color, - text_Secondary: app_properties.supportText_Color, - - box_Debugger: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor + /* ------------------------------------------------------ + TERMINAL + /* ------------------------------------------------------ */ + terminal: { + backgroundColor_Menu: appProperties.secondary_BackgroundColor, + backgroundColor_Terminal: appProperties.dark_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + text_RegularLog: appProperties.mainText_Color, + text_InfoLog: appProperties.supportText_Color, + text_ErrorLog: appProperties.errorText_Color, + text_Title_TransactionLog: appProperties.warningText_Color, + text_Regular_TransactionLog: appProperties.supportText_Color, + + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor, + icon_Color_Menu: appProperties.icon_Color, + icon_HoverColor_Menu: appProperties.icon_HoverColor, + icon_Color_CopyToClipboard: appProperties.icon_Color, + icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor, + + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, + + input_Search_MenuBar: appProperties.uiElements.inputField({ + BackgroundColor: appProperties.input_BackgroundColor, + BorderColor: appProperties.input_BorderColor, + Color: appProperties.input_TextColor }), - button_Debugger: app_properties.uiElements.button({ - BackgroundColor: app_properties.secondaryButton_BackgroundColor, - BorderColor: app_properties.secondaryButton_BorderColor, - Color: app_properties.secondaryButton_TextColor - }), - - button_Debugger_icon_Color: app_properties.icon_Color, - button_Debugger_icon_HoverColor: app_properties.icon_HoverColor, - - dropdown_Debugger: app_properties.uiElements.dropdown({ - BackgroundColor: app_properties.dropdown_BackgroundColor, - BorderColor: app_properties.dropdown_BorderColor, - Color: app_properties.dropdown_TextColor + dropdown_Filter_MenuBar: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor }), - input_Debugger: app_properties.uiElements.inputField({ - BackgroundColor: app_properties.input_BackgroundColor, - BorderColor: app_properties.input_BorderColor, - Color: app_properties.input_TextColor + button_Log_Debug: appProperties.uiElements.button({ + BackgroundColor: appProperties.warningButton_BackgroundColor, + BorderColor: appProperties.warningButton_BorderColor, + Color: appProperties.warningButton_TextColor }), - debuggerDropdowns_Instructions_Highlight_BackgroundColor: app_properties.secondary_BackgroundColor - - }, - - /* :::::::::::::: - ANALYSIS TAB - ::::::::::::::: */ - analysisTab: { - - button_Run_AnalysisTab: app_properties.uiElements.button({ - BackgroundColor: app_properties.primaryButton_BackgroundColor, - BorderColor: app_properties.primaryButton_BorderColor, - Color: app_properties.primaryButton_TextColor - }), - - box_AnalysisContainer: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor, - }), + button_Log_Details: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }) }, - /* :::::::::::::: - SUPPORT TAB - ::::::::::::::: */ - supportTab: { - - box_IframeContainer: app_properties.uiElements.solidBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }), - - box_SupportInfo: app_properties.uiElements.dottedBorderBox({ - BackgroundColor: app_properties.solidBorderBox_BackgroundColor, - BorderColor:app_properties.solidBorderBox_BorderColor, - Color: app_properties.solidBorderBox_TextColor - }) + /* ------------------------------------------------------ + RIGHT PANEL + /* ------------------------------------------------------ */ + rightPanel: { + backgroundColor_Panel: appProperties.primary_BackgroundColor, + backgroundColor_Tab: appProperties.secondary_BackgroundColor, + BackgroundColor_Pre: appProperties.light_BackgroundColor, + + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + + bar_Ghost: appProperties.ghostBar, + bar_Dragging: appProperties.draggingBar, + + icon_Color_TogglePanel: appProperties.icon_Color, + icon_HoverColor_TogglePanel: appProperties.icon_HoverColor, + + message_Warning_BackgroundColor: appProperties.warning_BackgroundColor, + message_Warning_BorderColor: appProperties.warning_BorderColor, + message_Warning_Color: appProperties.warning_TextColor, + + message_Error_BackgroundColor: appProperties.danger_BackgroundColor, + message_Error_BorderColor: appProperties.danger_BorderColor, + message_Error_Color: appProperties.danger_TextColor, + + message_Success_BackgroundColor: appProperties.success_BackgroundColor, + message_Success_BorderColor: appProperties.success_BorderColor, + message_Success_Color: appProperties.success_TextColor, + + /* :::::::::::::: + COMPILE TAB + ::::::::::::::: */ + compileTab: { + button_Compile: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + button_Details: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + button_Publish: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + dropdown_CompileContract: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + box_CompileContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + icon_WarnCompilation_Color: appProperties.warning_BackgroundColor + + }, + + /* :::::::::::::: + RUN TAB + ::::::::::::::: */ + runTab: { + box_RunTab: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + dropdown_RunTab: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + input_RunTab: appProperties.uiElements.inputField({ + BackgroundColor: appProperties.input_BackgroundColor, + BorderColor: appProperties.input_BorderColor, + Color: appProperties.input_TextColor + }), + + box_Instance: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + button_atAddress: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + button_Create: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + button_Instance_Call: appProperties.uiElements.button({ + BackgroundColor: appProperties.callButton_BackgroundColor, + BorderColor: appProperties.callButton_BorderColor, + Color: appProperties.callButton_TextColor + }), + + button_Instance_Transact: appProperties.uiElements.button({ + BackgroundColor: appProperties.transactButton_BackgroundColor, + BorderColor: appProperties.transactButton_BorderColor, + Color: appProperties.transactButton_TextColor + }), + + button_Instance_TransactPayable: appProperties.uiElements.button({ + BackgroundColor: appProperties.transactPayableButton_BackgroundColor, + BorderColor: appProperties.transactPayableButton_BorderColor, + Color: appProperties.transactPayableButton_TextColor + }), + + icon_Color_Instance_CopyToClipboard: appProperties.icon_Color, + icon_HoverColor_Instance_CopyToClipboard: appProperties.icon_HoverColor + + }, + + /* :::::::::::::: + SETTINGS TAB + ::::::::::::::: */ + settingsTab: { + box_SolidityVersionInfo: appProperties.uiElements.dottedBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + dropdown_SelectCompiler: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }) + + }, + + /* :::::::::::::: + DEBUGGER TAB + ::::::::::::::: */ + debuggerTab: { + text_Primary: appProperties.mainText_Color, + text_Secondary: appProperties.supportText_Color, + + box_Debugger: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + button_Debugger: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + button_Debugger_icon_Color: appProperties.icon_Color, + button_Debugger_icon_HoverColor: appProperties.icon_HoverColor, + + dropdown_Debugger: appProperties.uiElements.dropdown({ + BackgroundColor: appProperties.dropdown_BackgroundColor, + BorderColor: appProperties.dropdown_BorderColor, + Color: appProperties.dropdown_TextColor + }), + + input_Debugger: appProperties.uiElements.inputField({ + BackgroundColor: appProperties.input_BackgroundColor, + BorderColor: appProperties.input_BorderColor, + Color: appProperties.input_TextColor + }), + + debuggerDropdowns_Instructions_Highlight_BackgroundColor: appProperties.secondary_BackgroundColor + + }, + + /* :::::::::::::: + ANALYSIS TAB + ::::::::::::::: */ + analysisTab: { + button_Run_AnalysisTab: appProperties.uiElements.button({ + BackgroundColor: appProperties.primaryButton_BackgroundColor, + BorderColor: appProperties.primaryButton_BorderColor, + Color: appProperties.primaryButton_TextColor + }), + + box_AnalysisContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }) + }, + + /* :::::::::::::: + SUPPORT TAB + ::::::::::::::: */ + supportTab: { + box_IframeContainer: appProperties.uiElements.solidBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }), + + box_SupportInfo: appProperties.uiElements.dottedBorderBox({ + BackgroundColor: appProperties.solidBorderBox_BackgroundColor, + BorderColor: appProperties.solidBorderBox_BorderColor, + Color: appProperties.solidBorderBox_TextColor + }) + + } } - } -} return { - colors: css_properties.colors, - app_properties: app_properties, - borders: css_properties.borders, - leftPanel: remix_properties.leftPanel, - editor: remix_properties.editor, - terminal: remix_properties.terminal, - rightPanel: remix_properties.rightPanel, - remix: remix_properties.remix + colors: cssProperties.colors, + appProperties: appProperties, + borders: cssProperties.borders, + leftPanel: remixProperties.leftPanel, + editor: remixProperties.editor, + terminal: remixProperties.terminal, + rightPanel: remixProperties.rightPanel, + remix: remixProperties.remix } } From 9aed0fb012768b45a0eda1677b7e4641e0e92733 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 4 Oct 2017 18:01:59 +0200 Subject: [PATCH 14/16] small fixes --- src/ui/styles/style-guide.js | 116 +++++++++++++++++------------------ 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 36a32abb17..6ae06fb26b 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -203,76 +203,76 @@ function styleGuide () { uiElements: { solidBorderBox: (opts = {}) => ` - background-color : ${opts.BackgroundColor} - border : 1px solid ${opts.BorderColor} - color : ${opts.Color} - border-radius : ${cssProperties.borders.primary_borderRadius} - font-size : 12px - padding : 10px 15px - line-height : 20px - overflow : hidden - word-break : break-word - width : 100% + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${cssProperties.borders.primary_borderRadius}; + font-size : 12px; + padding : 10px 15px; + line-height : 20px; + overflow : hidden; + word-break : break-word; + width : 100%; `, dottedBorderBox: (opts = {}) => ` - background-color : ${opts.BackgroundColor} - border : .2em dotted ${opts.BorderColor} - color : ${opts.Color} - border-radius : ${cssProperties.borders.secondary_borderRadius} - line-height : 20px - padding : 8px 15px - margin-bottom : 1em - overflow : hidden - word-break : break-word + background-color : ${opts.BackgroundColor}; + border : .2em dotted ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${cssProperties.borders.secondary_borderRadius}; + line-height : 20px; + padding : 8px 15px; + margin-bottom : 1em; + overflow : hidden; + word-break : break-word; `, inputField: (opts = {}) => ` - background-color : ${opts.BackgroundColor} - border : 1px solid ${opts.BorderColor} - color : ${opts.Color} - border-radius : ${cssProperties.borders.secondary_borderRadius} - height : 25px - width : 250px - padding : 0 8px - overflow : hidden - word-break : normal + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + border-radius : ${cssProperties.borders.secondary_borderRadius}; + height : 25px; + width : 250px; + padding : 0 8px; + overflow : hidden; + word-break : normal; `, dropdown: (opts = {}) => ` - background-color : ${opts.BackgroundColor} - border : 1px solid ${opts.BorderColor} - color : ${opts.Color} - font-size : 12px - font-weight : bold - padding : 0 8px - text-decoration : none - cursor : pointer - border-radius : 3px - height : 25px - width : 250px - text-align : center - overflow : hidden - word-break : normal + background-color : ${opts.BackgroundColor}; + border : 1px solid ${opts.BorderColor}; + color : ${opts.Color}; + font-size : 12px; + font-weight : bold; + padding : 0 8px; + text-decoration : none; + cursor : pointer; + border-radius : 3px; + height : 25px; + width : 250px; + text-align : center; + overflow : hidden; + word-break : normal; `, button: (opts = {}) => ` - margin : 1px - background-color : ${opts.BackgroundColor} - border : .3px solid ${opts.BorderColor} - color : ${opts.Color} - display : flex - align-items : center - justify-content : center - border-radius : 3px - cursor : pointer - min-height : 25px - max-height : 25px - width : 70px - min-width : 70px - font-size : 12px - overflow : hidden - word-break : normal + margin : 1px; + background-color : ${opts.BackgroundColor}; + border : .3px solid ${opts.BorderColor}; + color : ${opts.Color}; + display : flex; + align-items : center; + justify-content : center; + border-radius : 3px; + cursor : pointer; + min-height : 25px; + max-height : 25px; + width : 70px; + min-width : 70px; + font-size : 12px; + overflow : hidden; + word-break : normal; ` } } From a0e144851310d82fd07d39ddba06ab06ade236a6 Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 5 Oct 2017 04:04:58 +0100 Subject: [PATCH 15/16] Change colors for transaction log and warning button --- src/ui/styles/style-guide.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 6ae06fb26b..18c5a59102 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -27,6 +27,7 @@ function styleGuide () { lightGrey: 'hsla(0, 0%, 40%, .5)', veryLightGrey: 'hsla(0, 0%, 40%, .2)', // RED + strongRed: 'hsla(0, 100%, 71%, 1)', red: 'hsla(0, 82%, 82%, 1)', lightRed: 'hsla(0, 82%, 82%, .5)', // GREEN @@ -72,7 +73,6 @@ function styleGuide () { secondary_BackgroundColor: cssProperties.colors.backgroundBlue, dark_BackgroundColor: cssProperties.colors.veryLightGrey, light_BackgroundColor: cssProperties.colors.white, - /* ------------------------------------------------------ RESIZING ******************************************************** */ @@ -84,9 +84,9 @@ function styleGuide () { ******************************************************** */ mainText_Color: cssProperties.colors.black, supportText_Color: cssProperties.colors.grey, - errorText_Color: cssProperties.colors.red, + errorText_Color: cssProperties.colors.strongRed, warningText_Color: cssProperties.colors.orange, - + infoText_Color: cssProperties.colors.violet, /* ------------------------------------------------------ ICONS ******************************************************** */ @@ -168,8 +168,8 @@ function styleGuide () { WARNING .................. */ warningButton_TextColor: cssProperties.colors.white, - warningButton_BackgroundColor: cssProperties.colors.orange, - warningButton_BorderColor: cssProperties.colors.orange, + warningButton_BackgroundColor: cssProperties.colors.lightOrange, + warningButton_BorderColor: cssProperties.colors.lightOrange, /* ................. INFO @@ -352,7 +352,7 @@ function styleGuide () { text_RegularLog: appProperties.mainText_Color, text_InfoLog: appProperties.supportText_Color, text_ErrorLog: appProperties.errorText_Color, - text_Title_TransactionLog: appProperties.warningText_Color, + text_Title_TransactionLog: appProperties.infoText_Color, text_Regular_TransactionLog: appProperties.supportText_Color, icon_Color_TogglePanel: appProperties.icon_Color, @@ -385,8 +385,8 @@ function styleGuide () { button_Log_Details: appProperties.uiElements.button({ BackgroundColor: appProperties.secondaryButton_BackgroundColor, - BorderColor: appProperties.secondaryButton_BorderColor, - Color: appProperties.secondaryButton_TextColor + BorderColor: appProperties.warningButton_BorderColor, + Color: appProperties.warningButton_TextColor }) }, From 94aa6422aef0166f4b6454dc625186d54efe774f Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Thu, 5 Oct 2017 22:41:54 +0100 Subject: [PATCH 16/16] Update style-guide --- src/ui/styles/style-guide.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 18c5a59102..a98adf5c00 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -329,6 +329,8 @@ function styleGuide () { backgroundColor_Panel: appProperties.primary_BackgroundColor, backgroundColor_Editor: appProperties.light_BackgroundColor, backgroundColor_Tabs_Highlights: appProperties.secondary_BackgroundColor, + backgroundColor_Editor_Context_Highlights: appProperties.dark_BackgroundColor, + backgroundColor_Editor_Context_Error_Highlights: appProperties.error_BackgroundColor, backgroundColor_DebuggerMode: appProperties.warning_BackgroundColor, text_Primary: appProperties.mainText_Color,