Dialog Ng

Dialog Ng

<div ng-app="Example.dialog" ng-strict-di class="long-page">

  <script type="template" id="dialog-template">
    <div class="form-with-inputs">
      <div class="ring-form__group">
        <rg-input id="dialog__key" label="Key" type="text">
      </div>

      <div class="ring-form__group">
        <rg-input id="dialog__name" label="Name" type="text"
                  error="Wrong value"></rg-input>
        <div class="ring-form__control__description">Description</div>
      </div>

      <div class="ring-form__group">
        <rg-input id="textarea-demo" multiline="true" label="Textarea"></rg-input>
      </div>

      <div class="ring-form__group">
        <rg-select
          options="item.name for item in dialogExampleCtrl.arr track by item.name"
          id="rg-select-demo"
          label="Select name"
        ></rg-select>
      </div>

    </div>
  </script>

  <div rg-dialog=""></div>
  <div ng-controller="ExampleCtrl as ctrl">
    <rg-button ng-click="ctrl.showDialog()">Show dialog</rg-button>
  </div>
</div>

:global(.custom-css-class-button-right) {
  float: right;
  color: #C10000;
}

:global(.form-with-inputs) {
  margin-top: -16px;
}

:global(.long-page) {
  height: 2000px;
}

:global(.high-field.high-field) {
  padding: 0;
  line-height: 32px;
}

import 'angular/angular';
import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
import Select from '@jetbrains/ring-ui/components/select-ng/select-ng';
import Button from '@jetbrains/ring-ui/components/button-ng/button-ng';
import Input from '@jetbrains/ring-ui/components/input-ng/input-ng';

angular.module('Example.dialog', [Dialog, Select, Button, Input]).
  controller('ExampleCtrl', function ($q, $timeout, dialog) {
    this.showDialog = function () {
      dialog.show({
        cssClass: 'custom-css-class',
        title: 'Test',
        closeOnClick: true,
        shortcuts: {
          'ctrl+enter': angular.noop
        },
        template: document.getElementById('dialog-template').innerHTML,
        controllerAs: 'dialogExampleCtrl',
        controller: 'DialogExampleCtrl',
        buttons: [
          {
            label: 'Save',
            default: true,
            action: angular.noop
          },
          {
            label: 'Cancel',
            close: true
          },
          {
            label: 'Dangerous Action',
            cssClasses: 'custom-css-class-button-right',
            action: function () {
              return $timeout(angular.noop, 2000).
                then(() => $q.reject('Some error'));
            }
          }
        ]
      })
        .catch(() => console.log('dialog rejected'));
    };

    $timeout(() => this.showDialog());
  }).
  controller('DialogExampleCtrl', function () {
    var dialogExampleCtrl = this;
    dialogExampleCtrl.arr = [{name: 'Ada'}, {name: 'Nik'}];
  });

Dialog Ng in sidebar

<div ng-app="Example.dialog" ng-strict-di>

  <script type="template" id="dialog-template">
    <div>
      <div class="ring-form__group">
        <rg-input id="dialog__key" type="text" label="Key">
      </div>
    </div>
  </script>

  <rg-sidebar show="true">
    <rg-dialog in-sidebar="true" active="true"></rg-dialog>
  </rg-sidebar>

  <div ng-controller="ExampleCtrl as ctrl">
    <rg-button ng-click="ctrl.showDialog()">Show dialog</rg-button>
  </div>
</div>

import angular from 'angular';
import Sidebar from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng'
import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
import Select from '@jetbrains/ring-ui/components/select-ng/select-ng';
import Button from '@jetbrains/ring-ui/components/button-ng/button-ng';
import Input from '@jetbrains/ring-ui/components/input-ng/input-ng';

angular.module('Example.dialog', [Dialog, Select, Button, Sidebar, Input]).
  controller('ExampleCtrl', function ($q, $timeout, dialogInSidebar) {
    this.showDialog = function () {
      dialogInSidebar.show({
        title: 'Test',
        shortcuts: {
          'ctrl+enter': angular.noop
        },
        template: document.getElementById('dialog-template').innerHTML,
        controllerAs: 'dialogExampleCtrl',
        controller: function () {
          this.arr = [{name: 'Ada'}, {name: 'Nik'}];
        },
        buttons: [
          {
            label: 'Save',
            default: true,
            action: angular.noop
          },
          {
            label: 'Cancel',
            close: true
          }
        ]
      });
    };

    $timeout(() => this.showDialog(), 500);
  });

Dialog Ng with Overridden Styles

<div ng-app="Example.dialog" ng-strict-di class="long-page">

  <script type="template" id="dialog-template">
    <div>
      <div class="ring-form__group">
        <rg-input id="dialog__key" type="text" label="Key">
      </div>

      <rg-dialog-footer>
        <rg-button>A button</rg-button>
      </rg-dialog-footer>
    </div>
  </script>

  <div rg-dialog=""></div>
  <div ng-controller="ExampleCtrl as ctrl">
    <rg-button ng-click="ctrl.showDialog()">Show dialog</rg-button>
  </div>
</div>

:global(.long-page) {
  height: 2000px;
}
:global(.custom-css-class) {
  padding: 40px;
}

import angular from 'angular';
import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
import Button from '@jetbrains/ring-ui/components/button-ng/button-ng';
import Input from '@jetbrains/ring-ui/components/input-ng/input-ng';

angular.module('Example.dialog', [Dialog, Button, Input]).
  controller('ExampleCtrl', function ($q, $timeout, dialog) {
    this.showDialog = function () {
      dialog.show({
        cssClass: 'custom-css-class',
        title: 'Test',
        closeOnClick: true,
        template: document.getElementById('dialog-template').innerHTML,
        controllerAs: 'dialogExampleCtrl',
        controller: function () {},
      }).catch(() => console.log('dialog rejected'));
    };

    $timeout(() => this.showDialog());
  });