mirror of https://github.com/grafana/grafana
Torkel Ödegaard
8 years ago
parent
84b1519480
commit
fed35909cc
@ -0,0 +1,39 @@ |
||||
import * as React from 'react'; |
||||
import * as ReactDOM from 'react-dom'; |
||||
import coreModule from '../core_module'; |
||||
|
||||
export interface IProps { |
||||
password: string; |
||||
} |
||||
|
||||
export class PasswordStrength extends React.Component<IProps, any> { |
||||
|
||||
constructor(props) { |
||||
super(props); |
||||
} |
||||
|
||||
render() { |
||||
let strengthText = "strength: strong like a bull."; |
||||
let strengthClass = "password-strength-good"; |
||||
|
||||
if (this.props.password.length < 4) { |
||||
strengthText = "strength: weak sauce."; |
||||
strengthClass = "password-strength-bad"; |
||||
} |
||||
|
||||
if (this.props.password.length <= 8) { |
||||
strengthText = "strength: you can do better."; |
||||
strengthClass = "password-strength-ok"; |
||||
} |
||||
|
||||
return ( |
||||
<div className={`password-strength small ${strengthClass}`}> |
||||
<em>{strengthText}</em> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
coreModule.directive('passwordStrength', function(reactDirective) { |
||||
return reactDirective(PasswordStrength, ['password']); |
||||
}); |
||||
@ -1,58 +0,0 @@ |
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import coreModule from 'app/core/core_module'; |
||||
|
||||
const template = ` |
||||
<div class="collapse-box"> |
||||
<div class="collapse-box__header"> |
||||
<a class="collapse-box__header-title pointer" ng-click="ctrl.toggle()"> |
||||
<span class="fa fa-fw fa-caret-right" ng-hide="ctrl.isOpen"></span> |
||||
<span class="fa fa-fw fa-caret-down" ng-hide="!ctrl.isOpen"></span> |
||||
{{ctrl.title}} |
||||
</a> |
||||
<div class="collapse-box__header-actions" ng-transclude="actions" ng-if="ctrl.isOpen"></div> |
||||
</div> |
||||
<div class="collapse-box__body" ng-transclude="body" ng-if="ctrl.isOpen"> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
|
||||
export class CollapseBoxCtrl { |
||||
isOpen: boolean; |
||||
stateChanged: () => void; |
||||
|
||||
/** @ngInject **/ |
||||
constructor(private $timeout) { |
||||
this.isOpen = false; |
||||
} |
||||
|
||||
toggle() { |
||||
this.isOpen = !this.isOpen; |
||||
this.$timeout(() => { |
||||
this.stateChanged(); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
export function collapseBox() { |
||||
return { |
||||
restrict: 'E', |
||||
template: template, |
||||
controller: CollapseBoxCtrl, |
||||
bindToController: true, |
||||
controllerAs: 'ctrl', |
||||
scope: { |
||||
"title": "@", |
||||
"isOpen": "=?", |
||||
"stateChanged": "&" |
||||
}, |
||||
transclude: { |
||||
'actions': '?collapseBoxActions', |
||||
'body': 'collapseBoxBody', |
||||
}, |
||||
link: function(scope, elem, attrs) { |
||||
} |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('collapseBox', collapseBox); |
||||
@ -1,211 +0,0 @@ |
||||
// ///<reference path="../../headers/common.d.ts" />
|
||||
//
|
||||
// import _ from 'lodash';
|
||||
//
|
||||
// var objectAssign = require('object-assign');
|
||||
// var Emitter = require('tiny-emitter');
|
||||
// var Lethargy = require('lethargy').Lethargy;
|
||||
// var support = require('./support');
|
||||
// var clone = require('./clone');
|
||||
// var bindAll = require('bindall-standalone');
|
||||
// var EVT_ID = 'virtualscroll';
|
||||
//
|
||||
// var keyCodes = {
|
||||
// LEFT: 37,
|
||||
// UP: 38,
|
||||
// RIGHT: 39,
|
||||
// DOWN: 40
|
||||
// };
|
||||
//
|
||||
// function VirtualScroll(this: any, options) {
|
||||
// _.bindAll(this, '_onWheel', '_onMouseWheel', '_onTouchStart', '_onTouchMove', '_onKeyDown');
|
||||
//
|
||||
// this.el = window;
|
||||
// if (options && options.el) {
|
||||
// this.el = options.el;
|
||||
// delete options.el;
|
||||
// }
|
||||
//
|
||||
// this.options = _.assign({
|
||||
// mouseMultiplier: 1,
|
||||
// touchMultiplier: 2,
|
||||
// firefoxMultiplier: 15,
|
||||
// keyStep: 120,
|
||||
// preventTouch: false,
|
||||
// unpreventTouchClass: 'vs-touchmove-allowed',
|
||||
// limitInertia: false
|
||||
// }, options);
|
||||
//
|
||||
// if (this.options.limitInertia) this._lethargy = new Lethargy();
|
||||
//
|
||||
// this._emitter = new Emitter();
|
||||
// this._event = {
|
||||
// y: 0,
|
||||
// x: 0,
|
||||
// deltaX: 0,
|
||||
// deltaY: 0
|
||||
// };
|
||||
//
|
||||
// this.touchStartX = null;
|
||||
// this.touchStartY = null;
|
||||
// this.bodyTouchAction = null;
|
||||
// }
|
||||
//
|
||||
// VirtualScroll.prototype._notify = function(e) {
|
||||
// var evt = this._event;
|
||||
// evt.x += evt.deltaX;
|
||||
// evt.y += evt.deltaY;
|
||||
//
|
||||
// this._emitter.emit(EVT_ID, {
|
||||
// x: evt.x,
|
||||
// y: evt.y,
|
||||
// deltaX: evt.deltaX,
|
||||
// deltaY: evt.deltaY,
|
||||
// originalEvent: e
|
||||
// });
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._onWheel = function(e) {
|
||||
// var options = this.options;
|
||||
// if (this._lethargy && this._lethargy.check(e) === false) return;
|
||||
//
|
||||
// var evt = this._event;
|
||||
//
|
||||
// // In Chrome and in Firefox (at least the new one)
|
||||
// evt.deltaX = e.wheelDeltaX || e.deltaX * -1;
|
||||
// evt.deltaY = e.wheelDeltaY || e.deltaY * -1;
|
||||
//
|
||||
// // for our purpose deltamode = 1 means user is on a wheel mouse, not touch pad
|
||||
// // real meaning: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent#Delta_modes
|
||||
// if(support.isFirefox && e.deltaMode == 1) {
|
||||
// evt.deltaX *= options.firefoxMultiplier;
|
||||
// evt.deltaY *= options.firefoxMultiplier;
|
||||
// }
|
||||
//
|
||||
// evt.deltaX *= options.mouseMultiplier;
|
||||
// evt.deltaY *= options.mouseMultiplier;
|
||||
//
|
||||
// this._notify(e);
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._onMouseWheel = function(e) {
|
||||
// if (this.options.limitInertia && this._lethargy.check(e) === false) return;
|
||||
//
|
||||
// var evt = this._event;
|
||||
//
|
||||
// // In Safari, IE and in Chrome if 'wheel' isn't defined
|
||||
// evt.deltaX = (e.wheelDeltaX) ? e.wheelDeltaX : 0;
|
||||
// evt.deltaY = (e.wheelDeltaY) ? e.wheelDeltaY : e.wheelDelta;
|
||||
//
|
||||
// this._notify(e);
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._onTouchStart = function(e) {
|
||||
// var t = (e.targetTouches) ? e.targetTouches[0] : e;
|
||||
// this.touchStartX = t.pageX;
|
||||
// this.touchStartY = t.pageY;
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._onTouchMove = function(e) {
|
||||
// var options = this.options;
|
||||
// if(options.preventTouch
|
||||
// && !e.target.classList.contains(options.unpreventTouchClass)) {
|
||||
// e.preventDefault();
|
||||
// }
|
||||
//
|
||||
// var evt = this._event;
|
||||
//
|
||||
// var t = (e.targetTouches) ? e.targetTouches[0] : e;
|
||||
//
|
||||
// evt.deltaX = (t.pageX - this.touchStartX) * options.touchMultiplier;
|
||||
// evt.deltaY = (t.pageY - this.touchStartY) * options.touchMultiplier;
|
||||
//
|
||||
// this.touchStartX = t.pageX;
|
||||
// this.touchStartY = t.pageY;
|
||||
//
|
||||
// this._notify(e);
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._onKeyDown = function(e) {
|
||||
// var evt = this._event;
|
||||
// evt.deltaX = evt.deltaY = 0;
|
||||
//
|
||||
// switch(e.keyCode) {
|
||||
// case keyCodes.LEFT:
|
||||
// case keyCodes.UP:
|
||||
// evt.deltaY = this.options.keyStep;
|
||||
// break;
|
||||
//
|
||||
// case keyCodes.RIGHT:
|
||||
// case keyCodes.DOWN:
|
||||
// evt.deltaY = - this.options.keyStep;
|
||||
// break;
|
||||
//
|
||||
// default:
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// this._notify(e);
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._bind = function() {
|
||||
// if(support.hasWheelEvent) this.el.addEventListener('wheel', this._onWheel);
|
||||
// if(support.hasMouseWheelEvent) this.el.addEventListener('mousewheel', this._onMouseWheel);
|
||||
//
|
||||
// if(support.hasTouch) {
|
||||
// this.el.addEventListener('touchstart', this._onTouchStart);
|
||||
// this.el.addEventListener('touchmove', this._onTouchMove);
|
||||
// }
|
||||
//
|
||||
// if(support.hasPointer && support.hasTouchWin) {
|
||||
// this.bodyTouchAction = document.body.style.msTouchAction;
|
||||
// document.body.style.msTouchAction = 'none';
|
||||
// this.el.addEventListener('MSPointerDown', this._onTouchStart, true);
|
||||
// this.el.addEventListener('MSPointerMove', this._onTouchMove, true);
|
||||
// }
|
||||
//
|
||||
// if(support.hasKeyDown) document.addEventListener('keydown', this._onKeyDown);
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype._unbind = function() {
|
||||
// if(support.hasWheelEvent) this.el.removeEventListener('wheel', this._onWheel);
|
||||
// if(support.hasMouseWheelEvent) this.el.removeEventListener('mousewheel', this._onMouseWheel);
|
||||
//
|
||||
// if(support.hasTouch) {
|
||||
// this.el.removeEventListener('touchstart', this._onTouchStart);
|
||||
// this.el.removeEventListener('touchmove', this._onTouchMove);
|
||||
// }
|
||||
//
|
||||
// if(support.hasPointer && support.hasTouchWin) {
|
||||
// document.body.style.msTouchAction = this.bodyTouchAction;
|
||||
// this.el.removeEventListener('MSPointerDown', this._onTouchStart, true);
|
||||
// this.el.removeEventListener('MSPointerMove', this._onTouchMove, true);
|
||||
// }
|
||||
//
|
||||
// if(support.hasKeyDown) document.removeEventListener('keydown', this._onKeyDown);
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype.on = function(cb, ctx) {
|
||||
// this._emitter.on(EVT_ID, cb, ctx);
|
||||
//
|
||||
// var events = this._emitter.e;
|
||||
// if (events && events[EVT_ID] && events[EVT_ID].length === 1) this._bind();
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype.off = function(cb, ctx) {
|
||||
// this._emitter.off(EVT_ID, cb, ctx);
|
||||
//
|
||||
// var events = this._emitter.e;
|
||||
// if (!events[EVT_ID] || events[EVT_ID].length <= 0) this._unbind();
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype.reset = function() {
|
||||
// var evt = this._event;
|
||||
// evt.x = 0;
|
||||
// evt.y = 0;
|
||||
// };
|
||||
//
|
||||
// VirtualScroll.prototype.destroy = function() {
|
||||
// this._emitter.off();
|
||||
// this._unbind();
|
||||
// };
|
||||
@ -1,32 +0,0 @@ |
||||
<div class="modal-body"> |
||||
<div class="modal-header"> |
||||
<h2 class="modal-header-title"> |
||||
<i class="fa fa-cog fa-spin"></i> |
||||
<span class="p-l-1">{{model.name}}</span> |
||||
</h2> |
||||
|
||||
<a class="modal-header-close" ng-click="dismiss();"> |
||||
<i class="fa fa-remove"></i> |
||||
</a> |
||||
</div> |
||||
|
||||
<div class="modal-content"> |
||||
<div ng-if="activeStep"> |
||||
|
||||
</div> |
||||
|
||||
<!-- <table class="filter-table"> --> |
||||
<!-- <tbody> --> |
||||
<!-- <tr ng-repeat="step in model.steps"> --> |
||||
<!-- <td>{{step.name}}</td> --> |
||||
<!-- <td>{{step.status}}</td> --> |
||||
<!-- <td width="1%"> --> |
||||
<!-- <i class="fa fa-check" style="color: #39A039"></i> --> |
||||
<!-- </td> --> |
||||
<!-- </tr> --> |
||||
<!-- </tbody> --> |
||||
<!-- </table> --> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
@ -1,73 +0,0 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import config from 'app/core/config'; |
||||
import _ from 'lodash'; |
||||
import $ from 'jquery'; |
||||
|
||||
import coreModule from 'app/core/core_module'; |
||||
import appEvents from 'app/core/app_events'; |
||||
|
||||
export class WizardSrv { |
||||
/** @ngInject */ |
||||
constructor() { |
||||
} |
||||
} |
||||
|
||||
export interface WizardStep { |
||||
name: string; |
||||
type: string; |
||||
process: any; |
||||
} |
||||
|
||||
export class SelectOptionStep { |
||||
type: string; |
||||
name: string; |
||||
fulfill: any; |
||||
|
||||
constructor() { |
||||
this.type = 'select'; |
||||
} |
||||
|
||||
process() { |
||||
return new Promise((fulfill, reject) => { |
||||
|
||||
}); |
||||
} |
||||
} |
||||
|
||||
export class WizardFlow { |
||||
name: string; |
||||
steps: WizardStep[]; |
||||
|
||||
constructor(name) { |
||||
this.name = name; |
||||
this.steps = []; |
||||
} |
||||
|
||||
addStep(step) { |
||||
this.steps.push(step); |
||||
} |
||||
|
||||
next(index) { |
||||
var step = this.steps[0]; |
||||
|
||||
return step.process().then(() => { |
||||
if (this.steps.length === index+1) { |
||||
return; |
||||
} |
||||
|
||||
return this.next(index+1); |
||||
}); |
||||
} |
||||
|
||||
start() { |
||||
appEvents.emit('show-modal', { |
||||
src: 'public/app/core/components/wizard/wizard.html', |
||||
model: this |
||||
}); |
||||
|
||||
return this.next(0); |
||||
} |
||||
} |
||||
|
||||
coreModule.service('wizardSrv', WizardSrv); |
||||
@ -0,0 +1,14 @@ |
||||
// import React from 'react';
|
||||
// import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
|
||||
// import {shallow} from 'enzyme';
|
||||
//
|
||||
// import {PasswordStrength} from '../components/PasswordStrength';
|
||||
//
|
||||
// describe('PasswordStrength', () => {
|
||||
//
|
||||
// it.skip('should have class bad if length below 4', () => {
|
||||
// const wrapper = shallow(<PasswordStrength password="asd" />);
|
||||
// expect(wrapper.find(".password-strength-bad")).to.have.length(3);
|
||||
// });
|
||||
// });
|
||||
//
|
||||
@ -1,46 +0,0 @@ |
||||
.collapse-box { |
||||
margin-bottom: $spacer; |
||||
|
||||
&--error { |
||||
.collapse-box__header { |
||||
border-color: $collapse-box-body-error-border; |
||||
} |
||||
.collapse-box__body { |
||||
border-color: $collapse-box-body-error-border; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.collapse-box__header { |
||||
display: flex; |
||||
flex-direction: row; |
||||
padding: $input-padding-y $input-padding-x; |
||||
margin-right: $gf-form-margin; |
||||
background-color: $input-label-bg; |
||||
font-size: $font-size-sm; |
||||
margin-right: $gf-form-margin; |
||||
border: $input-btn-border-width solid $collapse-box-body-border; |
||||
@include border-radius($label-border-radius-sm); |
||||
} |
||||
|
||||
.collapse-box__header-title { |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.collapse-box__body { |
||||
padding: $input-padding-y*2 $input-padding-x; |
||||
display: block; |
||||
margin-right: $gf-form-margin; |
||||
border: $input-btn-border-width solid $collapse-box-body-border; |
||||
border-top: none; |
||||
@include border-radius($label-border-radius-sm); |
||||
} |
||||
|
||||
.collapse-box__header-actions { |
||||
display: flex; |
||||
flex-direction: row; |
||||
a { |
||||
margin-left: $spacer; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue