Git Product home page Git Product logo

ui-spec's Introduction

User Interface Specification Document

When the user runs the application, a screen should open where user creation can be performed. This screen should consist of 3 different parts. Operations to be performed in the header should be displayed, user information should be displayed in the right section, and new user creation should be performed in the left section. In the screen web view, the title should be displayed on top and the other sections side by side, and it should be displayed responsively on mobile or similar screen sizes.

UI

Header

Header should contain 3 different components. These;

  • User creation button-New User
  • Checkbox to show user information-Hide Disabled User
  • User save button-Save User

Also, the Hide Disabled User checkbox must be checked at first startup and the Save User button must be inactive.

UI

User Section

The users created and their information should be displayed here. This information should be kept in a table according to the ID, Usename, Email and Enabled information. If the user checks the Hide Disabled User checkbox, users with the Enabled status false should not be shown in the table. Additionally, filtering feature should be added to each column.

UI

New User Section

In the New User section the user must create a new user. When creating a new user, Username, Display Name, Phone, Email fields should be filled with text fields, User Roles dropdown should contain 3 selections (Guest, Admin, SuperAdmin) and 'Select user roles...' text should be added with placeholder. Finally there should be a checkbox specifying the Enabled feature. After entering this information, the Save User button in the header should be activated and the user should click this button to save.

UI

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.