blockchained

7 лет назад

🛠 Руководство по кастомизации пользовательского интерфейса Bitshares

Тематическое оформление/модификация пользовательского интерфейса

Данный проект руководства предназначен для более старой версии пользовательского интерфейса Bitshares (Bitshares-UI); его последующие обновления повысят точность / качество руководства. Руководство включает в себя открытый исходный код и доступно на GitHub под лицензией MIT. Я был бы признателен вам за участие в работе над руководством и предложения по внесению изменений в исходный код.

Приступая к работе

Примечание: данный раздел был скопирован из файла readme.md в Bitshares-UI на GitHub, благодарю svk31, valzav, wmbutler, jcalfee и noisy за содействие и поддержку.

BitShares-UI разработан с использованием модуля Node.js, для корректной работы требуется версия 6+. Тестирование на версии 7 еще не проводилось.

В Ubuntu и OSX самым простым способом установки Node является использование диспетчера версий узлов (NVM).
Чтобы установить NVM для Linux / OSX, просто скопируйте в терминал следующий программный код:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
nvm install v6
nvm use v6

После установки Node Вы можете клонировать репозиторий:

git clone https://github.com/bitshares/bitshares-ui.git
cd bitshares-ui

Перед запуском GUI вам необходимо установить npm пакеты для каждого подкаталога:

cd web
npm install

Запуск dev-сервера (сервера разработки)

Dev-сервер использует Express в сочетании с Wepback 2.

После того, как все пакеты были установлены, вы можете запустить сервер разработки, перейдя в папку web и выполнив команду:

npm start

После компиляции GUI-интерфейс будет доступен в вашем браузере по адресу: localhost: 8080 или 127.0.0.1:8080. Так как включена возможность Hot Reloading, при редактировании исходных файлов изменения будут отображены в браузере без перезагрузки страницы.

Production-сборка

Если вы хотите где-либо разместить свой собственный кошелёк, вы должны создать production-сборку и разместить её на сервере с использованием NGINX или Apache. Чтобы создать production-сборку, необходимо выполнить следующую команду:
Npm run build

Данная команда создаст в папке /dist проект, который может быть размещён на выбранном вами веб-сервере.

Инсталлируемые кошельки

Для поддержки инсталлируемых кошельков в Windows, OSX, а также операционных системах, основанных на Debian GNU/Linux, например, Ubuntu, мы используем фреймворк Electron. Сначала установите необходимые пакеты в папку electron. Затем перейдите в папку web и выполните команду npm run electron. Данная команда скомпилирует пользовательский интерфейс с некоторыми специальными модификациями для использования Electron и скопирует результат в корневую папку electron/build. Теперь вернитесь в папку electron и выполните команду npm run release, чтобы создать кошелёк для вашей платформы.

Шапка веб-проекта (Header)

В файле Header.jsx вы можете внести изменения в навигационную панель веб-проекта!

web/app/components/Layout/Header.jsx

Изменение логотипа

Логотип проекта определяется следующей строкой кода в файле header.jsx:

var logo = require("assets/logo-ico-blue.png");

Либо измените данную строку кода, указав путь к файлу нового логотипа, либо замените файл logo-ico-blue.png файлом нового логотипа.

Для справки, размер логотипа BTS по умолчанию составляет 50×66 пикселей.

Добавление новых элементов в навигационное меню

Например, чтобы создать собственное раскрывающееся меню accountsDropDown, скопируем в файл header.jsx следующий программный код:

Создание раскрывающегося меню actionsheet

LET ourDropDown =
    <ActionSheet>
        <ActionSheet.Button title="">
            <a style={{padding: "1rem", border: "none"}} className="button">
                 &nbsp;Our DropDown&nbsp;
                <Icon className="icon-14px" name="chevron-down"/>
            </a>
        </ActionSheet.Button>
        <ActionSheet.Content >
            <ul className="no-first-element-top-border">
                <li>
                    <a href="https://www.steemit.com">Steemit</a>
                </li>
                <li>
                    <a href="https://www.google.com">Google</a>
                </li>
            </ul>
        </ActionSheet.Content>
    </ActionSheet>;
}

HTML-код добавления раскрывающегося меню

<div className="grp-menu-item overflow-visible account-drop-down">
    {ourDropDown}
</div>

web/app/components/Layout/Footer.jsx

В разделе подвал веб-проекта вашей децентрализованной биржи вы можете оставить какое-либо сообщение или указать контактные данные. Например, в Openledger добавлены ссылки на техническую поддержку, подписку на новостную рассылку, форму добавления новых монет, а также данные о текущем состоянии сети BTS.

Панель управления / Индекс

Вы можете изменить иконку, заголовок/метаданные, а также добавить любые необходимые инструменты аналитики/скрипты.

web/app/assets/index-dev.html
web/app/assets/index-electron.html
web/app/assets/index.html

Не изменяйте CORE_ASSET

BTS установлен как CORE_ASSET по умолчанию для Bitshares, дабы предотвратить проблемы с загрузкой при работе с блокчейном BTS, что в настоящее время является наиболее частым случаем.

Торговые пары биржи

web/app/stores/SettingsStore.js

Вы можете добавить/удалить любое количество токенов, только не забудьте добавить логотипы для новых.

Обратите внимание, что «4018d784» означает главную сеть (mainnet), а «39f5e2ed» – тестовую (testnet).

let topMarkets = {
    markets_4018d784: [ // BTS MAIN NET
        "OPEN.MKR", "BTS", "OPEN.ETH", "ICOO", "BTC", "OPEN.LISK", "BKT",
        "OPEN.STEEM", "OPEN.GAME", "OCT", "USD", "CNY", "BTSR", "OBITS",
        "OPEN.DGD", "EUR", "GOLD", "SILVER", "IOU.CNY", "OPEN.DASH",
        "OPEN.USDT", "OPEN.EURT", "OPEN.BTC", "CADASTRAL", "BLOCKPAY", "BTWTY",
        "OPEN.INCNT", "KAPITAL", "OPEN.MAID", "OPEN.SBD", "OPEN.GRC", "YOURASSET",
        "YOYOW", "HERO", "RUBLE"
    ],
    markets_39f5e2ed: [ // TESTNET
        "PEG.FAKEUSD", "YOURASSET", "BTWTY"
    ]
};

let bases = {
    markets_4018d784: [ // BTS MAIN NET
        "USD", "OPEN.BTC", "CNY", "BTS", "BTC", "YOURASSET"
    ],
    markets_39f5e2ed: [ // TESTNET
        "TEST", "YOURASSET"
    ]
};

Внесение изменений в настройки по умолчанию (defaults):

        let defaults = {
            unit: [
                CORE_ASSET,
                "USD",
                "CNY",
                "BTC",
                "EUR",
                "YOURASSET"
            ]
};

Тематическое оформление интерфейса

Создание новой темы

Когда мы говорим о «теме», мы имеем в виду не содержание страницы или макет, а скорее, цветовую схему, используемую в децентрализованной бирже BTS. Каждый элемент в файле темы можно относительно легко изменить.

Гораздо проще сделать тему, которая смотрится ужасно, поэтому подумайте о цветовой палитре, которую собираетесь использовать для оформления веб-сайта и аккаунта. Цветовая схема должна облегчать читаемость и повышать доступность для пользователей с ограниченными возможностями.

Возможно, будет полезным временно по одному изменить цвет каждого элемента на очень яркий, чтобы понять изменения, которые происходят. Вы можете это сделать при запуске веб-кошелька в режиме dev, поскольку он мгновенно отображает изменения, вносимые вами в код.

Структура файла тематического оформления

@import "theme-template";

// variables

$light-text-color: #fff;
$dark-text-color: #444;
$primary-text-color: #ffffff;
$secondary-text-color: darken($primary-text-color, 20%);
$link-text-color: #4A90E2;
$error-text-color: #E3745B;

$bg-color: #2a2a2a;
$panel-bg-color: #3f3f3f;
$light-panel-bg-color: #6a6a6a;
$super-light-panel-bg-color: lighten($light-panel-bg-color, 8%);
$button-bg-color: #4A90E2;
$secondary-button-bg-color: #999999;
$input-background: lighten($bg-color, 8%);

$alert-color: $error-text-color;
$info-color: #A0D3E8;
$success-color: #50D2C2;
$warning-color: #FCAB53;
$fee-color: $secondary-text-color;

// Exchange colors
$bid-color: #6BA583;
$ask-color: #E3745B;
$call-color: #BBBF2B;
$positive-color: #258A14;
$negative-color: #DB0000;
$row-accent-color: #3C3C3C;
$header-color: #484848;

// Chat colors
$chat-text-color: #191A1F;

.yourTheme {
  @include theme(
    $primary-text-color,
    $bg-color,
    $dark-text-color,
    $link-text-color,
    $light-text-color,
    $secondary-text-color,
    $success-color,
    $info-color,
    $warning-color,
    $alert-color,
    $super-light-panel-bg-color,
    $panel-bg-color,
    $button-bg-color,
    $secondary-button-bg-color,
    $fee-color,
    $bid-color,
    $ask-color,
    $call-color,
    $light-panel-bg-color,
    $positive-color,
    $negative-color,
    $row-accent-color,
    $header-color,
    $chat-text-color,
    $input-background
  );
}

Добавление кастомной темы

Вы можете добавить собственную тему к уже существующим в список раскрывающегося меню выбора тем в настройках Bitshares.

Добавление переводов имени темы

Поиск по существующему имени темы 'olDarkTheme' показывает строки в каждом из файлов перевода, расположенных в "\web\app\assets\locales". Вам нужно добавить перевод имени вашей новой темы в каждый из файлов 'locale_xx.json' (замените xx языком перевода) в раздел 'settings':

"settings": {
  [ irrelevant text ]
  "themes": "Tema",
  "darkTheme": "Koyu tema",
  "lightTheme": "Açık tema",
  "olDarkTheme": "Openledger koyu",
  [ irrelevant text ]
},

Используйте подобный формат:

"yourThemeName": "yourTranslatedThemeName"

Способностей переводчика Google должно быть для этого достаточно, или же, если вы ленивы, вы можете просто вставить в качестве переводов английское имя темы.

Если вы не вставите переводы, выпадающее меню тем будет отображать ошибку перевода!

Добавьте свою тему в следующие файлы:

web/app/assets/colors.js
web/app/assets/stylesheets/themes/_all.scss
web/app/stores/SettingsStore.js

Добавьте файл вашей темы в папку тем:

web/app/assets/stylesheets/themes/_yourTheme.scss

Примеры различных веб-кошельков Bitshares

Ниже представлены несколько примеров реализаций веб-кошельков Bitshares, в которых используются различные темы оформления, разметка страницы и языки интерфейса.